불투명도, 배율, 이동, 심지어 가시성 및 표시까지 사용하여 웹 요소를 한 상태에서 다른 상태로 전환하는 아이디어는 그다지 나쁘지는 않지만 매우 평범하고 오래되었습니다. 앞으로 나아가고, 새로운 발걸음을 내딛고, 뭔가 다른 것이 되어야 합니다. 그리고 오늘 저는 문자, 직사각형, 원, 이미지의 샘플 입자 등 무엇이든 사용하여 요소를 휙휙 휙휙 휙휙 휙휙 휙 휙 휙 휙 휙 휙 휙 흩어버리는 마법 같은 영감 효과를 소개합니다! (상상할 수 있겠습니까).

그래서 아이디어는 요소를 일종의 부분으로 변경하고, 제목과 같은 텍스트 요소인 경우 해당 부분이 문자가 되고, 이미지인 경우 샘플링된 색상 입자가 될 수 있습니다. 이제 아래 CodePen은 효과 생성의 기본 개념을 보여줍니다.

위의 예에서 볼 수 있듯이 부품이 중앙에 있고 애니메이션될 때 다음과 같은 유틸리티 함수를 사용하여 이 중앙 위치에서 임의의 위치로 변환되었음을 보여줍니다.

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

하지만 이제 Poof 효과를 얻으려면 입자에 애니메이션을 적용하기 직전에 초기 요소를 숨겨야 합니다. 스케일을 사용하여 숨겼습니다. 이 스케일링은 입자에도 영향을 미치므로 다음을 방지해야 합니다. 입자를 포함할 요소를 생성합니다. 이 요소는 초기 요소와 유사해야 합니다. 초기 요소의 스케일링 애니메이션이 완료되고 입자의 각 입자에 대한 애니메이션이 완료된 후 초기 요소를 제거합니다. 입자를 포함하는 요소

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%; 
                    `

기사 첫 번째에서 말했듯이 픽셀을 사용하여 색상을 샘플링한 다음 이러한 색상을 입자에 사용하는 이미지에 대한 poof 효과가 있으므로 이미지에 대한 이 poof 효과는 다음 기사가 될 것입니다.

여기까지 오셨다면 완독하셨다는 뜻이고, 이런거에 푹 빠져 있다는 뜻이니 좋아요 ❤️.

더 많은 내용을 보려면 나를 팔로우하세요 ?✅
dev.to
트위터/X
링크드인