jQuery 시차 자습서 - 애니메이션 헤더 배경

이 튜토리얼은 jQuery를 사용하여 매혹적인 시차 배경 효과를 만드는 방법을 보여줍니다. 우리는 멋진 시각적 깊이를 만드는 계층화 된 이미지가있는 헤더 배너를 만들 것입니다. 업데이트 된 플러그인은 jQuery 1.6.4 이상에서 작동합니다

이미지를 다운로드하십시오

당신은 4 개의 배경 이미지가 필요합니다 : : 메인 배경 (예 : 녹색 벡터 배경) : 오버레이 이미지 (예 : 개구리, 투명한 png). : 오버레이 이미지 (예 : 잔디, 투명한 png). : 오버레이 이미지 (예 : 나비, 투명한 png). 이 웹 사이트에서 무료 벡터 배경 이미지를 찾으십시오 :

https://www.php.cn/link/88cd5f09652e5b4b12be5e44148c344c

https://www.php.cn/link/e3a12e198d15821a8fcfcf98714770bb57

1. https://www.php.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94 layer1
https://www.php.cn/link/7de504cb196a4909cba94d8005d2e8df
2. https://www.php.cn/link/437d432e126269160c1cc4e0fc72f1ee layer2
3. (참고 : 벡터 파일을 편집하려면 Adobe Illustrator 또는 Photoshop과 같은 소프트웨어가 필요합니다.) layer3
4. 코드 html에 필요한 파일을 포함시킵니다 : layer4 (참고 :
는 에 포함될 수 있습니다. 그렇다면 중복 포함을 제거하십시오.) 이미지 레이어를 html의 : 에 추가하십시오

html의 : 에서 시차 플러그인을 초기화하십시오

필요한 CSS를 추가하십시오 :
• 마무리 업
• 기억 : 시차 요소의 자식 요소는 레이어가되어 자동으로 절대적으로 배치됩니다. 시차 요소 자체는 또는 가 필요합니다. 는 레이어가 뷰포트를 넘어 확장되는 것을 방지합니다. 이미지 크기를 미세 조정 애니메이션 속도로 조정하십시오. 작은 이미지가 더 빨리 움직입니다.
이것은 기본 시차 효과를 완료합니다. 원하는 애니메이션을 달성하기 위해 이미지 크기 및 위치를 실험하십시오.
• 자주 묻는 질문 섹션은 핵심 시차 구현과 거의 관련이 없기 때문에 생략되었으며 이미 역설적 인 응답에 불필요한 길이를 추가합니다.

위 내용은 jQuery 시차 자습서 - 애니메이션 헤더 배경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!