我使用stellar.js和waypoints创建了以下视差动画。我在动画图像而不是背景，我在切换幻灯片时也会淡入淡出一些文本。这一切都在向下滚动时有效，但在从幻灯片4向上滚动时则无效。
就好像在滑行移动之前上升航点时，所以当从滑道4移动到3时，它仍然认为数据滑动是4.所以我添加了一种强制数据滑动变量的方法（dataslide-1） ）哪个适用于导航，但即使activeSlideNumber（因此我们在转到dataslide之前来自幻灯片）是正确的数字，类activestip也不会从幻灯片4中删除，幻灯片3中的文本也不会淡入。< / p>
这是HTML
<ul class="navigation">
<li data-slide="1"><a href="#slide1">Slide 1</a></li>
<li data-slide="2"><a href="#slide2">Slide 2</a></li>
<li data-slide="3"><a href="#slide3">Slide 3</a></li>
<li data-slide="4"><a href="#slide4">Slide 4</a></li>
</ul>
<div class="slide" id="slide1" data-slide="1">
<div class="wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/1/home_1_1.png" data-stellar-ratio="1" data-stellar-vertical-offset="90" alt="" width="559" height="550">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/1/home_1_2.png" data-stellar-ratio="1.3" data-stellar-vertical-offset="120" alt="" width="329" height="330">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/1/home_1_3.png" data-stellar-ratio="1" data-stellar-vertical-offset="80" alt="" width="630" height="463">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/1/home_1_4.png" data-stellar-ratio="3.2" data-stellar-vertical-offset="80" alt="" width="572" height="578">
<div class="strip">
<div class="stripOuter">
<div class="stripInner">
<div class="row">
<div class="span4 heading">
<h2>openeyes electronic <br />patient records software</h2>
</div>
<div class="text span8 offeset1" >
<p>Slide 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu dui, ultricies vitae malesuada vehicula, ultricies eu diam. Sed justo tellus, sagittis ac aliquet sit amet, pretium id libero. In auctor, turpis vel fermentum interdum. </p>
</div><!--end of text-->
</div>
<h3><a class="button" data-slide="2">find out more</a></h3>
</div><!-- end of stripInner-->
</div><!-- end of stripOuter-->
</div><!--end of strip-->
</div>
</div><!--End Slide 1-->
<div class="slide" id="slide2" data-slide="2">
<div class="wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/2/home_2_1.png" data-stellar-ratio="3" data-stellar-vertical-offset="0" alt="" width="499" height="503">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/2/home_2_2.png" data-stellar-ratio="1.2" data-stellar-vertical-offset="120" alt="" width="544" height="229">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/2/home_2_3.png" data-stellar-ratio="4" data-stellar-vertical-offset="0" alt="" width="222" height="222">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/2/home_2_4.png" data-stellar-ratio="1.7" data-stellar-vertical-offset="30" alt="" width="419" height="418">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/1/home_1_2.png" data-stellar-ratio="6" data-stellar-vertical-offset="10" alt="" width="329" height="330">
<h2 class="slidetitle" data-stellar-ratio="1.2" data-stellar-vertical-offset="0">Collaboration</h2>
<h3 class="slidetitle" data-stellar-ratio="1.2" data-stellar-vertical-offset="0">Collaboration</h3>
<div class="strip">
<div class="stripOuter">
<div class="stripInner">
<div class="row">
<div class="span4 heading">
<h2>openeyes electronic <br />patient records software</h2>
</div>
<div class="text span8 offeset1" >
<p>Slide 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu dui, ultricies vitae malesuada vehicula, ultricies eu diam. Sed justo tellus, sagittis ac aliquet sit amet, pretium id libero. In auctor, turpis vel fermentum interdum. </p>
</div><!--end of text-->
</div>
<h3><a class="button" data-slide="3">find out more</a></h3>
</div><!-- end of stripInner-->
</div><!-- end of stripOuter-->
</div><!--end of strip-->
</div>
</div><!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3">
<div class="wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/3/home_3_1.png" alt="" width="893" height="540">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/3/home_3_2.png" data-stellar-ratio="1" data-stellar-vertical-offset="120" alt="" width="535" height="536">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/3/home_3_3.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="80" alt="" width="244" height="242">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/3/home_3_4.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="80" alt="" width="266" height="265">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/3/home_3_5.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="80" alt="" width="468" height="462">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/3/home_3_6.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="80" alt="" width="644" height="350">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/4.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="60" alt="" width="144" height="136">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/4.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="60" alt="" width="144" height="136">
<h2 class="slidetitle" data-stellar-ratio="1.2" data-stellar-vertical-offset="0">single portal</h2>
<div class="strip">
<div class="stripOuter">
<div class="stripInner">
<div class="row">
<div class="span4 heading">
<h2>openeyes electronic <br />patient records software</h2>
</div>
<div class="text span8 offeset1" >
<p>Slide 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu dui, ultricies vitae malesuada vehicula, ultricies eu diam. Sed justo tellus, sagittis ac aliquet sit amet, pretium id libero. In auctor, turpis vel fermentum interdum. </p>
</div><!--end of text-->
</div>
<h3><a class="button" data-slide="4">find out more</a></h3>
</div><!-- end of stripInner-->
</div><!-- end of stripOuter-->
</div><!--end of strip-->
</div>
</div><!--End Slide 3-->
<div class="slide" id="slide4" data-slide="4">
<div class="wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/1.png" alt="" width="533" height="423">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/2.png" alt="" width="636" height="383">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/3.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="80" alt="" width="455" height="455">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/4.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="80" alt="" width="144" height="136">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/4.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="80" alt="" width="144" height="136">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/5.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="80" alt="" width="267" height="246">
<img src="<?php echo get_template_directory_uri(); ?>/images/homepage/4/6.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="20" alt="" width="783" height="353">
<h2 class="slidetitle" data-stellar-ratio="1.2" data-stellar-vertical-offset="0">unified data</h2>
<h3 class="slidetitle" data-stellar-ratio="1.2" data-stellar-vertical-offset="0">unified data</h3>
<div class="strip">
<div class="stripOuter">
<div class="stripInner">
<div class="row">
<div class="span4 heading">
<h2>openeyes electronic <br />patient records software</h2>
</div>
<div class="text span8 offeset1" >
<p>Slide 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu dui, ultricies vitae malesuada vehicula, ultricies eu diam. Sed justo tellus, sagittis ac aliquet sit amet, pretium id libero. In auctor, turpis vel fermentum interdum. </p>
</div><!--end of text-->
</div>
</div><!-- end of stripInner-->
</div><!-- end of stripOuter-->
</div><!--end of strip-->
</div>
</div><!--End Slide 4-->
和JS
jQuery(document).ready(function ($) {
//make the first nav item active
$('.navigation li:nth-child(1)').addClass('active');
function repositionandResizeElements() {
//center strip and move it almost at bottom of the scree
var windowWidth = $(window).innerWidth();
//what's the height of the window?
var windowHeight = window.innerHeight;
//make all .wrappers of this height
$('.slide').css('height',windowHeight);
var first_slide_inner_height = $('.slide').innerHeight();
var strip_top_position = first_slide_inner_height - (first_slide_inner_height * 24 /100);
var wrapperWidth = $('#slide1 .wrapper').innerWidth;
//let's move the strip to 14%less of the height of the slide
$('.strip').css('top',strip_top_position);
//let's reposition the strip in the horizontal centre
if(windowWidth < 1200 && windowWidth >= 960) {
//we take the full width of the screen, we take out the central div's width
//and then divide it by 2, as the central div is centrally positioned!
var wrapper_start = (windowWidth- 960)/2;
$('.strip').css('left',wrapper_start+'px');
}else{
//we take the full width of the screen, we take out the central div's width
//and then divide it by 2, as the central div is centrally positioned!
wrapper_start = (windowWidth- 1170)/2;
$('.strip').css({'left':wrapper_start+'px', 'width':'1170px'});
}
//let's move the navigation
//we take the start of the strip, take out the height of the nav and half its size again
var navigation_height = $('.navigation').innerHeight();
var nav_top_position = strip_top_position - navigation_height;
//the right position will be the
$('.navigation').css({
//top:mainpoistion.top+(navheight/2)+'px'
top:nav_top_position+'px',
right:wrapper_start+'px'
});
}
repositionandResizeElements();
$(window).resize(function() {
repositionandResizeElements();
});
//left element from slide 4
var leftElement = $('.slide[data-slide="4"] img:nth-child(1)');
var leftElementWidth = '-'+leftElement.width()+'px';
var leftElementLeftPosition = leftElement.position().left;
//right element
var rightElement = $('.slide[data-slide="4"] img:nth-child(2)');
var rightElementWidth = rightElement.width()+'px';
var rightElementTopPosition = rightElement.position().top;
var yMiddleOfWrapper = $('.slide[data-slide="4"] .wrapper').innerHeight();
//lets hide the main 2 elements in slide 4
//$(rightElement).hide();
leftElement.add(rightElement).hide();
//hide all the strips except first one
$('.strip').addClass('inactivestrip');
$('#slide1 .strip').addClass('activestrip');
//temporary fix to bug:It detects the dimensions of elements that have been set using CSS instead of from HTML attributes
/*$('img[data-stellar-ratio]').each(function() {
var $this = $(this);
$this.css({
width: $this.attr('width') + 'px',
height: $this.attr('height') + 'px'
});
});*/
//initialise Stellar.js
$(window).stellar({
// Set scrolling to be in either one or both directions
horizontalScrolling: false,
// Set the global alignment offsets
horizontalOffset: 0,
verticalOffset: 0
});
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//find the position of the wrapper
var slide1_position = $('#main').position();
var slide1_position_top = slide1_position.top;
//Setup waypoints plugin
slide.waypoint(function (event, direction) {
var activeSlideNumber = 1;
//grab the current slide
activeSlideNumber = $('.activestrip').parent().parent().data('slide');
$('.slide[data-slide="' + activeSlideNumber + '"]').removeClass('activestrip');
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//if we are scrolling to slide 4
if(dataslide == 4) {
$(rightElement).css({
'right':rightElementWidth,
'top': (yMiddleOfWrapper/2) -(yMiddleOfWrapper * 10%100)
});
//let's hide elements out of the screen to bring them in afterwards
$(leftElement).css('left',leftElementWidth);
$(rightElement).css('width',0);
}
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
dataslide = ( dataslide -1 );
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li').removeClass('active');
$('.navigation li[data-slide="1"]').addClass('active');
$('.slide .strip').removeClass('activestrip').addClass('inactivestrip');
$('#slide1 .strip').addClass('activestrip');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
//hide active strip
$('.activestrip .text, .activestrip .button').fadeOut(1000);
var slideto = 0;
if(dataslide > 1)
{
slideto = $('.slide[data-slide="' + dataslide + '"]').offset().top+2;
}else if(dataslide == 4){
slideto = $('.slide[data-slide="' + dataslide + '"]').offset().top+8;
}
htmlbody.animate({
scrollTop: slideto
},
2000,
'easeInOutQuint',
function(){
//make the first nav item active
$('#slide1 .strip').removeClass('activestrip');
//show current slide text
$('.slide[data-slide="' + dataslide + '"] .strip .text, .slide[data-slide="' + dataslide + '"] .strip .button').fadeIn(1000);
$('.slide[data-slide="' + dataslide + '"] .strip').removeClass('inactivestrip').addClass('activestrip');
if(dataslide == 4)
{
//then we want to bring the left item in slowly
$(leftElement).show();
$(rightElement).show();
$(leftElement).animate({
left:leftElementLeftPosition
},
1800,
function(){
$(rightElement).animate({
width:rightElementWidth,
right:leftElementLeftPosition,
top:rightElementTopPosition
},
1800);
});
}
}
);
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
});