https://hadreeen.com/frontend/assets/js/pages/mobile.js

1/*
2    js of interior
3    --------------------------
4    ** hide blur from text
5    --------------------------
6    ** animation for Mobile
7    --------------------------
8    ** animation for Mobile
9    --------------------------
10    ** Particles
11    --------------------------
12*/
13
14(function ($) {
15  "use strict";
16
17    jQuery(document).on('ready', function(){
18
19      // ScrollMagic
20      $(function() {
21        /*-----------------------------
22        hide blur from text
23      -----------------------------*/
24        // build scene
25        var scene = new ScrollMagic.Scene({
26            triggerElement: "#triggerBlur",
27          })
28          // trigger animation by adding a css class
29          .setClassToggle("#Statistic", "animetext")
30          .addIndicators({
31            name: "1 - add a class",
32          }) // add indicators (requires plugin)
33          .addTo(controller);
34
35        /*-----------------------------
36        animation for Mobile
37      -----------------------------*/
38        // build tween
39        var tween = TweenMax.fromTo(
40          "#animate2",
41          3, {
42            top: 90,
43          }, {
44            top: -280,
45            repeat: -1,
46            yoyo: true,
47            ease: Circ.easeInOut,
48          }
49        );
50
51        // build scene
52        var scene = new ScrollMagic.Scene({
53            triggerElement: "#trigger2",
54            duration: 300,
55            offset: 100,
56          })
57          .setTween(tween)
58          .addIndicators({
59            name: "loop",
60          }) // add indicators (requires plugin)
61          .addTo(controller);
62
63        /*-----------------------------
64        animation for Mobile
65      -----------------------------*/
66        // build tween
67        var tween = TweenMax.fromTo(
68          "#animate3",
69          3, {
70            top: 90,
71          }, {
72            top: -280,
73            repeat: -1,
74            yoyo: true,
75            ease: Circ.easeInOut,
76          }
77        );
78
79        // build scene
80        var scene = new ScrollMagic.Scene({
81            triggerElement: "#trigger3",
82            duration: 300,
83            offset: 100,
84          })
85
86          .setTween(tween)
87          .addIndicators({
88            name: "loop",
89          }) // add indicators (requires plugin)
90          .addTo(controller);
91      });
92
93      /*-----------------------------
94      Particles
95      -----------------------------*/
96      particlesJS("particles-js", {
97        particles: {
98          number: {
99            value: 8,
100            density: {
101              enable: true,
102              value_area: 800,
103            },
104          },
105          color: {
106            value: ["#165DF5", "#19A389", "#F28E1C", "#F93542"],
107          },
108          shape: {
109            type: ["circle"],
110            stroke: {
111              width: 0,
112              color: "#000000",
113            },
114            polygon: {
115              nb_sides: 5,
116            },
117          },
118          opacity: {
119            value: 1,
120            random: true,
121            anim: {
122              enable: false,
123              speed: 1,
124              opacity_min: 0.6,
125              sync: false,
126            },
127          },
128          size: {
129            value: 8,
130            random: true,
131            anim: {
132              enable: false,
133              speed: 40,
134              size_min: 0.3,
135              sync: false,
136            },
137          },
138          line_linked: {
139            enable: false,
140            distance: 500,
141            color: "#ffffff",
142            opacity: 1,
143            width: 2,
144          },
145          move: {
146            enable: false,
147            speed: 0.5,
148            direction: "none",
149            random: false,
150            straight: false,
151            out_mode: "out",
152            bounce: false,
153            attract: {
154              enable: false,
155              rotateX: 600,
156              rotateY: 1200,
157            },
158          },
159        },
160      });
161
162    });
163
164  }(jQuery));