0

I'm working on a site that has a splash page and I want it to work so that when you scroll down the splash page, div.splash, will scroll up out of the way and the site scrolls in. I have it working for the most part, there is a just a small annoyance. Depending on how fast you scroll the mouse, it will scroll a certain distance into the main site.

I'd like it to work so that as soon as it detects even one click down on the mousewheel it will do all the stuff below but any additional movement in the mousewheel will be disabled until the slideUp()/animate() function is completed. That way when they scroll, the animations will happen but the person will still start at the very top of the page.

$(window).bind('mousewheel', function(e, delta) {
if(delta == -1){    
    disable_scroll();       
    $('.alpha.wrapper').show();
    $('.titles .beta').hide();
    $('.splash').slideUp(800);
    $('.titles').animate({
        top: '495px'
    },800,enable_scroll());
}
});
Vian Esterhuizen
  • 3,788
  • 4
  • 27
  • 37
  • (offtopic) I just hate splash pages: that's another way to keep users away. – Roko C. Buljan May 05 '12 at 19:56
  • @RokoC.Buljan It's actually much like this site, well basically is this. http://www.antonmartin.fr/ Yeah, it's still a splash page but the one I'm building will have a several ways to get to the main site. Down arrow/page down/scroll down. It's more like an oversized banner really. Mine is also a small wedding RSVP site so it's not too big of a deal. – Vian Esterhuizen May 05 '12 at 20:04

1 Answers1

1

By moving the disable_scroll(); call to the document ready you'll be able to disable the user from scrolling as soon as the page loads.

Then, change the above to:

$(window).bind('mousewheel', function(e, delta) {
if(delta == -1){    
    $('.alpha.wrapper').show();
    $('.titles .beta').hide();
    $('.splash').slideUp(800);
    $('.titles').animate({
        top: '495px'
    },800,function(){enable_scroll();});
Chase
  • 29,019
  • 1
  • 49
  • 48
  • I'm actually using the code supplied in the accepted answer, my issue is just that the disable scroll doesn't kick in immediately. They still scroll part way into the site. – Vian Esterhuizen May 05 '12 at 20:05
  • Have you tried calling disable_scroll on page load rather than inside the bind? – Chase May 05 '12 at 20:09
  • I tried that, doesn't help. I did remove enable_scroll() and it seems to work the way I want but I just can't scroll after the animation, so I think the issue is that enable_scroll() is just kicking in too early. The way I have it, should enable_scroll() not run until the animate function has completed? – Vian Esterhuizen May 05 '12 at 20:25
  • Yes, I believe so. It's hard for me to give you and exact example to test based on what's given, but try moving the enable_scroll to after everything has been completed. – Chase May 05 '12 at 20:30
  • Not sure why this made a difference, from my basic understanding the original should have worked but I changed it `... to },800,function(){enable_scroll();});`, combined with your suggestion to move disable_scroll() out of the bind it works perfect now. If you want to, you can edit your answer to include those two things and I'll accept it. – Vian Esterhuizen May 05 '12 at 20:36
  • I've edited the above code, if you notice anything I may have missed then please let me know and I'll continue to edit the response for future searchers. Thanks and I'm glad it's working for you now =) – Chase May 05 '12 at 20:43