feat(Home): Add background and particles to home page. Closes #138

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 * [#120](https://github.com/antoinezanardi/werewolves-assistant-web/issues/120) - Back to top on About page.
 * [#137](https://github.com/antoinezanardi/werewolves-assistant-web/issues/137) - Add some links to log in modal.
+* [#138](https://github.com/antoinezanardi/werewolves-assistant-web/issues/138) - Add background and particles to home page.
 
 ### 🐛 Bug fixes
 
@@ -17,6 +18,7 @@
 
 ### 📦 Packages
 
+* `particles.vue` installed with version `2.1.12`.
 * `vue-backtotop` installed with version `1.6.1`.
 * `@sentry/browser` updated to version `6.1.0`.
 * `@sentry/integrations` updated to version `6.1.0`.

package.json

@@ -25,6 +25,7 @@
         "jquery": "^3.5.1",
         "jsonwebtoken": "^8.5.1",
         "node-sass": "^5.0.0",
+        "particles.vue": "^2.1.12",
         "popper.js": "^1.16.1",
         "prerender-spa-plugin": "^3.4.0",
         "qs": "^6.9.6",

src/assets/json/home-particles-options.json

@@ -0,0 +1,32 @@
+{
+    "fpsLimit": 60,
+    "particles": {
+        "number": { "value": 75, "density": { "enable": true, "value_area": 800 } },
+        "color": { "value": "#caf6c0" },
+        "shape": {
+            "type": "circle",
+            "stroke": { "width": 0, "color": "#000000" }
+        },
+        "opacity": {
+            "value": 0.4,
+            "random": true,
+            "anim": { "enable": true, "speed": 1, "opacity_min": 0, "sync": false }
+        },
+        "size": {
+            "value": 2,
+            "random": true,
+            "anim": { "enable": false, "speed": 4, "size_min": 0.3, "sync": false }
+        },
+        "move": {
+            "enable": true,
+            "speed": 1,
+            "direction": "none",
+            "random": true,
+            "straight": false,
+            "out_mode": "out",
+            "bounce": false,
+            "attract": { "enable": false, "rotateX": 600, "rotateY": 600 }
+        }
+    },
+    "retina_detect": true
+}

src/components/Home/Home.vue

@@ -1,6 +1,7 @@
 <template>
     <div id="home" class="container-fluid d-flex flex-column">
         <div id="home-content" class="flex-column flex-grow-1 d-flex justify-content-center">
+            <Particles id="home-particles" :options="particles.options"/>
             <div class="row">
                 <div class="col-12 text-center">
                     <img id="home-logo" src="../../assets/img/wolf.png" alt="Wolf"/>
@@ -18,7 +19,7 @@
                     </h1>
                     <h4 id="subtitle" class="text-center">
                         <i class="fa fa-star mr-2 text-warning"/>
-                        <span class="text-secondary" v-html="$t('Home.bestToolForGameMastering')"/>
+                        <span class="text-gray" v-html="$t('Home.bestToolForGameMastering')"/>
                     </h4>
                 </div>
             </div>
@@ -86,10 +87,14 @@
 <script>
 import { mapGetters, mapActions } from "vuex";
 import AccountModal from "./AccountModal/AccountModal";
+import homeParticleOptions from "@/assets/json/home-particles-options.json";
 
 export default {
     name: "Home",
     components: { AccountModal },
+    data() {
+        return { particles: { options: homeParticleOptions } };
+    },
     computed: {
         ...mapGetters("user", { isUserLogged: "isLogged" }),
         aboutPageVisited() {
@@ -171,7 +176,7 @@ export default {
             font-size: 3rem;
         }
         position: relative;
-
+        text-shadow: 1px 1px 3px black;
         #title-wrapper {
             position: relative;
         }
@@ -182,6 +187,7 @@ export default {
         @include media-breakpoint-up(md) {
             font-size: 1.2rem;
         }
+        text-shadow: 1px 1px 3px black;
     }
 
     #version {
@@ -201,4 +207,21 @@ export default {
             width: 150px;
         }
     }
+
+    #home-particles {
+         position: absolute;
+         top: 0;
+         left: 0;
+         width: 100%;
+         height: 100%;
+    }
+
+    #home {
+        background: url("https://images6.alphacoders.com/559/559873.jpg") no-repeat
+        center center fixed;
+        -webkit-background-size: cover;
+        -moz-background-size: cover;
+        -o-background-size: cover;
+        background-size: cover;
+    }
 </style>

src/plugins/index.js

@@ -14,6 +14,7 @@ import i18n from "./vue-i18n";
 import "./vue-js-toggle-button";
 import "./vue-keypress";
 import "./vue-lazyload";
+import "./vue-particles";
 import "./vue-roller";
 import "./vue-scrollto";
 import "./vue-select";

src/plugins/vue-particles/index.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import Particles from "particles.vue";
+
+Vue.use(Particles);