Animation on hero section

mosiichuk · Mar 13, 2021 · a6419bb · a6419bb
1 parent 7878dbc
commit a6419bb
Show file tree

Hide file tree

Showing 9 changed files with 228 additions and 50 deletions.
diff --git a/config/webpack.loaders.js b/config/webpack.loaders.js
@@ -10,6 +10,7 @@ const html = {
         {
             loader: 'html-loader',
             options: {
+                attrs: ['div:data-src', 'img:src'],
                 interpolate: true,
                 removeComments: true,
             },

diff --git a/config/webpack.plugins.js b/config/webpack.plugins.js
@@ -10,6 +10,17 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const config = require('./site.config');
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
+const CopyPlugin = require('copy-webpack-plugin');
+
+const copyPlugin = new CopyPlugin({
+    patterns: [
+        {
+            from: 'js/particle.js',
+            to: 'js/particle.js',
+            toType: 'file'
+        },
+    ],
+});
 
 const optimizeCss = new CssMinimizerPlugin({
     minimizerOptions: {
@@ -70,6 +81,7 @@ const env = new webpack.DefinePlugin({
 });
 
 module.exports = [
+    config.isProduction && copyPlugin,
     clean,
     env,
     cssExtract,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
         "babel-loader": "^8.0.6",
         "bootstrap": "^5.0.0-beta2",
         "clean-webpack-plugin": "^3.0.0",
+        "copy-webpack-plugin": "^8.0.0",
         "cross-env": "^7.0.2",
         "css-loader": "^5.0.2",
         "css-minimizer-webpack-plugin": "^1.2.0",

diff --git a/src/app.js b/src/app.js
@@ -1,5 +1,5 @@
-import "bootstrap/dist/css/bootstrap-grid.min.css"
-import "bootstrap/dist/css/bootstrap-utilities.min.css"
+import "bootstrap/dist/css/bootstrap-grid.min.css";
+import "bootstrap/dist/css/bootstrap-utilities.min.css";
 
 import './js/index';
 import './styles/style.sass';
diff --git a/src/index.html b/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>
diff --git a/src/js/index.js b/src/js/index.js
@@ -1,5 +1,18 @@
 document.addEventListener('DOMContentLoaded', function () {
     initMenuBurger();
+
+    if (window.matchMedia('(min-width: 768px)')) {
+        const ps = new ParticleSlider({
+            ptlGap: 0,
+            mouseForce: 100,
+            monochrome: false,
+            ptlSize: 0.5,
+        });
+
+        const ptl = new ps.Particle(ps);
+
+        ptl.ttl = 20;
+    }
 });
 
 document.addEventListener("scroll", () => {