Scroll Magic Section Вытрите вопрос высоты - PullRequest
Новая
       76

Scroll Magic Section Вытрите вопрос высоты

0 голосов
/ 11 ноября 2018

Я реализовал очистку разделов с некоторым успехом, проблема, с которой я сталкиваюсь, касается первого раздела, мой контент разрывается, когда он выше высоты браузера. Это не проблема для последующих разделов.

Скрипка - https://jsfiddle.net/apspencer/qsubj5ka/1/

console.clear();
console.log("ScrollMagic v%s loaded", ScrollMagic.version);


//add pannel# to each  panel
$(".panel").each(function(i) {
  $(this).addClass("panel" + (i + 1));
});

// how many panels
var numPanels = $('.panel').length;

// Add z-index and calulate tween durations
var orderedPanels = [];
var duration = [];
for (var i = 0; i < numPanels; i++) {
	// generate CSS for z-index of each panel, negative numbers ascending
  orderedPanels.push(".panel" + (i + 1) + " {z-index: " + (i + 1) + ";} ");
  // Calulate tween duration for each panel based on height
  duration.push(($(".panel" + (i+1)).height()/200));
}
// Add CSS for z-index of each panel to the head
$("<style id='panelZOrder' type='text/css'>" + (orderedPanels.join("")) + "</style>").appendTo("head");

// init
var controller = new ScrollMagic.Controller();

// define movement of panels
var wipeAnimation = new TimelineLite()
  .fromTo(".panel1", duration[0], {
    y: "-100%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel2", duration[1], {
    y: "-0%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel3", duration[2], {
    y: "-0%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel4", duration[3], {
    y: "-0%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel5", duration[4], {
    y: "-0%"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  });


// create scene to pin and link animation
new ScrollMagic.Scene({
    triggerElement: "#pinContainer",
    triggerHook: "onLeave",
    duration: "400%"
  })
  .setPin("#pinContainer")
  .setTween(wipeAnimation)
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

То, что я использую Javascript, я думаю, что это как-то связано с тем, что первый y: -100%, тогда как все остальные -0%, но меняя это значение на что-то кроме -100% полностью перемещает страницу.

Спасибо

...