我正在尝试使用Petr Tichy的一个模板，然后参加了他的一些课程。我做了一段时间没事，但是就像这样，我撞墙了，我不确定我做错了什么。
网站页面顺利进行，直到第3个场景（从代码中的“ var pinScene03Tl ”开始）然后所有动画都不起作用或显示它正在应用于内容在检查器中查看它时。我一遍又一遍地重新检查了html和代码。
动画网站的代码很长，但我会发布main.js，这是我的timelineMax和scrollMagic js。
MAIN.JS
(function ($) {
// Init ScrollMagic
var controller = new ScrollMagic.Controller();
// get all slides
var slides = ["#slide01", "#slide02", "#slide03", "#slide04", "#slide05"];
// get all headers in slides that trigger animation
var headers = ["#slide01 header", "#slide02 header", "#slide03 header", "#slide04 header", "#slide05 header"];
// get all break up sections
var breakSections = ["#cb01", "#cb02", "#cb03", "#cb04", "#cb05"];
// number of loaded images for preloader progress
var loadedCount = 0; //current number of images loaded
var imagesToLoad = $('.bcg').length; //number of slides with .bcg container
var loadingProgress = 0; //timeline progress - starts at 0
$('.bcg').imagesLoaded({
background: true
}
).progress( function( instance, image ) {
loadProgress();
});
function loadProgress(imgLoad, image)
{
//one more image has been loaded
loadedCount++;
loadingProgress = (loadedCount/imagesToLoad);
//console.log(loadingProgress);
// GSAP timeline for our progress bar
TweenLite.to(progressTl, 0.7, {progress:loadingProgress, ease:Linear.easeNone});
}
//progress animation instance. the instance's time is irrelevant, can be anything but 0 to void immediate render
var progressTl = new TimelineMax({paused:true,onUpdate:progressUpdate,onComplete:loadComplete});
progressTl
//tween the progress bar width
.to($('.progress span'), 1, {width:100, ease:Linear.easeNone});
//as the progress bar witdh updates and grows we put the precentage loaded in the screen
function progressUpdate()
{
//the percentage loaded based on the tween's progress
loadingProgress = Math.round(progressTl.progress() * 100);
//we put the percentage in the screen
$(".txt-perc").text(loadingProgress + '%');
}
function loadComplete() {
// preloader out
var preloaderOutTl = new TimelineMax();
preloaderOutTl
.to($('.progress'), 0.3, {y: 100, autoAlpha: 0, ease:Back.easeIn})
.to($('.txt-perc'), 0.3, {y: 100, autoAlpha: 0, ease:Back.easeIn}, 0.1)
.set($('body'), {className: '-=is-loading'})
.set($('#intro'), {className: '+=is-loaded'})
.to($('#preloader'), 0.7, {yPercent: 100, ease:Power4.easeInOut})
.set($('#preloader'), {className: '+=is-hidden'})
.fromTo($('#intro .title'), 1, {rotation:180, scale:0.5, autoAlpha: 0}, {rotation:0, scale:1, autoAlpha: 1, ease:Power1.easeOut}, '-=0.2')
.from($('.scroll-hint'), 0.3, {y: -20, autoAlpha: 0, ease:Power1.easeOut}, '+=0.1');
return preloaderOutTl;
}
// Enable ScrollMagic only for desktop, disable on touch and mobile devices
if (!Modernizr.touch) {
// SCENE 1
// create scenes for each of the headers
headers.forEach(function (header, index) {
// number for highlighting scenes
var num = index+1;
// make scene
var headerScene = new ScrollMagic.Scene({
triggerElement: header, // trigger CSS animation when header is in the middle of the viewport
offset: -95 // offset triggers the animation 95 earlier then middle of the viewport, adjust to your liking
})
.setClassToggle('#slide0'+num, 'is-active') // set class to active slide
//.addIndicators() // add indicators (requires plugin), use for debugging
.addTo(controller);
});
// SCENE 2
// change color of the nav for dark content blocks
breakSections.forEach(function (breakSection, index) {
// number for highlighting scenes
var breakID = $(breakSection).attr('id');
// make scene
var breakScene = new ScrollMagic.Scene({
triggerElement: breakSection, // trigger CSS animation when header is in the middle of the viewport
triggerHook: 0.75
})
.setClassToggle('#'+breakID, 'is-active') // set class to active slide
.on("enter", function (event) {
$('nav').attr('class','is-light');
})
.addTo(controller);
});
// SCENE 3
// change color of the nav back to dark
slides.forEach(function (slide, index) {
var slideScene = new ScrollMagic.Scene({
triggerElement: slide // trigger CSS animation when header is in the middle of the viewport
})
.on("enter", function (event) {
$('nav').removeAttr('class');
})
.addTo(controller);
});
// SCENE 4 - parallax effect on each of the slides with bcg
// move bcg container when slide gets into the view
slides.forEach(function (slide, index) {
var $bcg = $(slide).find('.bcg');
var slideParallaxScene = new ScrollMagic.Scene({
triggerElement: slide,
triggerHook: 1,
duration: "100%"
})
.setTween(TweenMax.from($bcg, 1, {y: '-40%', autoAlpha: 0.3, ease:Power0.easeNone}))
.addTo(controller);
});
// SCENE 5 - parallax effect on the intro slide
// move bcg container when intro gets out of the the view
var introTl = new TimelineMax();
introTl
.to($('#intro header, .scroll-hint'), 0.2, {autoAlpha: 0, ease:Power1.easeNone})
//.to($('#intro .bcg'), 1.4, {y: '20%', ease:Power1.easeOut}, '-=0.2')
.to($('#intro'), 0.7, {autoAlpha: 0.5, ease:Power1.easeNone}, 0);
var introScene = new ScrollMagic.Scene({
triggerElement: '#intro',
triggerHook: 0,
duration: "100%"
})
.setTween(introTl)
.addTo(controller);
// SCENE 1915 - pin the first section
// and update text
var pinScene01Tl = new TimelineMax();
pinScene01Tl
.fromTo($('#slide01 .slideLeft'), 0.6, {autoAlpha:0}, {left:70, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide01 .slideRight'), 0.6, {autoAlpha:0}, {right:80, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.to($('.slideLeft .caption'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.8')
.to($('.slideRight .caption'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.8')
.fromTo($('.slideLeft .caption'), 0.7, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '+=0.4')
.fromTo($('.slideRight .caption'), 0.6, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide01 .quotebuttonL'), 0.2, {autoAlpha:0}, {left:30, top:50, rotation:360, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide01 .quotebuttonR'), 0.2, {autoAlpha:0}, {right:30, top:50, rotation:360, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide01 .videobuttonM'), 0.2, {autoAlpha:0}, {top:100, rotation:360, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide01 .textbuttonM'), 0.2, {autoAlpha:0}, {top:200, rotation:360, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide01 .cstone1915'), 1, {autoAlpha:0,}, {right:0, autoAlpha:1, ease:Power1.easeOut}, '+=1')
.to($('#slide01 .quotebuttonL'), 0.2, {left:500, top:150, autoAlpha:0, rotation:360, ease:Power1.easeOut}, '-=0.6')
.to($('#slide01 .quotebuttonR'), 0.2, {right:500, top:150, autoAlpha:0, rotation:360, ease:Power1.easeOut}, '-=0.6')
.to($('#slide01 .videobuttonM'), 0.2, {top:150, autoAlpha:0, rotation:360, ease:Power1.easeOut}, '-=0.6')
.to($('#slide01 .textbuttonM'), 0.2, {top:150, autoAlpha:0, rotation:360, ease:Power1.easeOut}, '-=0.6')
.to($('#slide01 .slideLeft'), 0.2, {left:0, autoAlpha:0, ease:Power1.easeOut}, '-=0.6')
.to($('#slide01 .slideRight'), 0.2, {right:0, autoAlpha:0, ease:Power1.easeOut}, '-=0.6')
.to($('.slideLeft .caption'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.8')
.to($('.slideRight .caption'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.8')
.to($('#slide01 .cs1915'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.8')
.fromTo($('#slide01 .cs1915'), 0.7, {y: '+=60'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '+=0.4')
.set($('#slide01 h1'), {autoAlpha: 1}, '+=2');
var pinScene01 = new ScrollMagic.Scene({
triggerElement: '#slide01',
triggerHook: 0,
duration: "250%"
})
.setPin("#slide01")
.setTween(pinScene01Tl)
.addTo(controller);
// SCENE 1917 - pin the second section
// and update text
var pinScene02Tl = new TimelineMax();
pinScene02Tl
.fromTo($('#slide02 h1'), 0.2, {autoAlpha: 0}, {autoAlpha: 1, ease:Power1.easeNone}, '-=1.5')
.to($('#slide02 section'), 0.2, {autoAlpha: 1, ease:Power1.easeNone}, 1.5)
.to($('#slide02 .bcg'), 0.6, {scale: 1.2, transformOrigin: '0% 0%', ease:Power0.easeNone})
.fromTo($('#slide02 h1'), 0.7, {y: '+=20'}, {y: 0, autoAlpha: 0, ease:Power1.easeOut}, '+=0.4')
.fromTo($('#slide02 section'), 0.6, {y: '+=20'}, {y: 0, autoAlpha: 0, ease:Power1.easeOut}, '-=0.6')
.set($('#slide02 h1'), {autoAlpha: 0}, '+=2.5');
var pinScene02 = new ScrollMagic.Scene({
triggerElement: '#slide02',
triggerHook: 0,
duration: "125%"
})
.setPin("#slide02")
.setTween(pinScene02Tl)
.addTo(controller);
// SCENE 1918 - pin the second section
//
var pinScene03Tl = new TimelineMax();
pinScene03Tl
.fromTo($('#slide03 h1'), 0.2, {autoAlpha: 0}, {autoAlpha: 1, ease:Power1.easeNone}, '-=1.5')
.to($('#slide03 section'), 0.2, {autoAlpha: 1, ease:Power1.easeNone}, 1.5)
.to($('#slide03 .captionMain'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.6')
.fromTo($('#slide03 h1'), 0.7, {y: '+=20'}, {y: 0, autoAlpha: 0, ease:Power1.easeOut}, '+=0.4')
.fromTo($('#slide03 section'), 0.6, {y: '+=20'}, {y: 0, autoAlpha: 0, ease:Power1.easeOut}, '-=0.6')
.set($('#slide03 h1'), {autoAlpha: 1}, '+=2.5');
var pinScene03 = new ScrollMagic.Scene({
triggerElement: '#slide03',
triggerHook: 0,
duration: "125%"
})
.setPin("#slide03")
.setTween(pinScene03Tl)
.addTo(controller);
// SCENE 1921 - pin the second section
//
var pinScene04Tl = new TimelineMax();
pinScene04Tl
.fromTo($('#slide04 h1'), 0.2, {autoAlpha: 0}, {autoAlpha: 1, ease:Power1.easeNone}, '-=1.5')
.to($('#slide04 section'), 0.2, {autoAlpha: 1, ease:Power1.easeNone}, 1.5)
.fromTo($('#slide04 .slideLeft'), 0.6, {autoAlpha:0}, {left:70, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.fromTo($('#slide04 .slideRight'), 0.6, {autoAlpha:0}, {right:80, autoAlpha:1, ease:Power1.easeOut}, '-=0.6')
.to($('#slide04 .slideLeft'), 0.2, {left:0, autoAlpha:0, ease:Power1.easeOut}, '-=0.6')
.to($('#slide04 .slideRight'), 0.2, {right:0, autoAlpha:0, ease:Power1.easeOut}, '-=0.6')
.set($('#slide04 h1'), {autoAlpha: 1}, '+=2.5');
var pinScene04 = new ScrollMagic.Scene({
triggerElement: '#slide04',
triggerHook: 0,
duration: "200%"
})
.setPin("#slide04")
.setTween(pinScene04Tl)
.addTo(controller);
// SCENE 1922 - pin the second section
//
var pinScene05Tl = new TimelineMax();
pinScene05Tl
.to($('#slide05 h1'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.6')
.to($('#slide05 section'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, '-=0.6')
.fromTo($('#slide05 h1'), 0.7, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '+=0.4')
.fromTo($('#slide05 section'), 0.6, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.6')
.set($('#slide05 h1'), {autoAlpha: 1}, '+=2.5');
var pinScene05 = new ScrollMagic.Scene({
triggerElement: '#slide05',
triggerHook: 0,
duration: "125%"
})
.setPin("#slide05")
.setTween(pinScene05Tl)
.addTo(controller);
// change behaviour of controller to animate scroll instead of jump
controller.scrollTo(function (newpos) {
TweenMax.to(window, 1, {scrollTo: {y: newpos}, ease:Power1.easeInOut});
});
// bind scroll to anchor links
$(document).on("click", "a[href^='#']", function (e) {
var id = $(this).attr("href");
if ($(id).length > 0) {
e.preventDefault();
// trigger scroll
controller.scrollTo(id);
// if supported by the browser we can even update the URL.
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
}
});
}
}(jQuery));
You can see the whole thing in action here。我正在努力学习这一点并需要帮助进行调试，以便我可以使用最佳实践将其构建到一个不错的时间线上。我想学习如何做到这一点，真的可以使用帮助。非常感谢您的时间和帮助。