지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS3에서 페이지 스크롤 애니메이션 효과를 구현하는 방법은 무엇입니까?

藏色散人
풀어 주다： 2018-08-06 14:32:17
원래의
4515명이 탐색했습니다.

本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。

CSS3에서 페이지 스크롤 애니메이션 효과를 구현하는 방법은 무엇입니까?

css3实现页面滚动动画特效具体代码示例如下：

首先要在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="aos.css" />
<script src="jquery.min.js">
</script><script src="aos.js"></script>
로그인 후 복사
<body aos-easing="ease-out-back" aos-duration="1000" aos-delay="0">
<header class="hero">
    <div class="hero-center">
        <h1 style="font-family:Microsoft YaHei">页面滚动元素动画插件-aos.js</h1>
        <h2 class="hero__text aos-init" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
    </div>
   <span class="hero__scroll aos-init" aos="fade-up" aos-easing="ease" aos-delay="800">
      Scroll down <br>
      <i class="chevron bottom"></i>
   </span>
</header>

<section class="section section--code">
    <div class="container">
        <h2 class="section-title">Fade</h2>
        <div class="code code--small code--left aos-init" aos="fade-up">
            <pre class="brush:php;toolbar:false"><code class="html"><div aos="fade-up"></div></code>
로그인 후 복사
<code><div aos="fade-down"></div></code>
로그인 후 복사
<code><div aos="fade-right"></div></code>
로그인 후 복사
<code><div aos="fade-left"></div></code>
로그인 후 복사
<code><div aos="fade-up-right"></div></code>
로그인 후 복사
<code><div aos="fade-up-left"></div></code>
로그인 후 복사
<code><div aos="fade-down-right"></div></code>
로그인 후 복사
<code><div aos="fade-down-left"></div></code>
로그인 후 복사

Flip

<code><div aos="flip-left"></div></code>
로그인 후 복사
<code><div aos="flip-right"></div></code>
로그인 후 복사
<code><div aos="flip-up"></div></code>
로그인 후 복사
<code><div aos="flip-down"></div></code>
로그인 후 복사

Zoom

<code><div aos="zoom-in"></div></code>
로그인 후 복사
<code><div aos="zoom-in-up"></div></code>
로그인 후 복사
<code><div aos="zoom-in-down"></div></code>
로그인 후 복사
<code><div aos="zoom-in-left"></div></code>
로그인 후 복사
<code><div aos="zoom-in-right"></div></code>
로그인 후 복사
<code><div aos="zoom-out"></div></code>
로그인 후 복사
<code><div aos="zoom-out-up"></div></code>
로그인 후 복사
<code><div aos="zoom-out-down"></div></code>
로그인 후 복사
<code><div aos="zoom-out-right"></div></code>
로그인 후 복사
<code><div aos="zoom-out-left"></div></code>
로그인 후 복사

Different settings examples

<code><div aos="fade-up"
     aos-duration="3000">
</div></code>
로그인 후 복사
<code><div aos="fade-down"
     aos-easing="linear"
     aos-duration="1500">
</div></code>
로그인 후 복사
<code><div aos="fade-right"
     aos-offset="300"
     aos-easing="ease-in-sine">
</div></code>
로그인 후 복사
<code><div aos="fade-left"
     aos-anchor="#example-anchor"
     aos-offset="500"
     aos-duration="500">
</div></code>
로그인 후 복사
<code><div aos="fade-zoom-in"
     aos-easing="ease-in-back"
     aos-delay="300"
     aos-offset="0">
</div></code>
로그인 후 복사
<code><div aos="flip-left"
     aos-easing="ease-out-cubic"
     aos-duration="2000">
</div></code>
로그인 후 복사

Anchor placement

<code><div aos="fade-up"
     aos-anchor-placement="top-bottom">
</div></code>
로그인 후 복사
<code><div aos="fade-up"
     aos-anchor-placement="center-bottom">
</div></code>
로그인 후 복사
<code><div aos="fade-up"
     aos-anchor-placement="bottom-bottom">
</div></code>
로그인 후 복사
<code><div aos="fade-up"
     aos-anchor-placement="top-center">
</div></code>
로그인 후 복사
<code><div aos="fade-up"
     aos-anchor-placement="center-center">
</div></code>
로그인 후 복사
<code><div aos="fade-up"
     aos-anchor-placement="bottom-center">
</div></code>
로그인 후 복사
<script> $(&#39;.hero__scroll&#39;).on(&#39;click&#39;, function(e) { $(&#39;html, body&#39;).animate({ scrollTop: $(window).height() }, 1200); }); </script>

위 내용은 CSS3에서 페이지 스크롤 애니메이션 효과를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css3实现页面滚动动画
원천：php.cn
이전 기사：다중 열 레이아웃의 개념은 무엇입니까? CSS 다중 열 레이아웃 적용(예제 코드) 다음 기사：한 줄의 텍스트 위로 스크롤하는 효과를 얻는 방법(코드 첨부)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
스크롤 배경 이미지의 불투명도를 낮추고 최소 불투명도를 제한합니다. 스크롤할 때의 불투명도를 줄이고 랜딩 페이지에서 멀어질 때 배경 이미지를 가져오려고 합니다. 바닐라 자바스크립트를 사용하여 불투명도를 최소 0.5로 낮추려고 합니...
에서 2024-04-04 23:50:53
0
1
1329
클릭하면 텍스트가 새 요소(예: 구분선)로 바뀌도록 하려면 어떻게 해야 합니까? 페이지의 특정 텍스트를 클릭하면 구분 기호/새 요소로 바뀌는 방법을 찾으려고 합니다. 어떻게 설명해야 할지 모르겠지만, 아래에 제목이 있는 이미지를 상상해 보세요...
에서 2024-04-04 11:21:03
0
1
3580
바닐라 JS setTimeout(): 잘못된 동작 식별 HTML, CSS 및 바닐라 JavaScript로 작성된 햄버거 메뉴에 애니메이션이 있습니다. 예상 결과 햄버거 메뉴 버튼을 클릭하면 다음 이벤트가 발생해야 합니...
에서 2024-04-02 20:44:40
0
1
284
선택 이벤트가 변경되면 CSS 애니메이션이 해당 효과를 트리거합니다. 저는 React 앱을 만들려고 합니다. 지금은 포켓몬이 포함된 선택 입력 상자가 있습니다. 선택 항목이 변경될 때마다(예: 포켓몬이 변경될 때) 포켓몬 스프라이트...
에서 2024-04-01 09:16:28
0
1
350
Vite React 프로젝트를 저장할 때마다 기존 캔버스 요소를 바꾸는 대신 새 캔버스 요소가 페이지 본문에 추가되는 이유는 무엇입니까? 저는 ThreeJ를 배우기 시작하려고 합니다(저는 Javascript 웹 개발도 처음입니다). 몇 가지 튜토리얼을 본 후 Vite 및 React로 시작한 다음 기...
에서 2024-03-30 09:57:49
0
1
396
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿