CODEWITHSUNDEEP
jqueryhtmlscrolljquery-animate
Sebs_13
Sebs_13

Reputation: 1

Triggering a div animation by scrolling

Im working on a horizontal-scrolling website. The website has a large background image (5000px width). Now, I have div's with content that are currently at display:hidden. I know how to fade them in, but I need them to enter into view dynamically as I scroll to the right, and I would like to trigger these divs using percentages.

Example: user begins to scroll right, once they hit 20% width, first div enters into view (from right). User then continues to scroll until they hit 40% width, first div animates away (to the left) and next div enters into view (from right).

Any idea how I can accomplish this with jQuery??

Here is a bit of code... At the moment I have links that trigger some basic animations. But nothing for manual scrolling. Oh and im using this great pluggin called ScrollTo for the percentages.

HTML 

<div id="eat" class="sections">
 <div class="content">
 </div>
</div>

<div id="see" class="sections">
 <div class="content">
 </div>
</div>

<div id="meet" class="sections">
 <div class="content">
 </div>
</div>

<div id="find" class="sections">
 <div class="content">
 </div>
</div>

<div id="background">
 <img src="images/test.jpg" alt="" id="bg" />
</div>

CSS

.sections {position:absolute; right: 0; width:700px; height: 100%; min-height: 650px; z-index: 10; background-color: rgb(0,0,0);}
#drink, #eat, #see, #meet, #find {margin: 0px; padding: 0px;}
.content {margin: 20px; padding: 0px; outline: 1px solid red;}
h1 {color:#FFF; margin: 10em auto 0px auto;}
#background {height:103%; min-height: 670px; overflow-x: scroll; overflow-y: hidden; z-index: 9;}
#background img#bg {height: 100%; min-height: 650px; margin: 0px; padding: 0px;}

JS

$("document").ready(function() {

$('#link1').click(function(){
    $('#background').scrollTo('20%', 1500);
        var div = $('#drink');
        div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
        });
        $('#logo, #eat, #see, #meet, #find').fadeOut(500);          
        $('#drink').fadeIn(500);
});

$('#link2').click(function(){
    $('#background').scrollTo('40%', 1500);
        var div = $('#eat');
        div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
        });
        $('#logo, #drink, #see, #meet, #find').fadeOut(500);
        $('#eat').fadeIn(500);
});

$('#link3').click(function(){
    $('#background').scrollTo('60%', 1500);
        var div = $('#see');
        div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
        });
        $('#logo, #drink, #eat, #meet, #find').fadeOut(500);                
        $('#see').fadeIn(500);
});

$('#link4').click(function(){
    $('#background').scrollTo('80%', 1500);
        var div = $('#meet');
        div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
        });
        $('#logo, #drink, #eat, #see, #find').fadeOut(500);
        $('#meet').fadeIn(500);
});

$('#link5').click(function(){
    $('#background').scrollTo('100%', 1500);
        var div = $('#find');
        div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
        });
        $('#logo, #drink, #eat, #see, #meet').fadeOut(500);
        $('#find').fadeIn(500);
});

});

Upvotes: 0

Views: 1449

Answers (2)

gherkins
gherkins

Reputation: 14973

You can listen to the scroll event, then do your calculations based on scrollLeft() like this:

$(document).on('scroll', function() {
  //do the math
  console.log( $(this).scrollLeft() );
});

Upvotes: 2

scottm
scottm

Reputation: 28701

You can monitor the scroll event in jQuery. Here is another answer that gives you an idea of how you could track left and right scrolling. https://stackoverflow.com/a/4308435/53007

Upvotes: 0

Related Questions