横スクロールセクション

In this example below you will see how to do a 横スクロールセクション with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kesuiket, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kesuiket ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/kesuiket/andx6a2aandx30b9andx30afandx30edandx30fcandx30ebandx30bbandx30afandx30b7andx30e7andx30f3-aBabKq */

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/kesuiket/andx6a2aandx30b9andx30afandx30edandx30fcandx30ebandx30bbandx30afandx30b7andx30e7andx30f3-aBabKq */
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)

Comments