横スクロールセクション

Tutorials of (横スクロールセクション) by Wicked pizza

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>横スクロールセクション</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="wrapper">
  <section name="1">
    section 1
  </section>

  <div class="fixed" id="container">
    <section name="2">
      <div id="pin-inner">
        <div class="content-inner">
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
        </div>
      </div>
    </section>
  </div>

  <section name="3">
    section 3
  </section>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */

body {
  margin: 0;
}
section[name="1"] {
  height: 600px;
  background-color: #eee;
}

.fixed {
  position: absolute;
  width: auto;
  height: 80%;
  top: 6%;
  right: 6%;
  bottom: 6%;
  left: 6%;
  z-index: 9999;
  overflow: hidden;
  overflow-y: scroll;
  border: 1px solid blue;
}

section[name="2"] {
  height: 100%;
  background-color: #ccc;
  overflow: hidden;
}

section[name="2"] .content-inner {
  padding: 20px;
}

section[name="2"] .content {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  float: left;
  margin: 0 20px 0 0;
}

#pin-inner {
  width: 3000px;
  height: 100%;
  position: relative;
  border: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
}

section[name="3"] {
  height: 1200px;
  background-color: #ddd;
}
/* Downloaded from https://www.codeseek.co/ */
console.clear()

/**
 * @see http://appliancetecltd.com/
 */

var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave'
  },
  container: '#container'
})


new ScrollMagic.Scene({
  triggerElement: 'section[name="2"]',
  duration: 3000,
})
.setPin('#container section[name="2"]')
.setTween('#pin-inner', 1, {
  x: -3000
})
.addTo(controller)

This awesome code ( 横スクロールセクション ) is write by Wicked Pizza, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Wicked Pizza