Разработка - Горизонтальный слайдер контента

Пишем код HTML:

HTML:

<div id="scrollbar">
  <div class="wrapper">
    <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, temporibus esse magni illum eos natus ipsum minus? Quis excepturi voluptates atque dolorum minus eligendi! Omnis minima magni recusandae ex dignissimos.</div>
    <div class="item">Eaque ullam illum nobis deleniti mollitia unde, sed, nemo ipsa ratione ex, dicta aliquam voluptates! Odio vitae eum nobis dignissimos sunt ipsum repellendus totam optio distinctio. Laborum suscipit quia aperiam.</div>
    <div class="item">Animi, porro molestias? Reiciendis dolor aspernatur ab quos nulla impedit, dolores ullam hic commodi nobis nam. Dolorem expedita laudantium dignissimos nobis a. Dolorem, unde quidem. Tempora et a quibusdam inventore!</div>
    <div class="item">Labore, unde amet! Alias delectus hic laboriosam et dolorum? Saepe, dicta eaque? Veniam eos blanditiis neque. Officia et nostrum, tempore modi quo praesentium aspernatur vero dolor, ipsa unde perspiciatis minima.</div>
    <div class="item">Quaerat error dolorem aspernatur magni dicta ut consequuntur maxime tempore. Animi odio eos quod culpa nulla consectetur? Aperiam ipsam ducimus delectus reprehenderit unde, non laborum voluptate laboriosam, officiis at ea!</div>
    <div class="item">Rem nobis facere provident magni minima iste commodi aliquam harum? Facere error quos cumque perspiciatis voluptatibus deserunt maiores, fugiat sunt sit ab inventore natus saepe, eveniet alias ipsam placeat voluptas!</div>
    <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, temporibus esse magni illum eos natus ipsum minus? Quis excepturi voluptates atque dolorum minus eligendi! Omnis minima magni recusandae ex dignissimos.</div>
    <div class="item">Magnam eveniet inventore assumenda ullam. At saepe voluptatibus sed dicta reiciendis, excepturi nisi perferendis, accusantium est suscipit tempora dolorum praesentium cupiditate doloribus non? Sint numquam recusandae dolore quis esse ea?</div>
    <div class="item">Temporibus cum dolor minima consequatur esse veritatis enim nemo cupiditate laborum doloribus reiciendis perferendis, quas fugit earum rerum, at beatae alias amet aspernatur dolorem dolore error commodi. Perspiciatis, reiciendis amet!</div>
    <div class="item">Vitae, tenetur beatae error corrupti odit expedita quisquam commodi ea aspernatur aliquid, eveniet reprehenderit sequi, similique maiores praesentium quam! Optio tenetur saepe unde voluptatem minus tempora maxime temporibus ducimus ullam!</div>
    <div class="item">Dolor, dolorum beatae accusamus obcaecati, distinctio similique quibusdam corporis, deleniti praesentium recusandae blanditiis! Vel sapiente quisquam sed dignissimos error, ea sit quaerat alias aperiam illo non numquam voluptatibus architecto? Impedit?</div>
    <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, temporibus esse magni illum eos natus ipsum minus? Quis excepturi voluptates atque dolorum minus eligendi! Omnis minima magni recusandae ex dignissimos.</div>
  </div>
</div>

Пишем стиль и оформление:

SCSS:

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  font-family: 'PT Sans', sans-serif;
  color: #444;
  height: 100vh;
}

#scrollbar {
  height: 100vh;
  background: #eee;
}

.scrollbar-track {
  background: none;
  height: 1px;
  bottom: 40px;
  margin: 0 auto;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .06);
 
  .scrollbar-thumb {
    height: 3px;
    top: -1px;
    background: rgba(0, 0, 0, .1);
  }
}

.wrapper {
  display: flex;
  position: relative;
  z-index: 1;
  counter-reset: item;
  height: 100vh;
 
  .item {
    position: relative;
    padding: 150px 80px;
    flex: 0 0 500px;
    height: 100vh;
    display: flex;
    align-items: center;
    line-height: 1.7;
    user-select: none;
    border-right: 1px solid rgba(0, 0, 0, .06);
    
    &:before {
      counter-increment: item;
      content: counter(item);
      font-size: 100px;
      opacity: .13;
      font-weight: bold;
      position: absolute;
      z-index: -1;
      transform: translate(-30px, -50px);
      font-family: 'Libre Baskerville', serif;
      line-height: 1;
    }
    
    &:nth-child(2n+2) {
      align-items: flex-start;
    }
    
    &:nth-child(4n+4) {
      align-items: flex-end;
    }
  }
}

.pagination {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: none;
  display: flex;
 
  button {
    text-indent: -9999px;
    outline: none;
    width: 20px;
    height: 20px;
    border: none;
    position: relative;
    background: none;
    padding: 0;
    font-size: 0;
    
    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #aaa;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px #eee;
      transition: background .2s ease-in-out;
    }
    
    &.active {
      &:before {
        background: #111;
      }
    }
  }
}

Придаем немного динамики:

JavaScript:

var option = {
  x: 0,
  speed: 1.5,
  limit: 2,
  time: 0.3 };

var scrollbar = Scrollbar.init(document.querySelector('#scrollbar'), {
  overscrollEffect: 'bounce',
  alwaysShowTracks: true });

var listener = function listener(status) {
  console.log('scrollbar', status.offset.x);
  active = parseInt(status.offset.x / 500);

  bullets.forEach(function (b) {b.classList.remove('active');});
  bullets[active].classList.add('active');
};
scrollbar.addListener(listener);


/*--------------------
                                 Pagination
                                 -------------------*/
var active = 0;
var pag = void 0,bullets = void 0;

var pagination = function pagination() {
  var items = document.querySelectorAll('.item');
  pag = document.createElement('div');
  pag.classList.add('pagination');
  items.forEach(function (item, i) {
    var bullet = document.createElement('button');
    bullet.classList.add('bullet');
    bullet.innerHTML = i;
    pag.appendChild(bullet);
  });
  document.getElementById('scrollbar').appendChild(pag);
  bullets = document.querySelectorAll('.bullet');

  bullets.forEach(function (b, i) {
    b.addEventListener('click', function (el) {
      bullets.forEach(function (el) {el.classList.remove('active');});
      el.target.classList.add('active');
      var i = parseInt(el.target.innerHTML);
      active = i;

      var x = 500 * i;
      if (x > scrollbar.limit.x) {
        x = scrollbar.limit.x;
      }

      TweenMax.to(option, 1, {
        x: x,
        ease: Power4.easeOut,
        onUpdate: function onUpdate() {
          window.console.log('option', option.x);
          scrollbar.scrollTo(option.x, 0, 0);
        } });

    });
  });
};
pagination();


/*--------------------
              Mousewheel
              -------------------*/
var horizontalScroll = function horizontalScroll(e) {
  var y = parseInt(e.deltaY * option.speed);
  var x = scrollbar.offset.x + y;
  x = x < 0 ? 0 : x > scrollbar.limit.x ? scrollbar.limit.x : x;

  TweenMax.to(option, option.time, {
    x: x,
    onUpdate: function onUpdate() {
      window.console.log('option', option.x);
      scrollbar.scrollTo(option.x, 0, 0);
    } });

};
document.querySelector('.wrapper').addEventListener('mousewheel', function (e) {
  horizontalScroll(e);
});

Смотрим наш шедевр:

Как говорится глаза боятся, а руки делают и при большом желании можно повесить ссылки на выдержки и будет не плохая перелиновка контента, что скажется весьма положительно для SEO.

Разработка Горизонтальный слайдер контента

Ещё ресурсы от baltun