0

I'm experiencing a weird issue here. I have a Javascript code which scrolls my page diagonally. It takes the scrollTop() value and divides it to scroll diagonally. But when i try to scroll it with two "layers", the foreground scrolling more than the background layer, i experience a sluggish animation when i finish scrolling to bottom and try to scroll to top again.

I have tried somethings as i saw here, like caching vars, declaring in e.g. $(window) as $window with no luck. I dont know if this issue its happening by the Math or Animate.

Here's my jsfiddle: http://jsfiddle.net/sPB3a/

You can experience it in fullscreen here: http://jsfiddle.net/sPB3a/show/

Thanks for any tip!

4

2 回答 2

0

我认为问题的根本原因是背景图像的大小。我从您的页面中删除了所有背景图像，并且滚动非常流畅。

它们真的很重。您应该尝试使用质量非常低的 jpg 图像（小于 20k）。如果这可行，那么您必须处理图像以找到良好的折衷方案。

注意：png 格式是一种松散的图像格式。它适用于小图像和屏幕截图（大区域具有完全相同的颜色）。当有很多非常相似的颜色、模糊和渐变时，这并不好。例如照片。在您的情况下，您应该使用 jpg 格式并调整质量级别。

于 2012-05-29T13:59:49.907 回答
0

您正在$(window).scroll函数中查询 dom。我不认为这是一个好习惯。

缓存你的变量，通过 javascript 访问 dom 非常慢。

我在您的代码中有很多东西，请检查它是否对您有帮助。

小提琴

$(function(){


    var $window = $(window);
    var windowHeight = $window.height();
    var windowWidth = $window.width();
    var content = $("#content");
    var section = content.children("section");
    var sectionsNumbers = section.length-1;
    var illusion =  $(".illusion1");
    var mask = $('#mask');
    // Scroll sets

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

    content.css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});

    illusion .css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});


    // Set mask w and h

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


    section.each(function(sectionCount,val) {

        // Defines its width and height
        var $this = $(this);
        $this.css({"width":windowWidth,"height":windowHeight,"left":sectionCount*windowWidth,"top":sectionCount*windowHeight});


    });

    // When window scrolls


    var angleVar = windowScrollX/windowScrollY;
    var curScrollTop;
    $(window).scroll(function(){
        var $this = $(this);
        curScrollTop = $this.scrollTop();
        content.stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 1250, easing: 'easeOutQuart'});
       illusion.stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 1250, easing: 'easeOutQuart'});        
    }); 

});
于 2012-05-29T14:01:18.120 回答