스크롤 아웃을 통한 애니메이션

15631 단어 cssfrenchjavascript
Bonjour, je vais vous présenter la librairie JS: scroll-out permettant de faire des animations simples au défilement d'une 페이지.
Démo

준비



HTML로 상용구를 시작합니다.

팁: dans vscode il suffit de taper ! dans un fichier HTML을 따르십시오 le créer



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>


ensuite, je crée mon fichier CSS, qui est dans mon cas est : css/main.css
je le relie à mon fichier HTML en rajoutant la ligne:<link rel="stylesheet" href="css/main.css" />
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body></body>
</html>


pour vérifier que mon CSS est bien attaché, je mets une couleur de fond pour le body

body {
  background-color: aqua;
}


Puis je lance mon live server , 확장자 vscode LiveServer

Et je vois une page turquoise, donc tout est bon :)

Je retourne dans mon HTML, je vais faire 4 <sections> , avec 1 titre <h1> et un 단락 <p> 단 차크.

작은 테이퍼 방향에 대한 팁 avec emmet :section*4>h1{titre$}+p>lorem
et je rajoute la balise data-scroll dans unh1 et une section .
Ensuite, je rajoute le lien vers la librairie scroll-outMon HTML은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <section>
      <h1>titre1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
        explicabo, dolorem laborum dicta exercitationem earum! Illum vitae
        saepe, ut praesentium beatae ipsa excepturi non commodi voluptatem
        tempora. Sit, placeat impedit!
      </p>
    </section>

    <section>
      <h1 data-scroll>titre2</h1>
      <p>
        Blanditiis minima iure molestias quis praesentium voluptatibus, deserunt
        repellendus necessitatibus qui, illum dolor, ipsum ipsam architecto?
        Illum consequatur aliquam rerum in qui. Quis, eligendi architecto.
        Ducimus quod magnam eveniet harum?
      </p>
    </section>

    <section data-scroll>
      <h1>titre3</h1>
      <p>
        Nemo corporis nesciunt quidem obcaecati dicta voluptas, deserunt ipsa.
        Pariatur neque vel tenetur quidem, commodi necessitatibus quae
        blanditiis harum nemo sunt nostrum quas esse officiis debitis! Molestias
        sunt minima quis.
      </p>
    </section>

    <section>
      <h1>titre4</h1>
      <p>
        Fuga qui, assumenda aut recusandae expedita, facere sit inventore
        voluptates nobis, exercitationem tenetur amet. Illum adipisci, tempora
        maiores velit magnam, praesentium earum aliquam possimus in debitis
        sapiente? Sapiente, ab aliquid.
      </p>
    </section>
  </body>
  <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>

</html>


Pour finir avec la préparation, je passe au CSS, pour mieux separer les éléments et rendre une meilleure visibilité. Chaque 섹션 aura la hauteur d'un écran.

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
}

section {
  height: 100vh;
  width: 100%;
  padding: 6em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
}

section h1 {
  font-size: 5em;
}

section p {
  width: 50%;
  opacity: 0.8;
  line-height: 1.5em;
  font-size: 1.5em;
}

section:nth-of-type(1) {
  background: #1da767;
}

section:nth-of-type(2) {
  background: #257bb4;
}

section:nth-of-type(3) {
  background: #6f26b3;
}

section:nth-of-type(4) {
  background: #8ead27;
}


구성



계속해서, je vais configurer les animations,

je vais faire une transition sur toute les balise data-scroll aillant une durée de 2 s


[data-scroll] {
  -webkit-transition: all 2s;
  transition: all 2s;
}


르out : l'élément n'est pas encore affiché sur l'écran.
Du coup, c'est le point de départ de l'animation.
Il est à 200px sur la gauche, avec une opacité à 0, donc transparent.

[data-scroll='out'] {
  opacity: 0;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}


La configuration de monin , c'est-à-dire quand l'élément entre dans l'écran, il passe de la gauche, pour aller vers sa positon "normal", son opacité devient visible, le tout sur une durée de 2 seconde (qui a été) 데피니 아방트).

[data-scroll='in'] {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}


Le fonctionnement de base est maintenant fait. Mais il y a un léger souci, puis que l'animation begin un peu trop tôt.
En effet, elle débute dès que l'écran l'affiche.



je vais rajouter un délai, dans mon HTML, pour que l'animation begin 0.5 seconde plus tard avec threshold: 0.5
Et si je désire ne faire l'effet qu'une seule fois, je rajoute once: true
  <script>
    ScrollOut({
      once: true,
      threshold: 0.5,
    })
  </script>


il existe plusieurs options disponibles, je vous renvoie vers la doc pour plus d'information: https://scroll-out.github.io/guide.html#configuration

Merci de m'avoir lu et bon code :)

GitHub에서 코드 완료:
https://github.com/neuroloops/scroll-out
Mac에서 직접 개발 환경 daab을 구축해 봅니다.
CentOS7.3 환경(Vagrant)에 Mattermost 가 있었으므로 php 로 bot 를 추가해 본다(Outgoing WebHooks) 그 1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage