我使用 stellar.js 和航点创建了以下视差动画。我正在为图像而不是背景设置动画，并且在切换幻灯片时我也在淡入和淡出一些文本。这一切都在向下滚动时有效，但在从幻灯片 4 向上滚动时无效。
就好像在幻灯片移动之前上升航点时触发，所以当从幻灯片 4 到 3 时，它仍然认为 dataslide 是 4。所以我添加了一种方法来强制 dataslide 变量为 (dataslide-1) 有效对于导航，但即使 activeSlideNumber（因此我们在进入数据幻灯片之前来自的幻灯片）是正确的数字，activestip 类也不会从幻灯片 4 中删除，并且幻灯片 3 中的文本也不会淡入。
这是 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);
});
});