1- document . querySelectorAll ( '.button' ) . forEach ( button => {
2-
3- let duration = 3000 ,
4- svg = button . querySelector ( 'svg' ) ,
5- svgPath = new Proxy ( {
6- y : null ,
7- smoothing : null
8- } , {
9- set ( target , key , value ) {
10- target [ key ] = value ;
11- if ( target . y !== null && target . smoothing !== null ) {
12- svg . innerHTML = getPath ( target . y , target . smoothing , null ) ;
13- }
14- return true ;
15- } ,
16- get ( target , key ) {
17- return target [ key ] ;
18- }
19- } ) ;
20-
21- button . style . setProperty ( '--duration' , duration ) ;
22-
23- svgPath . y = 20 ;
24- svgPath . smoothing = 0 ;
25-
26- button . addEventListener ( 'click' , e => {
27-
28- e . preventDefault ( ) ;
29-
30- if ( ! button . classList . contains ( 'loading' ) ) {
31-
32- button . classList . add ( 'loading' ) ;
33-
34- gsap . to ( svgPath , {
35- smoothing : .3 ,
36- duration : duration * .065 / 1000
37- } ) ;
38-
39- gsap . to ( svgPath , {
40- y : 12 ,
41- duration : duration * .265 / 1000 ,
42- delay : duration * .065 / 1000 ,
43- ease : Elastic . easeOut . config ( 1.12 , .4 )
44- } ) ;
45-
46- setTimeout ( ( ) => {
47- svg . innerHTML = getPath ( 0 , 0 , [
48- [ 3 , 14 ] ,
49- [ 8 , 19 ] ,
50- [ 21 , 6 ]
51- ] ) ;
52- } , duration / 2 ) ;
53-
54- }
55-
56- } ) ;
57-
58- } ) ;
59-
60- function getPoint ( point , i , a , smoothing ) {
61- let cp = ( current , previous , next , reverse ) => {
62- let p = previous || current ,
63- n = next || current ,
64- o = {
65- length : Math . sqrt ( Math . pow ( n [ 0 ] - p [ 0 ] , 2 ) + Math . pow ( n [ 1 ] - p [ 1 ] , 2 ) ) ,
66- angle : Math . atan2 ( n [ 1 ] - p [ 1 ] , n [ 0 ] - p [ 0 ] )
67- } ,
68- angle = o . angle + ( reverse ? Math . PI : 0 ) ,
69- length = o . length * smoothing ;
70- return [ current [ 0 ] + Math . cos ( angle ) * length , current [ 1 ] + Math . sin ( angle ) * length ] ;
71- } ,
72- cps = cp ( a [ i - 1 ] , a [ i - 2 ] , point , false ) ,
73- cpe = cp ( point , a [ i - 1 ] , a [ i + 1 ] , true ) ;
74- return `C ${ cps [ 0 ] } ${ cps [ 1 ] } ${ cpe [ 0 ] } ${ cpe [ 1 ] } ${ point [ 0 ] } ${ point [ 1 ] } ;
75- }
76-
77- function getPath ( update , smoothing , pointsNew ) {
78- let points = pointsNew ? pointsNew : [
79- [ 4 , 12 ] ,
80- [ 12 , update ] ,
81- [ 20 , 12 ]
82- ] ,
83- d = points . reduce ( ( acc , point , i , a ) => i === 0 ? `M ${ point [ 0 ] } ${ point [ 1 ] } : `${ acc } ${ getPoint ( point , i , a , smoothing ) } , '' ) ;
84- return `<path d="${ d } ;
85- }
1+ $ ( '#parallax' ) . parallax ( {
2+ invertX : true ,
3+ invertY : true ,
4+ scalarX : 15 ,
5+ frictionY : .1
6+ } ) ;
7+
8+
9+ particlesJS ( "particles-js" , {
10+ "particles" : {
11+ "number" : {
12+ "value" : 120 ,
13+ "density" : {
14+ "enable" : true ,
15+ "value_area" : 800
16+ }
17+ } ,
18+ "color" : {
19+ "value" : "#ffffff"
20+ } ,
21+ "shape" : {
22+ "type" : "circle" ,
23+ "stroke" : {
24+ "width" : 0 ,
25+ "color" : "#000000"
26+ } ,
27+ "polygon" : {
28+ "nb_sides" : 5
29+ } ,
30+ "image" : {
31+ "src" : "img/github.svg" ,
32+ "width" : 100 ,
33+ "height" : 100
34+ }
35+ } ,
36+ "opacity" : {
37+ "value" : 0.5 ,
38+ "random" : false ,
39+ "anim" : {
40+ "enable" : false ,
41+ "speed" : 1 ,
42+ "opacity_min" : 0.1 ,
43+ "sync" : false
44+ }
45+ } ,
46+ "size" : {
47+ "value" : 3 ,
48+ "random" : true ,
49+ "anim" : {
50+ "enable" : false ,
51+ "speed" : 40 ,
52+ "size_min" : 0.1 ,
53+ "sync" : false
54+ }
55+ } ,
56+ "line_linked" : {
57+ "enable" : true ,
58+ "distance" : 150 ,
59+ "color" : "#ffffff" ,
60+ "opacity" : 0.4 ,
61+ "width" : 1
62+ } ,
63+ "move" : {
64+ "enable" : true ,
65+ "speed" : 6 ,
66+ "direction" : "none" ,
67+ "random" : false ,
68+ "straight" : false ,
69+ "out_mode" : "out" ,
70+ "bounce" : false ,
71+ "attract" : {
72+ "enable" : false ,
73+ "rotateX" : 600 ,
74+ "rotateY" : 1200
75+ }
76+ }
77+ } ,
78+ "interactivity" : {
79+ "detect_on" : "canvas" ,
80+ "events" : {
81+ "onhover" : {
82+ "enable" : true ,
83+ "mode" : "grab"
84+ } ,
85+ "onclick" : {
86+ "enable" : true ,
87+ "mode" : "push"
88+ } ,
89+ "resize" : true
90+ } ,
91+ "modes" : {
92+ "grab" : {
93+ "distance" : 140 ,
94+ "line_linked" : {
95+ "opacity" : 1
96+ }
97+ } ,
98+ "bubble" : {
99+ "distance" : 400 ,
100+ "size" : 40 ,
101+ "duration" : 2 ,
102+ "opacity" : 8 ,
103+ "speed" : 3
104+ } ,
105+ "repulse" : {
106+ "distance" : 200 ,
107+ "duration" : 0.4
108+ } ,
109+ "push" : {
110+ "particles_nb" : 4
111+ } ,
112+ "remove" : {
113+ "particles_nb" : 2
114+ }
115+ }
116+ } ,
117+ "retina_detect" : true
118+ } ) ;
119+
120+
0 commit comments