CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다.

이 글에서는 주로 fullPage를 소개합니다.js와 CSS3를 사용하여 전체 화면 스크롤 효과를 얻을 수 있는데, 이는 관심 있는 친구들이 참고할 수 있습니다

우선 이야기해 보겠습니다. fullpage는 jquery 플러그인으로, 마우스를 위아래로 슬라이드하면 자동으로 이전 화면이나 다음 화면으로 전환되는 것을 인식하는 데 사용됩니다. 아주 좋은 플러그인. 먼저 기본 렌더링을 보여줍니다.

총 4화면의 콘텐츠

마우스를 위아래로 움직일 때마다 전체 화면이 전환됩니다.

첫 번째 화면은 한 장의 사진을 사용하고, 나머지 3개의 화면은 왼쪽 3장, 오른쪽 2장으로 구성됩니다.

이 세 화면의 왼쪽에 있는 사진은 다양한 방식으로 확대되어 더욱 시원한 효과를 줍니다.
페이지가 표시될 때 두 번째 화면의 세 장의 사진이 아래에서 위로 올바른 위치로 나옵니다.
페이지가 표시되면 세 번째 화면에 있는 세 장의 사진이 왼쪽에서 오른쪽으로 올바른 위치로 확대됩니다.
네 번째 화면에 있는 세 장의 사진은 페이지가 표시될 때 가운데에서 양쪽으로 올바른 위치로 확대됩니다.

1단계: jquery 및 전체 페이지 플러그인을 다운로드하고 전체 페이지에는 CSS 및 js가 포함되어 있습니다.

<script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css">
<script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>

2단계: HTML로 좋은 요소 만들기:

<p class = "main">

  <p class="section page1">
    <img  src="./images/page1.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  src = "./images/page2_2.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  src = "./images/page2_3.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
    </p>
      <img  class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  src = "./images/page3_2.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  src = "./images/page3_3.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  src = "./images/page4_2.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  src = "./images/page4_3.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다." >
  </p>

</p>
 <p id = "audioBox">
    <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio>
  </p>

에는 콘텐츠 화면 4개와 음악 재생을 위한 오디오 요소가 포함되어 있습니다.

3단계: fullpage의 js를 사용하여 각 화면의 배경색을 구현하고 js를 사용하여 음악을 일시 중지합니다.

//1.fullpage，由于有四屏，其颜色也一样
    $(".main").fullpage({
sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b']
    });

    //2.控制音频的播放
    var audioBox = document.getElementById('audioBox');
    var audio = document.getElementById("audio");

    audioBox.onclick = function(){

    if(audio.paused){
      audio.play();
    }
    else
    {
      audio.pause();
    }
  }

4단계: 레이아웃에 CSS 사용:

<style type="text/css">
  *{
    margin: 0;
    padding:0;
  }

 //设置背景音乐的图标
  #audioBox{
    width: 45px;
    height: 45px;
    position: absolute;
    background: url(./images/music_on.png) no-repeat center;
    border-radius: 22px;
    top: 5%;
    right: 3%;
    cursor: pointer;
  }

  //让每屏超出的都自动隐藏
  .section{
    overflow: hidden;
  }

  /*设置第一屏的图片，因为第一屏也只有一个图片*/
  .page1 img{
    width: 50%;
    margin-left: 30%;
  }

 /*从第二屏开始都包含一个class=list的元素块，设置其距离左侧的距离*/
  [class *= "page"] .list{
    margin-left: 5%;
  }

 /*让左边的图片的宽度都为240px*/
  [class *= "page"] .list img{
    width: 240px;

  }

  /*利用属性选择器，选出所有页的背景图片*/
  [class *= "page"] .bg{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 30%;
  }

  /*利用属性选择器，选择出所有页的文字图片*/
  [class *= "page"] .text{
    position: absolute;
    top: 10%;
    right: 5%;
  }

4단계를 통과하면 기본 효과는 완성되었으나, 마지막으로 4화면 이미지에는 애니메이션 효과가 구현되지 않았다는 점입니다. .

5단계: 애니메이션 효과를 구현합니다.

1. 현재 스크롤되는 화면을 확인하는 방법은 무엇인가요?

fullpage는 현재 페이지에 활성 클래스를 추가하므로 해당 클래스를 사용하여 현재 페이지에서 애니메이션이 실행되는 시점을 결정할 수 있습니다.

2. 첫 화면의 애니메이션을 구현합니다

첫 화면은 주로 영상의 페이드인 효과입니다.
아이디어: 불투명도 속성을 변경하고 전환과 결합하여 투명도를 변경하여 페이드인 효과를 얻습니다.

.page1 img{
    opacity: 0;  /*初始状态为全透明*/
    /*加上供应商前缀，持续时间为1.5s*/
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
  }

/*当第一页显示的时候触发,当第一页时就会自动加上active类*/
  .page1.active img{
    opacity: 1;
  }

3. 두 번째 화면의 애니메이션을 구현합니다.

두 번째 화면의 애니메이션은 페이지가 표시될 때 왼쪽에 있는 세 장의 그림이 창 안으로 아래에서 위로 미끄러지는 것입니다.
핵심 아이디어: m:translateY에 trans를 사용하고 이를 구현하려면
전환은 속성 값 변경을 감지하는 것
translateY 번역

/*动画的完成时间为1s，初始位置三个图片都处于向下移动到1000像素，即移出屏幕外。*/
  .page2 .list img{
    transition:1s;
    transform: translateY(1000px);
  }

 /*当第二屏触发时，图片回到原始位置*/
  .page2.active .list img{
    transform:translateY(0px);
  }

/*利用结构化伪类找到每一个图片并设置延时，为了使动画更灵活*/
  .page2 .list img:nth-child(1){
    transition-delay: 0.5s;
  }
  .page2 .list img:nth-child(2){
    transition-delay: 0.8s;
  }
  .page2 .list img:nth-child(3){
    transition-delay: 1s;
  }

4 . 구현 세 번째 화면의 애니메이션

translateY를 사용하면 세 번째 화면이 좌우로 이동하며, 가로 방향을 제어하려면 TranslateX가 있어야 합니다. 먼저, 초기 상태는 맨 왼쪽에 세 장의 그림이 겹쳐져 있는 상태인데, 애니메이션이 실행되면 두 번째 화면의 예를 따라하면

rree이 화면의 두 사진의 초기 상태로 인해 가장 왼쪽 사진에 위치가 겹쳐져야 하므로 이 두 사진에 대해 각각translateX

.page .list img{ 
/设置动画持续时间为1s，动画开始时延迟0.5s/ 
transition: 1s 0.5s; 
}

를 설정합니다. 5. 애니메이션을 설정합니다. 다섯 번째 화면.

다섯 번째 화면의 애니메이션은 왼쪽 그림 3개가 가운데 그림과 먼저 겹쳐졌다가 트리거된 후 원래 위치로 돌아가는 애니메이션입니다.

① 위의 아이디어에 따라 tanslateX를 사용하여 구현할 수 있습니다.

.page .list img:nth-child(2){ 
/向左移动了250px刚好与第一个重叠/ 
transform:translateX(-250px); 
}

.page .list img:nth-child(3){ 
/向左移动了500px刚好与第一个重叠/ 
transform:translateX(-500px); 
}

/设置触发时的动画，让所有的img归位/ 
.page3.active .list img{ 
transform:translateX(0px); 
}

② CSS3의 전환 및 변환 속성 외에도 CSS3의 애니메이션을 사용할 수도 있습니다. key

frames

.page4 .list img{
    transition: 1s 0.5s;
  }
  /*设置第一个和第三个的初始位置处于中间的位置上*/
  .page4 .list img:nth-child(1){
    transform:translateX(250px);
  }
  .page4 .list img:nth-child(3){
    transform:translateX(-250px);
  }
 /*触发时归位*/
  .page4.active .list img{
    transform:translateX(0px);
  }

키프레임의 매개변수에 대한 자세한 내용은 설명서를 확인하고 익숙해질 수 있습니다.

위 코드로 멋진 전체화면 스크롤 페이지가 완성되었습니다!

첨부된 소스코드:

.page4.active .list img:nth-child(1){
    transform:translateX(0px);
    -webkit-animation: 'flymove1' 1s ease-in 1;  /*动画名、持续时间、更细粒度动画，重复次数*/
  }

  .page4.active .list img:nth-child(3){
    transform:translateX(0px);
    -webkit-animation: 'flymove2' 1s ease-in 1;
  }

   @-webkit-keyframes flymove1{
    0%{ transform: translateX(250px);}
    100%{ transform: translateX(0px);}
   }

   @-webkit-keyframes flymove2{
    from{ transform: translateX(-250px);}
    to{ transform: translateX(0px);}
   }

[관련 추천]

1.

무료 CSS 온라인 동영상 튜토리얼

2. >css 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

위 내용은 CSS3+fullPage.js는 전체 화면 스크롤 효과 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!