leclerc/script.js at master · johnakers/leclerc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// removes un-needed slides
const MOBILE_WIDTH = window.matchMedia("(max-width: 500px");
if (MOBILE_WIDTH.matches) {
  document.querySelector('.desktop').remove();
} else {
  document.querySelector('.mobile').remove();
}

// constants
const IMAGE_COUNT = document.querySelectorAll('.slide').length;

// increments
var IMAGE_INDEX = 0;

function fadeOut(element) {
  let initialOpacity = 1;

  var fadeOutTimer = setInterval(function () {
    if (initialOpacity <= 0.0) {
      clearInterval(fadeOutTimer);
    }

    element.style.opacity = initialOpacity;
    initialOpacity -= 0.01;
  }, 20)
}

function fadeIn(element) {
  let initialOpacity = 0.0;
  var fadeInTimer = setInterval(function () {
    if (initialOpacity >= 1) {
      clearInterval(fadeInTimer);
    }

    element.style.opacity = initialOpacity;
    initialOpacity += 0.01;
  }, 20);
}

function currentSlide() {
  return document.querySelectorAll('.slide')[currentIndex()];
}

function nextSlide() {
  return document.querySelectorAll('.slide')[nextIndex()];
}

function currentIndex() {
  return IMAGE_INDEX % IMAGE_COUNT;
}

function nextIndex() {
  return (IMAGE_INDEX + 1) % IMAGE_COUNT;
}

// holds image for 5 seconds, fades out, fades in new image
setInterval(function() {
  fadeOut(currentSlide());
  fadeIn(nextSlide());
  IMAGE_INDEX++;
}, 5000)