stellar.js とウェイポイントを使用して、次の視差アニメーションを作成しました。背景の代わりに画像をアニメーション化し、スライドを切り替えるときにテキストをフェードインおよびフェードアウトしています。これはすべて、下にスクロールすると機能しますが、スライド 4 から上にスクロールすると機能しません。
スライドが移動する前にウェイポイントが発火するかのように、スライド 4 から 3 に移動するときでも、dataslide は 4 であると見なされます。ただし、activeSlideNumber (つまり、dataslide に移動する前のスライド) が正しい番号であっても、クラスの 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);
});
});