@kuzubina

Как инициировать динамическое кол-во секций в SCROLLMAGIC.JS?

Есть вот такого плана структура страницы https://codepen.io/PointC/pen/eLgpWa секции для горизонтальной прокрутки для инициализации плагина изначально описываются в js
Как сделать чтобы рандомное кол-во секций инициализировалось и нормально работало? (к примеру если из админки WP будутдобавлять новые)
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy
Верставший фронтендер
TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
var tl = new TimelineMax();
var pannelEffectsMap = {
  0: {xPercent: 100},
  1: {xPercent: -100},
  2: {yPercent: 100},
};
var panels = document.querySelectorAll('.panel');
panels.forEach(function(panel, index){
  if(index !== 0){
   var mapIndex = index % 3 // Так как в pannelEffectsMap только 3 "эффекта"
  tl.from(panel, 1, pannelEffectsMap[mapIndex]);		 
  }
})


new ScrollMagic.Scene({
  triggerElement: "#pinMaster",
  triggerHook: "onLeave",
  duration: "200%"
})
  .setPin("#pinMaster")
  .setTween(tl)
  .addIndicators({
  colorTrigger: "white",
  colorStart: "white",
  colorEnd: "white",
  indent: 40
})
.addTo(controller);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽