Day Let is snow! ❄️-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Day Let is snow! ❄️

Linda Hamilton

Dec 19, 2024 am 07:05 AM

I like intricacies of snowflakes. Oh how they gracefully fall swirling and dancing! Let's make it snow today with AnimeJS!

This library, as the name suggests, allows you to animate pretty much anything: from css values and dom properties to variables.

Let's create a simple html file, e.g. 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>

Copy after login

I've imported the library from a CDN, but you can of course add it with a package manager, e.g. npm i animejs, but you'll need a bundler, e.g. Vite to make it work with html.

Open index.html in your browser and enjoy a snowflake:

Day Let is snow! ❄️

But one snowflake is not enough! Let's add some more byt adjusting the code:

<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>

Copy after login

Reload the page and enjoy a snowfall:

Day Let is snow! ❄️

Almost perfect, but not quite yet? Can't seem to put a finger on what's missing? Maybe some rotation or a more sophisticated path?

I'll leave it to you to perfect, AnimeJS can do it all and the documentation is quite enjoayble to read. Don't hesitate to share your creations!

Liked the content and would love to have more of it all year long?

Day Let is snow! ❄️

The above is the detailed content of Day Let is snow! ❄️. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Will R.E.P.O. Have Crossplay?

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7555

CakePHP Tutorial

1384

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

See all articles