0

I'm having some issues here with my js.

It functions correctly, but the performance is too slow in a certain case.

I scroll to the bottom softly, but when I try to scroll up again, it scrolls very slowly.

What can i do to enhance the performance?

Thanks!

$(function(){

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var sectionsNumbers = $("#content section").length-1;
var sectionCount = 0;

// Scroll sets

var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;

$("#content").css("width", windowScrollX+windowWidth);
$("#content").css("height", windowScrollY+windowHeight);

$(".illusion1").css("width", windowScrollX+windowWidth);
$(".illusion1").css("height", windowScrollY+windowHeight);

// Set mask w and h

$("#mask").css("width", windowWidth);
$("#mask").css("height", windowHeight);
$(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);

$("#content section").each(function() {

    // Defines its width and height

    $(this).css("width", windowWidth);
    $(this).css("height", windowHeight);

    // Defines its position
    $(this).css("left", sectionCount*windowWidth);
    $(this).css("top", sectionCount*windowHeight);

    sectionCount++;
});

// When window scrolls

$(window).scroll(function(){ 

    var curScrollTop = $(window).scrollTop();
    var angleVar = windowScrollX/windowScrollY;

    $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing: 'easeOutQuart'});

    $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing: 'easeOutQuart'});

    //{duration: 1500, easing: 'easeOutQuart'}
    });
});
2
  • What exactly is the effect you are trying to achieve? Are you trying to stick something to the top of the browser window? What browser is this animation not performing in?
    – Ryan Lynch
    May 25, 2012 at 20:33
  • Chrome. Im trying to scroll diagnoally. Its working perfectly in Safari. I think its Script exec. May 25, 2012 at 20:34

3 Answers 3

2

You're not caching selectors in your animation (and repeatedly using $(this) or $('#mask') is wasteful as well), so every time the user scrolls, it's /searching the entire dom/ for #content, #illusion1. Also, animating on scroll is somewhat redundant, since scrolling is a kind of "animation" itself. Fixed positioning would be ideal, but you can achieve the same effect by just setting the CSS style on each scroll. Just don't use animate on every scroll event. Also, you're not supplying 'px' for left and top and doing so prevents the need to "cast" into a string by prepending "-"+. Try re-writing the $(window).scroll function like so:

var $window = $(window),
    $content = $("#content"),
    $illusion = $(".illusion1");
$window.scroll(function(){ 
    var curScrollTop = $window.scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $content.css({ left: (-curScrollTop*angleVar)+'px', top: (-curScrollTop)+'px' });
    $illusion.css({ left: (-curScrollTop*angleVar*0.5)+'px', top: (-curScrollTop*0.5)+'px' });
});

If your heart is set on the animation effect, consider a debounce/throttle method. Rather than animating on every single scroll event, use: "timeout = setTimeout(function(){ ... }, 25)" that will perform the animation when the timeout is allowed to expire, and on scroll simply clearTimeout(timeout) and set the timeout again. The animation will not be realtime, as it will never be performed unless the user stops scrolling for 25ms.

1
  • Hey man, thanks for replying. I apreciate it. So, i tryed your method. I also thought this method too. But it has become more sluggish than mine. I agree caching vars would improve the performance, but i dont know it dont happened. Using timeout can affect the user experience. Im trying to figure out how they handle the scroll method here: thedeepestsite.com May 28, 2012 at 12:57
1

Not sure if this will help, but when I have to move an element relative to the browser window on scroll, I use some form of fixed positioning. I've found this gives better performance in Chrome and other browsers than trying to set or animate the offset of absolutely or relatively positioned elements. Perhaps if you could whip up a jsfiddle which illustrates the effect you are trying to achieve I could give some further advice.

EDIT: If you could provide some of the HTML in lieu of a jsfiddle that would also be helpful.

1
  • Hey Ryan, thanks for replying. So, here's the JSFiddle: jsfiddle.net/7CpbV. On JSFiddle it works very well, because there is only one "layer" scrolling. My issues occurs when i try to scroll 2 layers. Thanks again. May 28, 2012 at 13:08
0

I would say to change the whole bundle to TweenLite, which runs smoother than jQuery for animations.

http://www.greensock.com/v12/

you can compare the difference below.

http://www.greensock.com/js/speed.html

1
  • Tried out. Enhanced the performance a bit. I think its calc performance, not tweening. May 29, 2012 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.