지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Day Let은 눈이다! ❄️

Day Let은 눈이다! ❄️

Linda Hamilton
풀어 주다： 2024-12-19 07:05:08
원래의
366명이 탐색했습니다.

저는 복잡한 눈송이를 좋아해요. 아, 저들이 얼마나 우아하게 소용돌이치며 춤을 추는지! 오늘은 AnimeJS로 눈을 만들어 보세요!

이름에서 알 수 있듯이 이 라이브러리를 사용하면 CSS 값과 DOM 속성부터 변수에 이르기까지 거의 모든 것에 애니메이션을 적용할 수 있습니다.

간단한 HTML 파일을 만들어 보겠습니다. index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Anime</title>
  </head>
  <body>
    <script type="module">
      import anime from "https://esm.sh/animejs@3.2.2";
      const createSnowflake = () => {
        const el = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        el.setAttribute("viewBox", "0 0 65 64");
        el.classList.add("snowflake");
        el.innerHTML = `<path
          d="M63.063 30.1745H57.7427L60.1278 27.8056C60.7613 27.1766 60.7613 26.1567 60.128 25.5278C59.4947 24.8988 58.4679 24.8986 57.8348 25.5276L53.1561 30.1745H45.2926L48.7914 26.4393C49.4013 25.7881 49.3644 24.7691 48.7086 24.1628C48.4398 23.9145 48.1086 23.7758 47.7691 23.7416C47.5633 23.7315 43.1215 23.741 43.1215 23.741L48.3202 18.5772H54.8467C55.7425 18.5772 56.4684 17.8562 56.4684 16.9664C56.4684 16.0767 55.7425 15.3557 54.8467 15.3557H51.5633L55.3881 11.5565C56.0214 10.9272 56.0214 9.90753 55.3881 9.27827C54.7546 8.64943 53.6921 8.64943 53.0586 9.27827L49.1531 13.1221V9.7718C49.1531 8.88202 48.4273 8.16106 47.5315 8.16106C46.6357 8.16106 45.9099 8.88202 45.9099 9.7718V16.3438L40.5397 21.7138L40.45 16.8505C40.4498 16.8427 40.4575 16.8354 40.4573 16.8277C40.4498 16.436 40.3051 16.0457 40.0098 15.7412C39.3886 15.1008 38.328 15.0819 37.6831 15.6995L34.2342 18.9695V11.4055L38.8764 6.83016C39.5097 6.2009 39.5276 5.18119 38.8943 4.55215C38.2608 3.92331 37.2072 3.92331 36.5739 4.55215L34.2342 6.84927V1.61072C34.2342 0.720951 33.5084 -1.52588e-05 32.6126 -1.52588e-05C31.7168 -1.52588e-05 30.991 0.720951 30.991 1.61072V6.84949L28.7142 4.55236C28.0807 3.92353 27.0722 3.92353 26.4387 4.55236C25.8054 5.18162 25.7784 6.20133 26.4117 6.83037L30.991 11.4057V19.0129L27.4934 15.6894C26.8428 15.078 25.8351 15.1057 25.2188 15.7515C24.9864 15.9955 24.8549 16.2927 24.805 16.6009C24.7743 16.7261 24.7611 16.856 24.7615 16.9898L24.7425 21.5491L19.3155 16.192V9.7718C19.3155 8.88202 18.5897 8.16106 17.6939 8.16106C16.7981 8.16106 16.0722 8.88202 16.0722 9.7718V12.9705L12.3909 9.27827C11.7574 8.64943 10.749 8.64943 10.1155 9.27827C9.48219 9.90753 9.49127 10.9272 10.1246 11.5565L13.9585 15.3557H10.5224C9.62663 15.3557 8.90079 16.0767 8.90079 16.9664C8.90079 17.8562 9.62663 18.5772 10.5224 18.5772H17.2018L22.5518 23.8913L17.5665 24.0698C16.6971 24.1011 15.9397 24.8075 15.9313 25.6629C15.9304 25.687 15.8558 25.7112 15.8558 25.7353V25.7376L15.9304 25.7428C15.9401 26.1455 16.1369 26.5452 16.4482 26.8506L19.8733 30.1745H12.3657L7.68717 25.5274C7.05365 24.8986 6.02706 24.8986 5.39376 25.5274C4.76046 26.1567 4.76046 27.1764 5.39376 27.8054L7.77862 30.1743H2.30619C1.41041 30.1743 0.68457 30.8952 0.68457 31.785C0.68457 32.6748 1.41041 33.3957 2.30619 33.3957H7.71592L5.39376 35.7023C4.76046 36.3316 4.76046 37.3513 5.39376 37.9803C5.71052 38.2948 6.12565 38.452 6.54057 38.452C6.95549 38.452 7.37062 38.2948 7.68738 37.9803L12.3027 33.396H19.8761L16.5782 36.9168C15.9682 37.568 16.0052 38.587 16.661 39.1933C16.9732 39.482 17.3695 39.6248 17.765 39.6248C17.7724 39.6248 17.7797 39.6237 17.7873 39.6237C17.792 39.6237 17.7968 39.6244 17.8013 39.6244C17.8052 39.6244 17.8093 39.6244 17.8132 39.6244L22.5711 39.5975L17.1388 44.9933H10.5224C9.62663 44.9933 8.90079 45.7142 8.90079 46.604C8.90079 47.4938 9.62663 48.2147 10.5224 48.2147H13.8956L10.1337 51.9514C9.50035 52.5807 9.50035 53.6004 10.1337 54.2295C10.4504 54.5439 10.8655 54.7011 11.2805 54.7011C11.6954 54.7011 12.0744 54.5439 12.3912 54.2295L16.0722 50.5374V53.7986C16.0722 54.6884 16.7981 55.4094 17.6939 55.4094C18.5897 55.4094 19.3155 54.6884 19.3155 53.7986V47.316L24.8171 41.8871L25.0284 47.1252C25.0604 47.9942 25.7888 48.6943 26.6569 48.6769C26.9518 48.6711 27.2718 48.5771 27.5892 48.3455C27.8191 48.1778 30.9912 44.9497 30.9912 44.9497V52.5491L26.4569 57.0886C25.8234 57.7177 25.8415 58.7376 26.4746 59.3666C26.7914 59.6813 27.2152 59.8385 27.6303 59.8385C28.0452 59.8385 28.4288 59.6813 28.7453 59.3669L30.9912 57.1049V62.3892C30.9912 63.279 31.717 64 32.6128 64C33.5086 64 34.2344 63.279 34.2344 62.3892V56.9535L36.7001 59.3669C37.0169 59.6813 37.45 59.8385 37.8649 59.8385C38.2798 59.8385 38.704 59.6813 39.0206 59.3669C39.6539 58.7376 39.6223 57.7179 38.989 57.0888L34.2344 52.3973V44.7302C34.2344 44.7302 37.2028 47.4998 37.6714 47.9465C38.1399 48.3932 38.5237 48.6445 39.0822 48.6445C39.0854 48.6445 39.0887 48.6445 39.0921 48.6445C39.9877 48.6445 40.7094 47.8705 40.704 46.9809L40.6379 41.8919L45.9101 47.1645V53.7986C45.9101 54.6884 46.6359 55.4094 47.5317 55.4094C48.4275 55.4094 49.1533 54.6884 49.1533 53.7986V50.3858L53.0591 54.2295C53.3758 54.5439 53.8087 54.7011 54.2238 54.7011C54.6387 54.7011 55.0627 54.5439 55.3795 54.2295C56.0128 53.6002 56.0173 52.5805 55.384 51.9514L51.6262 48.2147H54.8467C55.7425 48.2147 56.4684 47.4938 56.4684 46.604C56.4684 45.7142 55.7425 44.9933 54.8467 44.9933H48.3832L42.8173 39.4648L47.8031 39.2863C47.8208 39.2857 47.8381 39.2829 47.8556 39.2818C47.8621 39.2814 47.8686 39.2807 47.8751 39.2801C48.735 39.2116 49.3966 38.4835 49.3652 37.6187C49.3464 37.0981 49.0798 36.6456 48.6831 36.3651L45.6874 33.396H53.2193L57.8344 37.9803C58.1512 38.295 58.5661 38.4522 58.9812 38.4522C59.3961 38.4522 59.8113 38.295 60.1278 37.9805C60.7613 37.3515 60.7613 36.3316 60.128 35.7028L57.8059 33.3962H63.063C63.9587 33.3962 64.6846 32.6752 64.6846 31.7854C64.6846 30.8957 63.9587 30.1745 63.063 30.1745ZM43.8835 26.9494L40.8625 30.1745H36.6448L39.8885 26.9526L43.8835 26.9494ZM37.2705 20.571L37.3475 24.8668L34.2342 27.9411V23.4437L37.2705 20.571ZM27.9847 20.5884L30.991 23.4498V27.7891L27.9801 24.7807L27.9847 20.5884ZM21.4115 27.1557L25.6844 27.0028L28.8774 30.1745H24.4885L21.4115 27.1557ZM21.4945 36.3977L24.3062 33.396H28.8145L25.8219 36.3685L21.4945 36.3977ZM28.1144 43.2964L27.9298 38.7773L30.991 35.7189V40.3586L28.1144 43.2964ZM37.4022 43.2245L34.2342 40.3299V35.5666L37.3568 38.6504L37.4022 43.2245ZM43.9259 36.2016L39.685 36.3533L36.7077 33.396H41.0952L43.9259 36.2016Z"
          fill="#9AD3FF"
        />`;
        const size = Math.ceil(Math.random() * 32);
        el.setAttribute("width", size);
        el.setAttribute("height", size);
        el.style = `position: fixed; z-index:1; top: -64px; left: ${Math.floor(
          Math.random() * window.innerWidth
        )}px; opacity: 0.5; pointer-events: none;`;
        document.body.appendChild(el);
        return el;
      };
      createSnowflake();
      anime({
        targets: ".snowflake",
        translateY: window.innerHeight * 2,
        duration: 10000,
        easing: "easeInOutSine",
        scale: 4,
        loop: true,
        opacity: 1,
      });
    </script>
  </body>
</html>
로그인 후 복사

CDN에서 라이브러리를 가져왔지만 물론 패키지 관리자를 사용하여 추가할 수도 있습니다. npm과 animejs가 있지만 번들러가 필요합니다. HTML로 작동하도록 초대하세요.

브라우저에서 index.html을 열고 눈송이를 즐겨보세요.

Day Let is snow! ❄️

하지만 눈송이 하나로는 부족해요! 코드를 조정하여 몇 가지를 더 추가해 보겠습니다.

<script type="module">
      import anime from "https://esm.sh/animejs@3.2.2";
      const createSnowflake = () => {
        const el = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        el.setAttribute("viewBox", "0 0 65 64");
        el.classList.add("snowflake");
        el.innerHTML = `<path
          d="M63.063 30.1745H57.7427L60.1278 27.8056C60.7613 27.1766 60.7613 26.1567 60.128 25.5278C59.4947 24.8988 58.4679 24.8986 57.8348 25.5276L53.1561 30.1745H45.2926L48.7914 26.4393C49.4013 25.7881 49.3644 24.7691 48.7086 24.1628C48.4398 23.9145 48.1086 23.7758 47.7691 23.7416C47.5633 23.7315 43.1215 23.741 43.1215 23.741L48.3202 18.5772H54.8467C55.7425 18.5772 56.4684 17.8562 56.4684 16.9664C56.4684 16.0767 55.7425 15.3557 54.8467 15.3557H51.5633L55.3881 11.5565C56.0214 10.9272 56.0214 9.90753 55.3881 9.27827C54.7546 8.64943 53.6921 8.64943 53.0586 9.27827L49.1531 13.1221V9.7718C49.1531 8.88202 48.4273 8.16106 47.5315 8.16106C46.6357 8.16106 45.9099 8.88202 45.9099 9.7718V16.3438L40.5397 21.7138L40.45 16.8505C40.4498 16.8427 40.4575 16.8354 40.4573 16.8277C40.4498 16.436 40.3051 16.0457 40.0098 15.7412C39.3886 15.1008 38.328 15.0819 37.6831 15.6995L34.2342 18.9695V11.4055L38.8764 6.83016C39.5097 6.2009 39.5276 5.18119 38.8943 4.55215C38.2608 3.92331 37.2072 3.92331 36.5739 4.55215L34.2342 6.84927V1.61072C34.2342 0.720951 33.5084 -1.52588e-05 32.6126 -1.52588e-05C31.7168 -1.52588e-05 30.991 0.720951 30.991 1.61072V6.84949L28.7142 4.55236C28.0807 3.92353 27.0722 3.92353 26.4387 4.55236C25.8054 5.18162 25.7784 6.20133 26.4117 6.83037L30.991 11.4057V19.0129L27.4934 15.6894C26.8428 15.078 25.8351 15.1057 25.2188 15.7515C24.9864 15.9955 24.8549 16.2927 24.805 16.6009C24.7743 16.7261 24.7611 16.856 24.7615 16.9898L24.7425 21.5491L19.3155 16.192V9.7718C19.3155 8.88202 18.5897 8.16106 17.6939 8.16106C16.7981 8.16106 16.0722 8.88202 16.0722 9.7718V12.9705L12.3909 9.27827C11.7574 8.64943 10.749 8.64943 10.1155 9.27827C9.48219 9.90753 9.49127 10.9272 10.1246 11.5565L13.9585 15.3557H10.5224C9.62663 15.3557 8.90079 16.0767 8.90079 16.9664C8.90079 17.8562 9.62663 18.5772 10.5224 18.5772H17.2018L22.5518 23.8913L17.5665 24.0698C16.6971 24.1011 15.9397 24.8075 15.9313 25.6629C15.9304 25.687 15.8558 25.7112 15.8558 25.7353V25.7376L15.9304 25.7428C15.9401 26.1455 16.1369 26.5452 16.4482 26.8506L19.8733 30.1745H12.3657L7.68717 25.5274C7.05365 24.8986 6.02706 24.8986 5.39376 25.5274C4.76046 26.1567 4.76046 27.1764 5.39376 27.8054L7.77862 30.1743H2.30619C1.41041 30.1743 0.68457 30.8952 0.68457 31.785C0.68457 32.6748 1.41041 33.3957 2.30619 33.3957H7.71592L5.39376 35.7023C4.76046 36.3316 4.76046 37.3513 5.39376 37.9803C5.71052 38.2948 6.12565 38.452 6.54057 38.452C6.95549 38.452 7.37062 38.2948 7.68738 37.9803L12.3027 33.396H19.8761L16.5782 36.9168C15.9682 37.568 16.0052 38.587 16.661 39.1933C16.9732 39.482 17.3695 39.6248 17.765 39.6248C17.7724 39.6248 17.7797 39.6237 17.7873 39.6237C17.792 39.6237 17.7968 39.6244 17.8013 39.6244C17.8052 39.6244 17.8093 39.6244 17.8132 39.6244L22.5711 39.5975L17.1388 44.9933H10.5224C9.62663 44.9933 8.90079 45.7142 8.90079 46.604C8.90079 47.4938 9.62663 48.2147 10.5224 48.2147H13.8956L10.1337 51.9514C9.50035 52.5807 9.50035 53.6004 10.1337 54.2295C10.4504 54.5439 10.8655 54.7011 11.2805 54.7011C11.6954 54.7011 12.0744 54.5439 12.3912 54.2295L16.0722 50.5374V53.7986C16.0722 54.6884 16.7981 55.4094 17.6939 55.4094C18.5897 55.4094 19.3155 54.6884 19.3155 53.7986V47.316L24.8171 41.8871L25.0284 47.1252C25.0604 47.9942 25.7888 48.6943 26.6569 48.6769C26.9518 48.6711 27.2718 48.5771 27.5892 48.3455C27.8191 48.1778 30.9912 44.9497 30.9912 44.9497V52.5491L26.4569 57.0886C25.8234 57.7177 25.8415 58.7376 26.4746 59.3666C26.7914 59.6813 27.2152 59.8385 27.6303 59.8385C28.0452 59.8385 28.4288 59.6813 28.7453 59.3669L30.9912 57.1049V62.3892C30.9912 63.279 31.717 64 32.6128 64C33.5086 64 34.2344 63.279 34.2344 62.3892V56.9535L36.7001 59.3669C37.0169 59.6813 37.45 59.8385 37.8649 59.8385C38.2798 59.8385 38.704 59.6813 39.0206 59.3669C39.6539 58.7376 39.6223 57.7179 38.989 57.0888L34.2344 52.3973V44.7302C34.2344 44.7302 37.2028 47.4998 37.6714 47.9465C38.1399 48.3932 38.5237 48.6445 39.0822 48.6445C39.0854 48.6445 39.0887 48.6445 39.0921 48.6445C39.9877 48.6445 40.7094 47.8705 40.704 46.9809L40.6379 41.8919L45.9101 47.1645V53.7986C45.9101 54.6884 46.6359 55.4094 47.5317 55.4094C48.4275 55.4094 49.1533 54.6884 49.1533 53.7986V50.3858L53.0591 54.2295C53.3758 54.5439 53.8087 54.7011 54.2238 54.7011C54.6387 54.7011 55.0627 54.5439 55.3795 54.2295C56.0128 53.6002 56.0173 52.5805 55.384 51.9514L51.6262 48.2147H54.8467C55.7425 48.2147 56.4684 47.4938 56.4684 46.604C56.4684 45.7142 55.7425 44.9933 54.8467 44.9933H48.3832L42.8173 39.4648L47.8031 39.2863C47.8208 39.2857 47.8381 39.2829 47.8556 39.2818C47.8621 39.2814 47.8686 39.2807 47.8751 39.2801C48.735 39.2116 49.3966 38.4835 49.3652 37.6187C49.3464 37.0981 49.0798 36.6456 48.6831 36.3651L45.6874 33.396H53.2193L57.8344 37.9803C58.1512 38.295 58.5661 38.4522 58.9812 38.4522C59.3961 38.4522 59.8113 38.295 60.1278 37.9805C60.7613 37.3515 60.7613 36.3316 60.128 35.7028L57.8059 33.3962H63.063C63.9587 33.3962 64.6846 32.6752 64.6846 31.7854C64.6846 30.8957 63.9587 30.1745 63.063 30.1745ZM43.8835 26.9494L40.8625 30.1745H36.6448L39.8885 26.9526L43.8835 26.9494ZM37.2705 20.571L37.3475 24.8668L34.2342 27.9411V23.4437L37.2705 20.571ZM27.9847 20.5884L30.991 23.4498V27.7891L27.9801 24.7807L27.9847 20.5884ZM21.4115 27.1557L25.6844 27.0028L28.8774 30.1745H24.4885L21.4115 27.1557ZM21.4945 36.3977L24.3062 33.396H28.8145L25.8219 36.3685L21.4945 36.3977ZM28.1144 43.2964L27.9298 38.7773L30.991 35.7189V40.3586L28.1144 43.2964ZM37.4022 43.2245L34.2342 40.3299V35.5666L37.3568 38.6504L37.4022 43.2245ZM43.9259 36.2016L39.685 36.3533L36.7077 33.396H41.0952L43.9259 36.2016Z"
          fill="#9AD3FF"
        />`;
        const size = Math.ceil(Math.random() * 32);
        el.setAttribute("width", size);
        el.setAttribute("height", size);
        el.style = `position: fixed; z-index:1; top: -64px; left: ${Math.floor(
          Math.random() * window.innerWidth
        )}px; opacity: 0.5; pointer-events: none;`;
        document.body.appendChild(el);
        return el;
      };
      for (let i = 0; i < 10; i++) {
        createSnowflake();
      }
      anime({
        targets: ".snowflake",
        translateY: window.innerHeight * 2,
        duration: 10000,
        easing: "easeInOutSine",
        scale: 4,
        loop: true,
        delay: function (el, i, l) {
          return i * 1000;
        },
        opacity: 1,
      });
    </script>
로그인 후 복사

페이지를 새로고침하고 폭설을 즐겨보세요.

Day Let is snow! ❄️

거의 완벽하지만 아직은 아니신가요? 누락된 부분에 손가락을 대지 못하는 것 같나요? 어쩌면 약간의 회전이나 더 정교한 경로가 있을까요?

완벽하도록 여러분에게 맡기겠습니다. AnimeJS는 모든 것을 할 수 있으며 문서는 읽기에 매우 즐겁습니다. 주저하지 말고 여러분의 창작물을 공유해 주세요!

콘텐츠가 마음에 들었고 일년 내내 더 많은 콘텐츠를 갖고 싶으십니까?

Day Let is snow! ❄️

위 내용은 Day Let은 눈이다! ❄️의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：StayedCSS를 사용하여 Next.js에 CSS 적용 다음 기사：다른 형식의 JavaScript에서 문자열을 DateTime으로 변환하려면 어떻게 해야 합니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2238
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2378
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1988
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1875
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1947
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿