자바스크립트 웹 특수효과 예제 모음집에 떠있는 그림의 효과 예제를 읽어보니 배울만하다는 생각이 듭니다.
눈송이가 떨어지는 효과를 얻으려면 사진을 눈송이 사진으로 변경하세요.
또한, 일부 콘텐츠가 상대적으로 오래되었으므로 변경해 보겠습니다.
포함 내용:
1. 왼쪽과 상단의 작업은 IE 브라우저만 지원합니다. 이 작업을 위해서는 Chrome이 지원되어야 합니다.
2. 사진의 위치를 제어하는 과정에서는 요소를 검색해야 합니다. 그렇지 않은 경우 이를 배열 저장소로 변경하고 배열에 저장된 개체를 직접 조작하는 것이 더 빨리 시작되지 않습니다.
3. JS 코드를 통해 요소 객체를 생성하여 문서에 직접 요소를 추가합니다.
구현 아이디어:
1. 모두 절대 위치 지정을 사용하는 10개의 div를 초기화하고 생성합니다. 각 div에 눈송이 이미지를 넣고 너비와 높이를 설정한 후 배열에 저장하면 후속 눈 기능이 직접 작동할 수 있습니다.
2. 각 div의 가로 좌표와 세로 좌표를 초기화합니다. 항상 눈송이가 떨어지는 시작 위치를 제공합니다.
3. 각 눈송이가 수직으로 떨어지는 단계와 수평으로 흔들리는 단계를 갖도록 초기화하여 각 눈송이가 서로 다른 속도로 떨어지고 흔들리도록 합니다.
4. 눈 기능을 만들고 10초마다 기능을 조정합니다. 기능을 조정할 때마다 각 눈송이가 자체 보폭만큼 수직으로 떨어지도록 제어합니다. 수평 스윙은 사인 함수를 사용하여 계산된 후 곱해집니다. 진폭으로 눈송이가 정현파 형태로 떨어지도록 합니다.
온라인에서 사진을 찾을 수 있습니다.
다음 코드는 IE8 및 Chrome과 호환됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
