Intégrer l'effect section slides de scrollMagic
Bonjour
je voudrais appliquer l'effet section slides(manual) de scrollMagic sur une page
j'ai donc inséré le code minimal fournit dans le fichier de scroolMagic
Code:
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
| <style type="text/css">
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
#slideContainer {
width: 400%; /* to contain 4 panels, each with 100% of window width */
height: 100%;
}
.panel {
height: 100%;
width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
float: left;
}
</style>
</head>
<body>
<div id="pinContainer">
<div id="slideContainer">
<section class="panel blue">
<b>ONE</b>
</section>
<section class="panel turqoise">
<b>TWO</b>
</section>
<section class="panel green">
<b>THREE</b>
</section>
<section class="panel bordeaux">
<b>FOUR</b>
</section>
</div>
</div>
<script>
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideContainer", 0.5, {z: -150}) // move back in 3D space
.to("#slideContainer", 1, {x: "-25%"}) // move in to first panel
.to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space
// animate to third panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-50%"})
.to("#slideContainer", 0.5, {z: 0})
// animate to forth panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-75%"})
.to("#slideContainer", 0.5, {z: 0});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "500%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</body> |
Ma page est vierge même le css n est pas pris en compte .Pourrais-je avoir des pistes pour résoudre mon problème ?
Merci.
