• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Анимация списка при прокручивании

Разработка Анимация списка при прокручивании

Нет прав для скачивания
Анимация списка при прокручивании.
Пишем код HTML:
PHP:
<div class="wrapper">
  <div class="scroll-list">
    <div class="scroll-list__wrp js-scroll-content js-scroll-list">
      <div class="scroll-list__item js-scroll-list-item"></div>
      <div class="scroll-list__item js-scroll-list-item"></div>
      <div class="scroll-list__item js-scroll-list-item"></div>
      <div class="scroll-list__item js-scroll-list-item"></div>
    </div>
  </div>
</div>
Пишем стиль:
CSS:
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&subset=latin-ext");
html {
  position: relative;
  overflow-x: hidden !important;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  background: #f2f7fd;
}

a, a:hover {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #fa9b48 100%);
}

.scroll-list {
  width: 100%;
  max-width: 700px;
  padding: 25px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .scroll-list {
    margin-top: 20px;
  }
}
.scroll-list__wrp {
  width: 100%;
  height: 700px;
  overflow: auto;
  padding: 50px;
  box-shadow: 0px 7px 46px 0px rgba(41, 53, 108, 0.45);
  background: #4b1079;
  background: #4b1079;
  margin-bottom: 15px;
  border-radius: 8px;
  background-image: linear-gradient(147deg, #6e0777 0%, #380c70 74%);
}
.scroll-list__wrp .scrollbar-track {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .scroll-list__wrp {
    padding: 25px;
  }
}
.scroll-list__item {
  width: 100%;
  height: 155px;
  display: block;
  margin-bottom: 15px;
  border-radius: 8px;
  background-image: linear-gradient(147deg, #ff7c34 0%, #c31269 74%);
  transition: all .35s ease-in-out;
  opacity: 0;
  transform: scale(0.7);
  box-shadow: 0px 7px 16px 0px rgba(41, 53, 108, 0.25);
}
.scroll-list__item.item-hide {
  opacity: 0;
  transform: scale(0.7);
}
.scroll-list__item.item-focus {
  opacity: 1;
  transform: scale(1);
}
.scroll-list__item.item-next {
  opacity: 1;
  transform: scale(1);
}
.scroll-list__item.item-next + .scroll-list__item {
  opacity: 1;
  transform: scale(1);
}
.scroll-list__item:last-child {
  margin-bottom: 155px;
}
Пишем jquery:
JavaScript:
$(document).ready(function () {
  var Scrollbar = window.Scrollbar;

  Scrollbar.use(window.OverscrollPlugin);

  var customScroll = Scrollbar.init(document.querySelector('.js-scroll-list'), {
    plugins: {
      overscroll: true
    }
  });

  var listItem = $('.js-scroll-list-item');

  listItem.eq(0).addClass('item-focus');
  listItem.eq(1).addClass('item-next');

  customScroll.addListener(function (status) {

    var $content = $('.js-scroll-content');

    var viewportScrollDistance = 0;


    viewportScrollDistance = status.offset.y;
    var viewportHeight = $content.height();
    var listHeight = 0;
    var $listItems = $content.find('.js-scroll-list-item');
    for (var i = 0; i < $listItems.length; i++) {
      listHeight += $($listItems[i]).height();
    }

    var top = status.offset.y;
    // console.log(top);
    var visibleCenterVertical = 0;
    visibleCenterVertical = top;

    var parentTop = 1;
    var $lis = $('.js-scroll-list-item');
    var $focusLi;
    for (var i = 0; i < $lis.length; i++) {
      var $li = $($lis[i]);
      var liTop = $li.position().top;
      var liRelTop = liTop - parentTop;

      var distance = 0;
      var distance = Math.abs(top - liRelTop);
      var maxDistance = $('.js-scroll-content').height() / 2;
      var distancePercent = distance / (maxDistance / 100);


      if (liRelTop + $li.parent().scrollTop() > top) {
        if (!$li.hasClass('item-focus')) {
          $li.prev().addClass('item-hide');
          $lis.removeClass('item-focus');
          $lis.removeClass('item-next');
        }
        $li.removeClass('item-hide');
        $li.addClass('item-focus');
        $li.next().addClass('item-next');
        break;
      }
    }
  });

});
Смотрим наш результат:
45w14.gif
Автор
baltun
Скачиваний
0
Просмотры
500
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

Похожие ресурсы
Верх Низ