Animation on hero section

config/webpack.loaders.js

@@ -10,6 +10,7 @@ const html = {
         {
             loader: 'html-loader',
             options: {
+                attrs: ['div:data-src', 'img:src'],
                 interpolate: true,
                 removeComments: true,
             },

src/index.html

@@ -49,50 +49,15 @@
 </header>
 
 <section class="hero" id="hero">
-    <img src="./img/hero.svg" alt="Running man" class="hero-img d-none d-xl-block">
-
-    <div class="container">
-        <div class="row">
-            <div class="col-12 col-xl-5 text-center text-xl-start">
-                <div class="content">
-                    <h1 class="title">
-                        Many reasons to get up and start to get back in the business
-                    </h1>
-
-                    <p class="description">
-                        The harder you work for something, the greater you’ll feel when you achieve
-                        it.
-                    </p>
-
-                    <div class="actions">
-                        <a href="#" class="button button-ghost me-4">Sign in</a>
-                        <a href="#" class="button button-cta">Sign up</a>
-                    </div>
-
-                    <div class="video-banner text-start">
-                        <a href="#" class="preview">
-                            <img src="./img/play-icon.svg" alt="Play icon">
-                        </a>
-
-                        <div>
-                            <p class="description">
-                                The harder you work for something, the greater you’ll feel when you
-                                achieve it.
-                            </p>
-
-                            <a href="#" class="preview-button">
-                                Watch preview
-                            </a>
-                        </div>
-                    </div>
-                </div>
+    <div id="particle-slider" class="hero-img">
+        <div class="slides">
+            <div class="slide"
+                 data-src="./img/hero.svg">
             </div>
         </div>
-    </div>
-</section>
 
-<section class="hero" id="hero">
-    <img src="./img/hero.svg" alt="Running man" class="hero-img d-none d-xl-block">
+        <canvas class="draw"></canvas>
+    </div>
 
     <div class="container">
         <div class="row">
@@ -134,5 +99,6 @@ <h1 class="title">
     </div>
 </section>
 
+<script src="./js/particle.js"></script>
 </body>
 </html>

src/js/index.js

@@ -1,5 +1,18 @@
 document.addEventListener('DOMContentLoaded', function () {
     initMenuBurger();
+
+    if (window.matchMedia('(min-width: 768px)')) {
+        let ps = new ParticleSlider({
+            ptlGap: 0,
+            mouseForce: 100,
+            monochrome: false,
+            ptlSize: 0.5,
+        });
+
+        let ptl = new ps.Particle(ps);
+
+        ptl.ttl = 20;
+    }
 });
 
 document.addEventListener("scroll", () => {

src/styles/style.sass

@@ -82,7 +82,7 @@ h2
     width: 100%
     display: flex
     flex-direction: column
-    justify-content: start
+    justify-content: flex-start
     z-index: $z-1
 
     +screen-up(md)
@@ -208,6 +208,9 @@ h2
     min-height: 100vh
     padding: 5% 0 6%
 
+    & .content
+        z-index: $z-1
+
     & .title
         margin: 0 0 20px
 
@@ -224,12 +227,21 @@ h2
             margin: 0 0 60px
 
     &-img
+        display: none
         position: absolute
-        top: 55%
-        right: 10%
-        width: 40%
-        height: auto
-        transform: translateY(-50%)
+        right: 0
+
+        +screen-up(md)
+            display: block
+            width: 100%
+            height: 80vh
+            z-index: -1
+
+        +screen-up(xl)
+            display: block
+            width: 60%
+            height: 100vh
+            z-index: 0
 
 .video-banner
     display: flex
@@ -240,7 +252,7 @@ h2
         justify-content: center
 
     +screen-up(xl)
-        justify-content: start
+        justify-content: flex-start
 
     & .preview