Javascript - Smooth parallax scrolling with mouse wheel
After doing a lot of research, I found a pretty easy solution :)
http://bassta.bg/demos/smooth-page-scroll/
Interestingly enough, I didn't have to alter my existing code at all. This overrides the default scroll behaviour, while leaving the event open for me to use like I would normally do.
EDIT: This is a really bad idea. Never ever hijack and override expected behavior. I guess I was overly fascinated with animations back then and overdid everything. Thankfully we all learn and expand our perceptions of good UX principles :)
Chrome and IE: parallax (jQuery animate) is not smooth when using mouse wheel to scroll
I solved the problem with this jQuery script (which adds EventListener for both keyboard and mouse scroll), hope it helps. :)
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 1300;
var distance = 270;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}
$(document).keydown(function (e) {
switch (e.which) {
//up
case 38:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - distance
}, time);
break;
//down
case 40:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() + distance
}, time);
break;
}
});
Parallax image very choppy when scrolling
Most widely used web browsers don't have built in smooth mouse wheel scrolling (like Google Chrome, for example). There are plenty of scripts on the web that can create this effect too;
Here is a cross browser, responsive, and simple to use smooth scrolling script that I created and personally like to use a lot:
silk-scroll
Hope this help!
Smooth parallax effect
Already solved. I've overrided default mousewheel function in this way.
window.onmousewheel = function (e) {
e.preventDefault();
window.scrollTo(window.pageXOffset + e.deltaX/scrollRatio, window.pageYOffset + e.deltaY/scrollRatio)
}
Maybe it's not the best solution, but it works fine. Shakes on scroll disappeared.
jQuery- smooth scrolling a parallax page to certain anchors by mousewheel
I've found this working:
var pageH = $(window).innerHeight(); //grab window height
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
var eTop = $('#parallaxtop').offset().top; //get the offset top of the element
var myOffset = eTop - $(window).scrollTop(); //determine the offset from window
if (myOffset > -100 && myOffset < pageH/2) { //if the offset is less than the half of page scroll to the panel
$('#parallaxtop').ScrollTo({ //ScrollTo JQuery plugin
});
}
}, 250)); //this will be calculated 250ms after finishing every scroll
});
I've used the ScrollTo JQuery plugin for smooth scrolling.
Related Topics
Calculate Position of Selected Text JavaScript/Jquery
Issue with Comparing Two Numbers in JavaScript
React-Leaflet Map Not Correctly Displayed
Capture/Save/Export an Image with CSS Filter Effects Applied
Apply Multiple Styles with .Style() Method in D3.Js
How to Change Cursor from Pointer to Finger Using Jquery
Auto Image Resize Based on Browser Window Dimensions
Google Maps API - Strange Map "Offset" Behaviour
Chosen Dropdown Within Bootstrap Modal Is Hidden Behind Modal Footer
How to Remove the Parent Element Using Plain JavaScript
Chrome Extension Inject Sidebar into Page
How to Select Nth Element of the Same Type
Detect High Contrast Extension Use in Chrome Browser
Removing Legend on Charts with Chart.Js V2