Glattere Scroll-Übergänge in Firefox?

Ich versuche, einen Parallax-Effekt in Firefox zu erzeugen, indem ich die oberste Position der Elemente mit dem onscroll-Ereignis modifiziere. Ich habe das Onscroll-Ereignis gedrosselt, damit es den Browser nicht überlastet, und ich fügte eine Transition Top-Eigenschaft in der CSS hinzu, um die Dinge flüssiger zu machen. Das funktioniert ziemlich gut in jedem Browser, aber Firefox ist aus irgendeinem Grund extrem abgehackt. Gibt es eine Möglichkeit, diesen Übergang reibungsloser zu gestalten?Glattere Scroll-Übergänge in Firefox?

window.onscroll = throttle(function(){ 
 
    var scrollDistance = window.pageYOffset || window.document.documentElement.scrollTop || window.document.body.scrollTop; 
 
    document.getElementById("back").style.top = -scrollDistance * 0.3 + "px"; 
 
    document.getElementById("mid").style.top = -scrollDistance * 0.5 + "px"; 
 
    document.getElementById("fore").style.top = -scrollDistance * 0.9 + "px"; 
 
}, 100); 
 

 
function throttle (callback, limit) { 
 
    var wait = false; 
 
    return function() { 
 
     if (!wait) { 
 
      callback.call(); 
 
      wait = true; 
 
      setTimeout(function() { 
 
       wait = false; 
 
      }, limit); 
 
     } 
 
    } 
 
}

body{ 
 
    height: 5000px; 
 
    background: url(http://lorempixel.com/output/city-q-c-1920-1920-4.jpg); 
 
} 
 

 
.parallaxEl { 
 
    width: 1920px; 
 
    height: 1080px; 
 
    position: fixed; 
 
    transition: top 0.1s; 
 
} 
 

 
#back{ 
 
    background: url(http://wall.rimbuz.com/wp-content/uploads/4K-Wide-Wallpapers.jpg); 
 
} 
 

 
#mid{ 
 
    background: url(https://wallpaperscraft.com/image/space_planet_background_83807_3840x2160.jpg); 
 
} 
 

 
#fore{ 
 
    background: url(http://wall.rimbuz.com/wp-content/uploads/4K-HD-Background-Wallpapers.jpg); 
 
}

<body> 
 
    <div class="parallaxEl" id="back"></div> 
 
    <div class="parallaxEl" id="mid"></div> 
 
    <div class="parallaxEl" id="fore"></div> 
 
</body>

http://codepen.io/anon/pen/NAzBrX

Quelle

2016-07-28 Eric

möglich Wenn Sie CSS 3D Transforms für die Animation verwenden sollte, weil es den Zugang zu einem Benutzer GPU hat und für flüssigere Animation ermöglicht.

Hardwarebeschleunigung und CSS-Animation

https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

Auch hier ist ein Beispiel für einen grundlegenden Effekt Parallaxe mit dieser Technik ...

https://css-tricks.com/tour-performant-responsive-css-site/#article-header-id-2

Quelle

2016-07-28 02:36:21

Verwendung requestAnimationFrame, erhalten Sie einen reibungsloseren Thrott ler.

requestAnimationFrame hat den Vorteil, mit der Bildwiederholfrequenz synchronisiert zu werden.

Hier ist ein Code-Demo:

// your callback 
 
var scrollHandler = function() { 
 
    var scrollDistance = window.pageYOffset || window.document.documentElement.scrollTop || window.document.body.scrollTop; 
 
    document.getElementById("back").style.top = -scrollDistance * 0.3 + "px"; 
 
    document.getElementById("mid").style.top = -scrollDistance * 0.5 + "px"; 
 
    document.getElementById("fore").style.top = -scrollDistance * 0.9 + "px"; 
 
}; 
 

 
// the throttle function 
 
// returns the function that should be passed has an event listener 
 
var throttle = function(callback) { 
 
    // a simple flag 
 
    var active = false; 
 
    // to keep track of the last event 
 
    var evt; 
 
    // fired only when screen has refreshed 
 
    var handler = function(){ 
 
    // release our flag 
 
    active = false; 
 
    // call the callback 
 
    callback(evt); 
 
    } 
 
    // the actual event handler 
 
    return function handleEvent(e) { 
 
    // save our event at each call 
 
    evt = e; 
 
    // only if we weren't already doing it 
 
    if (!active) { 
 
     // raise the flag 
 
     active = true; 
 
     // wait for next screen refresh 
 
     requestAnimationFrame(handler); 
 
    }; 
 
    } 
 
} 
 
// remember to call the function, we need its returned function 
 
window.onscroll = throttle(scrollHandler);

body { 
 
    height: 5000px; 
 
    background: url(http://lorempixel.com/output/city-q-c-1920-1920-4.jpg); 
 
} 
 
.parallaxEl { 
 
    width: 1920px; 
 
    height: 1080px; 
 
    position: fixed; 
 
    transition: top 0.1s; 
 
} 
 
#back { 
 
    background: url(http://wall.rimbuz.com/wp-content/uploads/4K-Wide-Wallpapers.jpg); 
 
} 
 
#mid { 
 
    background: url(https://wallpaperscraft.com/image/space_planet_background_83807_3840x2160.jpg); 
 
} 
 
#fore { 
 
    background: url(http://wall.rimbuz.com/wp-content/uploads/4K-HD-Background-Wallpapers.jpg); 
 
}

<body> 
 
    <div class="parallaxEl" id="back"></div> 
 
    <div class="parallaxEl" id="mid"></div> 
 
    <div class="parallaxEl" id="fore"></div> 
 
</body>

Quelle

2016-07-28 02:52:33 Kaiido

Das Ereignis 'onscroll' nach einer Rolle verursacht wird, und das Ereignis 'OnMouseWheel' ('onwheel') nach einer Rolle verursacht wird . Für einen Scroll mit einer Maus Animation wird reibungsloser. Beispiel: excube.hol.es

Quelle

2016-08-12 05:28:14

Antwort

Verwandte Themen