Идея перевода веб-элементов из одного состояния в другое с использованием непрозрачности, масштабирования, перевода, даже видимости и отображения, стала очень обыденной и старой, хотя это не так уж и плохо, но это должен двигаться вперед, сделать новый шаг, быть чем-то другим, и сегодня я представляю вам волшебный вдохновленный эффект, который удаляет элемент, используя что угодно, например, буквы, прямоугольники, круги и даже образцы частиц изображения! (можете себе представить).

Итак, идея состоит в том, чтобы превратить наш элемент в своего рода части, и эти части могут быть взяты из него, если это текстовый элемент, например, заголовки, они будут буквами, а если это изображение, они будут выборочными цветными частицами. Теперь этот CodePen ниже показывает основную концепцию создания эффекта:

Как вы можете видеть, приведенный выше пример показывает, что части центрированы, и когда они анимируются, они преобразуются из этого центрального положения в случайное положение с помощью такой служебной функции:

const rand = (min, max) => Math.floor(Math.random() * (max - min)   min)

Но теперь, чтобы добиться эффекта Пуфа, нам нужно скрыть наш первоначальный элемент непосредственно перед анимацией частиц. Я использовал масштабирование, чтобы скрыть его, это масштабирование также повлияет на наши частицы, чтобы предотвратить это, нам нужно будет создайте элемент, содержащий наши частицы, и этот элемент должен быть похож на наш исходный элемент, и после того, как мы закончим анимацию масштабирования начального элемента и закончим анимацию каждой частицы частиц, мы удалим начальный элемент вместе с элемент, содержащий наши частицы

Обратите внимание, что я создал 2 массива: один для частиц с именами частей, а другой для анимаций. Этот второй массив будет передан методу Promise.all, чтобы определить завершение анимации без использования жесткого кода. закодированный setTimeouts

  const div = document.querySelector("div");
        let parts = [];
        let animations = [];

return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })

Что произойдет, если мы расположим наши частицы абсолютно в форме сетки, а не в центральном положении, и эта форма будет в строках и столбцах, используя основной цикл for для позиционирования строк и вложенный цикл for для позиционирования столбцы

Эффект готов! а как насчет использования изображения облака вместо цветного прямоугольника и даже раскрашивания его в цвет исходного элемента, используя 2 сложенных фоновых изображения: одно — линейный градиент цвета исходного элемента, второе — фактическое изображение облака, а затем применить режим наложения фона для умножения, а также маскирование элемента частицы изображением маски облака

                    --cloud: 
url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `

Как я уже говорил в первой статье, существует эффект пуфа для изображений, который использует пиксели для выборки цветов, а затем использует эти цвета для частиц. Так что этот эффект пуфа для изображений станет нашей следующей статьей

Если вы зашли сюда, это означает, что вы дочитали до конца и у вас есть какая-то одержимость подобными вещами, так что покажите это, поставив лайк/люблю ❤️.

Подпишитесь на меня, чтобы узнать больше ? ✅
dev.to
твиттер/X
связанный