Intégrer l'effect section slides de scrollMagic

**labarre2002** · 07/11/2022, 09h30

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 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
              <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>