https://www.endangeredlabs.io/main.js

1/* global ScrollReveal */
2/* global $ */
3window.onload = function(){
4
5  // ##############################################################
6  // Countdown
7  // ##############################################################
8  // la date cible du décompte (année, mois, jour, heure, minute, seconde)
9  var target_date = new Date(Date.UTC(2023, 0, 12, 23, 0, 0)).getTime();
10
11  // obtient la référence aux éléments HTML où le décompte doit être affiché
12  var daysEl = $(".js-d");
13  var hoursEl = $(".js-h");
14  var minutesEl = $(".js-m");
15  var secondsEl = $(".js-s");
16
17  var countdown = function() {
18
19    // obtient la date et l'heure actuelles
20    var now = new Date;
21    var current_date = Date.UTC(now.getFullYear(),now.getMonth(), now.getDate() ,
22      now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
23
24    // trouve la différence entre la date actuelle et la date cible
25    var difference = target_date - current_date;
26
27    // calcule les jours, heures, minutes et secondes restants
28    var days = Math.floor(difference / (1000 * 60 * 60 * 24));
29    var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
30    var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
31    var seconds = Math.floor((difference % (1000 * 60)) / 1000);
32
33    // formate les chiffres avec un préfixe "0" si nécessaire
34    days = ("0" + days).slice(-2);
35    hours = ("0" + hours).slice(-2);
36    minutes = ("0" + minutes).slice(-2);
37    seconds = ("0" + seconds).slice(-2);
38
39    // affiche le résultat dans les éléments HTML
40    daysEl.html(days);
41    hoursEl.html(hours);
42    minutesEl.html(minutes);
43    secondsEl.html(seconds);
44
45  };
46  countdown()
47  setInterval(countdown, 1000)
48
49  // ##############################################################
50  // FAQ
51  // ##############################################################
52  $('.answer').hide();
53  $('.item-content').click(function() {
54    $(this).children('.answer').slideToggle();
55  });
56
57  // ##############################################################
58  // Menu Toggle
59  // ##############################################################
60  $( ".btn-burger" ).click(function() {
61    $( this ).toggleClass( "open" );
62    $(".menu").toggleClass( "open" );
63  });
64
65  // ##############################################################
66  // DropDown Toggle
67  // ##############################################################
68  $( ".dropdown-toggle" ).click(function() {
69    $( this ).parent().toggleClass( "open" );
70  });
71
72  // ##############################################################
73  // Narrative pagination Toggle
74  // ##############################################################
75  $( ".narrative-pagination-page" ).click(function() {
76    $( ".narrative-pagination-page" ).removeClass( "active" );
77    $( this ).toggleClass( "active" );
78  });
79
80
81  // ##############################################################
82  // Scroll Reveal
83  // ##############################################################
84  window.runScrollReveal = () => {
85    ScrollReveal().reveal('.load-hidden', { distance: '-30px', interval: 50 });
86
87    ScrollReveal().reveal('.load-hidden-bigBtn', { distance: '250px', origin: 'right', interval: 50 });
88
89    ScrollReveal().reveal('.load-hidden-header-text', { opacity: '0', duration: 4000 });
90
91    ScrollReveal().reveal('.load-hidden-constro', { opacity: '0', duration: 500 });
92  }
93
94
95  // ##############################################################
96  // Reveal Title matrix
97  // ##############################################################
98  var Messenger = function(el){
99    'use strict';
100    var m = this;
101
102    m.init = function(){
103      m.codeletters = "&#*+%?£@§$";
104      m.message = 0;
105      m.current_length = 0;
106      m.fadeBuffer = false;
107      m.messages = [
108        $(el).html()
109      ];
110
111      setTimeout(m.animateIn, 100);
112    };
113
114    m.generateRandomString = function(length){
115      var random_text = '';
116      while(random_text.length < length){
117        random_text += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
118      }
119
120      return random_text;
121    };
122
123    m.animateIn = function(){
124      if(m.current_length < m.messages[m.message].length){
125        m.current_length = m.current_length + 2;
126        if(m.current_length > m.messages[m.message].length) {
127          m.current_length = m.messages[m.message].length;
128        }
129
130        var message = m.generateRandomString(m.current_length);
131        $(el).html(message);
132
133        setTimeout(m.animateIn, 20);
134      } else {
135        setTimeout(m.animateFadeBuffer, 20);
136      }
137    };
138
139    m.animateFadeBuffer = function(){
140      if(m.fadeBuffer === false){
141        m.fadeBuffer = [];
142        for(var i = 0; i < m.messages[m.message].length; i++){
143          m.fadeBuffer.push({ c: (Math.floor(Math.random()*12))+1, l: m.messages[m.message].charAt(i) });
144        }
145      }
146
147      var do_cycles = false;

148      var message = '';
149
150      for(var i = 0; i < m.fadeBuffer.length; i++){
151        var fader = m.fadeBuffer[i];
152        if(fader.c > 0){
153          do_cycles = true;
154          fader.c--;
155          message += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
156        } else {
157          message += fader.l;
158        }
159      }
160
161      $(el).html(message);
162
163      if(do_cycles === true){
164        setTimeout(m.animateFadeBuffer, 50);
165      } else {
166        setTimeout(m.cycleText, 2000);
167      }
168    };
169
170
171
172    m.init();
173  }
174
175  // console.clear();
176
177  let loadedTitle = []
178  window.addEventListener('scroll', function() {
179
180    const h2 = document.querySelectorAll("h2");
181    for (const title of [ ...h2 ]) {
182      const position = title.getBoundingClientRect()
183
184      // checking for partial visibility
185      if(position.top < window.innerHeight && position.bottom >= 0 && !loadedTitle.includes(title.id)) {
186        if(!title.id){
187          continue
188        }
189        new Messenger(`#${title.id}`);
190        loadedTitle.push(title.id)
191      }
192    }
193  });
194
195}