개발 공부/자바스크립트

[엘리의 드림코딩 JS] 자바스크립트 애니메이션 라이브러리

5묘 2022. 12. 9. 23:38

https://youtu.be/wbDpZwDRgRk

1) TypeIt : 타이핑 효과를 주는 애니메이션 라이브러리

https://www.typeitjs.com/docs

 

Documentation | TypeIt

It's extremely easy to configure and start using TypeIt. Here's the documentation to show you how to fully leverage it.

www.typeitjs.com

장점: 4kb의 작은 용량, SEO 최적화 

<!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>
    <style>
      :root {
        --ti-cursor-margin-left: 0.1rem;
        --ti-cursor-color: dodgerblue;  /* User Styling 가능 */
      }
    </style>
    <script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
  </head>
  <body>
    <h1 id="title">DreamCoding Youtube</h1>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        new TypeIt("#title")
          .pause(1000)
          .delete(7, { delay: 1000 })  /* 글자를 치고, 멈추고, 삭제하는 효과 */
          .type("Academy")
          .go();
      });
    </script>
  </body>
</html>

 

2) ScrollOut: 스크롤링 애니메이션 라이브러리

https://scroll-out.github.io/guide.html#getting-started

 

ScrollOut

Effects and CSS Vars on Scroll!

scroll-out.github.io

장점: 1kb의 작은 용량, JS callback. css의 selector나 변수로 쉽게 다룰 수 있음, 프레임워크에 상관 없이 적용 가능. 이걸로 레이지 로딩(image)도 구현할 수 있음. 

 

<!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" />
    <script src="https://unpkg.com/typeit@8.3.3/dist/index.umd.js"></script>
    <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="site-wrap">
      <section data-scroll>
        <h1 class="title">Scroll on down</h1>
        <p>
          Consectetur adipisicing elit. Tempore tempora rerum, est autem
          cupiditate, corporis a qui libero ipsum delectus quidem dolor at
          nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis
          quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores
          sunt esse magni, ut, dignissimos.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates,
          deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta
          dolor itaque adipisci, dolorum minima, veritatis earum provident error
          molestias. Ratione magni illo sint vel velit ut excepturi consectetur
          suscipit, earum modi accusamus voluptatem nostrum, praesentium
          numquam, reiciendis voluptas sit id quisquam. Consequatur in quis
          reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit
          iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum
          quibusdam fugit perferendis et optio recusandae sed ratione. Culpa,
          dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus
          maiores illum quas quos et aperiam aut doloremque optio maxime fugiat
          doloribus. Eum dolorum expedita quam, nesciunt
        </p>
        <p>
          Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem
          dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis
          blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
          pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.
        </p>
        <p>Adipisicing elit. Tempore tempora rerum.</p>
      </section>
     ...     
    </div>
    <script>
      ScrollOut({
        once: true,
        onShown: (element) => {
          new TypeIt(element.querySelector(".title"), {
            /*Typeit 라이브러리도 이렇게 적용 가능*/ 
            startDelay: 500,
            cursor: false,
          })
            .pause(1000)
            .go();
        },
      });
    </script>
  </body>
</html>
Footer © 2022 GitHub, Inc. Footer navigation Terms Privacy Security Status

 

3) Anime.js : 다양한 애니메이션 효과를 줄 수 있는 라이브러리

https://animejs.com/

 

anime.js

Javascript animation engine

animejs.com

CSS 속성, SVG, DOM 속성과 JS Objects 들에 대해 애니메이션 효과 줌.

...
    let slideup = anime({
    targets: ".order-details-container",
    translateY: ["-40px", "-560px"],
    autoplay: false,
    begin: function () {
      show_hideCTA("none"); /* 슬라이딩 되면서 버튼 숨기기 */
    },
    });
...

 

4) Anime.js : parallax scrolling 시 요소마다 다르게 속도 주는 라이브러리

https://dixonandmoe.com/rellax/

 

Vanilla Javascript Parallax Library — Rellax

Add a lightweight vanilla javascript parallax library to your website for subtle animations. Works with HTML, Wordpress, Shopify and more!

dixonandmoe.com

<!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" />
    <script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
    <title>Document</title>
    <style>
      html,
      body {
        height: 300vh;
        color: #fff;
      }

      body {
        background: url("./background.png");
      }

      .content {
        align-items: center;
        display: flex;
        height: 100vh;
        justify-content: center;
        margin: 0;
        max-width: 100%;
        width: 100vw;
      }

      div {
        background: #333;
        font-size: 30px;
        font-weight: bold;
        height: 200px;
        line-height: 200px;
        margin: 1em;
        text-align: center;
        width: 300px;
      }

      .one {
        background-color: #ec368d;
      }

      .two {
        background-color: #333;
      }

      .three {
        background-color: #440381;
      }

      .image {
        z-index: -1;
        position: absolute;
        bottom: 20px;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <article class="content">
      <!-- 속도는 양수일수록 빠르고, 음수일수록 느리다  -->
      <div class="one rellax" data-rellax-speed="4">Faster</div>
      <div class="two">No parallax</div>
      <div class="three rellax" data-rellax-speed="-8">Slower</div>
      <img class="image rellax" data-rellax-speed="10" src="./gallaxy.png" />
    </article>
    <script>
      new Rellax(".rellax");
    </script>
  </body>
</html>

 

5) GreenSock (GSAP!) : 

https://greensock.com/docs/

 

Docs

Documentation for GreenSock Animation Platform (GSAP)

greensock.com

전에 갤럭시 공홈에서 눈여겨본 .mp4 재생속도를 다르게 하는 애니메이션 라이브러리가 이거였다!😍
적절한 플러그인을 골라 사용해보자.

<!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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/Flip.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container final">
      <div class="letter F">F</div>
      <div class="letter l">l</div>
      <div class="letter i">i</div>
      <div class="letter p">p</div>
      <div class="for">for</div>
      <div class="gsap">GSAP</div>
    </div>
    <script>
      gsap.registerPlugin(Flip);

      const layouts = ["final", "plain", "columns", "grid"];
      const container = document.querySelector(".container");
      let curLayout = 0;

      function nextState() {
        const state = Flip.getState(".letter, .for, .gsap", {
          props: "color,backgroundColor",
          simple: true,
        });

        container.classList.remove(layouts[curLayout]);
        curLayout = (curLayout + 1) % layouts.length;
        container.classList.add(layouts[curLayout]);

        Flip.from(state, {
          absolute: true,
          stagger: 0.07,
          duration: 0.7,
          ease: "power2.inOut",
          spin: curLayout === 0,
          simple: true,
          onEnter: (elements, animation) =>
            gsap.fromTo(
              elements,
              { opacity: 0 },
              { opacity: 1, delay: animation.duration() - 0.1 }
            ),
          onLeave: (elements) => gsap.to(elements, { opacity: 0 }),
        });

        gsap.delayedCall(curLayout === 0 ? 3.5 : 1.5, nextState);
      }
      gsap.delayedCall(1, nextState);
    </script>
  </body>
</html>
저작자표시 비영리 변경금지

'개발 공부 > 자바스크립트' 카테고리의 다른 글

JavaScript 기초 - array  (0) 2023.09.21
[엘리의 드림코딩 JS] 자바스크립트 코딩 꿀팁🍯  (0) 2022.12.09
[엘리의 드림코딩 JS] 자바스크립트 프로처럼 쓰는 팁✨  (0) 2022.12.09
[엘리의 드림코딩] Java와 JavaScript의 차이점이 뭔가요? 이걸 왜 묻냐고요?  (0) 2022.12.07
[엘리의 드림코딩 JS] ES6 - ES11 핵심 문법들  (0) 2022.12.07

'개발 공부/자바스크립트'의 다른글

  • 현재글[엘리의 드림코딩 JS] 자바스크립트 애니메이션 라이브러리

관련글

댓글

티스토리툴바