Superposition de div en javascript

**Barsala** · 27/12/2017, 12h40

Bonjour a tous ,

Voici mon soucis je souhaite faire défiler mes pages au scroll.

Je réussis tout va bien ( grâce a la généreuse contribution de LCaba) . Le problème c'est que je souhaite faire une boucle ( la dernière page mène a la première) et au moment ou ça reprends l'animation ne tourne plus du tout.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
 
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        body {
            background-color: forestgreen;
        }
         
        #bloca {
            position: absolute;
            top: 0%;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: black;
            display: block;
            margin: auto;
            z-index: 2;
        }
         
        #blocb {
            position: absolute;
            top: 0;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: lightgoldenrodyellow;
            display: block;
            margin: auto;
            z-index: 1;
        }
         
        #blocc {
            top: 0%;
            position: absolute;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: lightcoral;
            display: block;
            margin: auto;
            z-index: 0;
        }
         
        #containder {
            border: 5px solid black;
            margin: 0px;
        }
         
        .slider {
            -webkit-animation-name: slider;
            -webkit-animation-duration: 1.5s;
            animation-name: slider;
            animation-duration: 3.5s;
        }
         
        @keyframes slider {
            0% {
                top: 1000px;
            }
            100% {
                top: 0;
            }
        }
    </style>
</head>
 
<body>
    <a id="containder">
        <div id="bloca"></div>
        <div id="blocb"></div>
        <div id="blocc"></div>
    </a>
    <SCRIPT>
        var fdelta = 0;
        var ind = 0;
        var fin = 0;
        var blocks = document.getElementsByTagName("div");
        for (i = 0; i < blocks.length; i++) {
            blocks[i].addEventListener('mousewheel', function () {
                clic()
            }, false);
        }
var topa=window.getComputedStyle(blocks[0],null).getPropertyValue("top");
 
        function clic() {
            var depart = Date.now();
            for (i = 0; i < blocks.length; i++) {
                blocks[i].style.top = "0";
            }
            if ((depart > 1000 + fin) && (Math.abs(event.deltaY) > fdelta)) {
                ind = ind + 1;
                if (ind > (blocks.length - 1)) {
                    blocks[0].style.zIndex = "2";
                    blocks[1].style.zIndex = "0";
                    blocks[2].style.zIndex = "1";
                    ind = 0;
                }
                blocks[ind].style.zIndex = "3";
                blocks[ind].classList.add("slider");
                            alert(topa);
 
                fin = depart;
            }
            fdelta = Math.abs(event.deltaY);
        }
    </SCRIPT>
</body>
 
</html>

D’où peut provenir le soucis sachant que le ' premier tour marche très bien"

Et joyeux Noël a tous et bonne année !

**Barsala** · 28/12/2017, 13h59

Voici le lien pour voir le code en direct !
https://jsfiddle.net/Barsala/2rxcatd...rjs=SQ1am89EgD

Superposition de div en javascript

JavaScript

Discussions similaires

Partager

Partager