Оставьте след перекрывающихся изображений с ScrollMagic - PullRequest
Новая
       50

Оставьте след перекрывающихся изображений с ScrollMagic

0 голосов
/ 06 февраля 2020

Я пытаюсь показать слои экрана телефона при прокрутке.

По сути, у меня есть 5 наложенных изображений, и я хочу, чтобы они оставались позади "слой за слоем". Таким образом, исходное состояние будет иметь все слои, и при прокрутке вниз слой останется позади et c. При прокрутке назад все слои снова объединяются.

Идея состоит в том, что каждый слой обсуждается в определенном разделе c.

Вот фотография всех слоев в исходном состоянии.

Я дошел до этого, но я изо всех сил пытаюсь показать слои в правильном сечении. ,

https://codepen.io/luciadaly/pen/XWbWaBX

$(document).ready(function() {

  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
      triggerElement: "#trigger1",
      duration: 950
    })
    .setPin("#pin1")
    .addIndicators({
      name: "1 (duration: 800)"
    });


  var sceneTwo = new ScrollMagic.Scene({
      triggerElement: "#trigger1",
      duration: 200
    })
    .setPin("#pin2")
    .addIndicators({
      name: "2 (duration: 300)"
    });

  controller.addScene([
    scene,
    sceneTwo
  ])
});
/* Just for formatting purposes */

header,
footer {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

p {
  padding: 20px;
}

h3 {
  padding-left: 20px;
}


/* Images  */

.phone-img {
  width: 50%;
}


/* ----------------- Image 1 ----------------- */

.image-1 {
  position: absolute;
  top: 0px;
  left: 120px;
}


/* ----------------- Image 2 ----------------- */

.image-2 {
  position: absolute;
  top: -60px;
  left: 115px;
}


/* ----------------- Image 3 ----------------- */

.image-3 {
  position: absolute;
  top: -40px;
  left: 115px;
}


/* ----------------- Image 4 ----------------- */

.image-4 {
  position: absolute;
  top: -20px;
  left: 115px;
}


/* ----------------- Image 5----------------- */

.image-5 {
  position: absolute;
  top: 0px;
  left: 115px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link href="css/scrollanimation.css" rel="stylesheet">
</head>

<body>

  <header>
    <h1>This is a Header.</h1>
  </header>

  <section class="sceneContainer">
    <div class="container-fluid">
      <div class="row space">
        <!-- Left Column -->
        <div class="col-md-5 space column">
          <div class="row" id="trigger1">
            <!-- Paragraph 1-->
            <div class="col-md-12 s1">
              <h3>Section 1</h3>
              <p>Proin faucibus eget nisl vitae consequat. Sed nec placerat orci. Nullam et facilisis turpis, eget tincidunt tellus. Curabitur posuere nisl at ligula hendrerit iaculis ac eget dui. Duis pulvinar, nisl quis ornare condimentum, libero enim
                fermentum urna, in porta urna nulla et magna. Donec velit urna, fringilla vitae fringilla sit amet, pulvinar quis ipsum. Mauris vestibulum dui ipsum, bibendum eleifend sem dignissim ut. Nulla congue lacus libero, sed sagittis dolor tempus
                eget. Vivamus aliquam purus ac dui pellentesque consectetur. Donec sodales diam in orci finibus, ut sollicitudin lacus bibendum. Nullam at tellus ultrices, varius nisl non, imperdiet ante. Nunc rutrum neque eu augue dapibus volutpat at
                eget ex. Praesent non tellus pharetra ligula fringilla porttitor.</p>
            </div>
          </div>

          <div class="row" id="trigger2">
            <!-- Paragraph 2-->
            <div class="col-md-12 s2">
              <h3>Section 2</h3>
              <p>Proin faucibus eget nisl vitae consequat. Sed nec placerat orci. Nullam et facilisis turpis, eget tincidunt tellus. Curabitur posuere nisl at ligula hendrerit iaculis ac eget dui. Duis pulvinar, nisl quis ornare condimentum, libero enim
                fermentum urna, in porta urna nulla et magna. Donec velit urna, fringilla vitae fringilla sit amet, pulvinar quis ipsum. Mauris vestibulum dui ipsum, bibendum eleifend sem dignissim ut. Nulla congue lacus libero, sed sagittis dolor tempus
                eget. Vivamus aliquam purus ac dui pellentesque consectetur. Donec sodales diam in orci finibus, ut sollicitudin lacus bibendum. Nullam at tellus ultrices, varius nisl non, imperdiet ante. Nunc rutrum neque eu augue dapibus volutpat at
                eget ex. Praesent non tellus pharetra ligula fringilla porttitor.</p>
            </div>
          </div>

          <div class="row">
            <!-- Paragraph 3-->
            <div class="col-md-12 s3">
              <h3>Section 3</h3>
              <p>Proin faucibus eget nisl vitae consequat. Sed nec placerat orci. Nullam et facilisis turpis, eget tincidunt tellus. Curabitur posuere nisl at ligula hendrerit iaculis ac eget dui. Duis pulvinar, nisl quis ornare condimentum, libero enim
                fermentum urna, in porta urna nulla et magna. Donec velit urna, fringilla vitae fringilla sit amet, pulvinar quis ipsum. Mauris vestibulum dui ipsum, bibendum eleifend sem dignissim ut. Nulla congue lacus libero, sed sagittis dolor tempus
                eget. Vivamus aliquam purus ac dui pellentesque consectetur. Donec sodales diam in orci finibus, ut sollicitudin lacus bibendum. Nullam at tellus ultrices, varius nisl non, imperdiet ante. Nunc rutrum neque eu augue dapibus volutpat at
                eget ex. Praesent non tellus pharetra ligula fringilla porttitor.</p>
            </div>
          </div>

          <div class="row">
            <!-- Paragraph 4-->
            <div class="col-md-12 s4">
              <h3>Section 4</h3>
              <p>Proin faucibus eget nisl vitae consequat. Sed nec placerat orci. Nullam et facilisis turpis, eget tincidunt tellus. Curabitur posuere nisl at ligula hendrerit iaculis ac eget dui. Duis pulvinar, nisl quis ornare condimentum, libero enim
                fermentum urna, in porta urna nulla et magna. Donec velit urna, fringilla vitae fringilla sit amet, pulvinar quis ipsum. Mauris vestibulum dui ipsum, bibendum eleifend sem dignissim ut. Nulla congue lacus libero, sed sagittis dolor tempus
                eget. Vivamus aliquam purus ac dui pellentesque consectetur. Donec sodales diam in orci finibus, ut sollicitudin lacus bibendum. Nullam at tellus ultrices, varius nisl non, imperdiet ante. Nunc rutrum neque eu augue dapibus volutpat at
                eget ex. Praesent non tellus pharetra ligula fringilla porttitor.</p>
            </div>
          </div>
        </div>

        <!-- Right Column -->
        <div class="col-md-5 space column">

          <div class="row" id="pin1">
            <div class="col-xs-12">
              <img class="phone-img image-1" src="images/1.png" />
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12">
              <img class="phone-img image-5" src="images/5.png" />
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12">

            </div>
          </div>

          <div class="row">
            <div class="col-xs-12">

            </div>
          </div>

          <div class="row">
            <div class="col-xs-12">

            </div>
          </div>


          <img class="phone-img image-4" src="images/4.png" />
          <img class="phone-img image-3" src="images/3.png" />
          <img class="phone-img image-2" src="images/2.png" />
        </div>
      </div>
    </div>
  </section>

  <footer>
    This is a footer
  </footer>

  <!-- ScrollMagic.js  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js" integrity="sha256-ZTEnMVwBY082yM/d9tFkglZux9pVgwfOAg6HD4reObU=" crossorigin="anonymous"></script>

  <!-- addIndicators.js  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js" integrity="sha256-31FC/OT6XpfjAhj9FuXjw5/wPXXawCAjJQ29E23/XPk=" crossorigin="anonymous"></script>

  <!-- TweenLite.min.js  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js" integrity="sha256-VfpswwlYKouVmlpnJW0MszMzLm9lH2yfB6ty3d1WsB4=" crossorigin="anonymous"></script>

  <!-- TimelineLite.min.js  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineLite.min.js" integrity="sha256-5HW1hilN77unDg9wwY2mmXL1G8/hBMrYOgiB+BqsxNg=" crossorigin="anonymous"></script>

  <!-- CSSPlugin.min.js  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js" integrity="sha256-UJt5JHwfrhok9SvTqbi6rRw2ajY0ugeYsIT2pioVDJY=" crossorigin="anonymous"></script>

  <!-- Animation.gsap.min.js  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js" integrity="sha256-peenofh8a9TIqKdPKIeQE7mJvuwh+J0To7nslvpj1jI=" crossorigin="anonymous"></script>

  <!-- JQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

  <!-- Local Js file -->
  <script src="js/app.js"></script>
</body>

</html>
...