Parallax Scrolling with JQuery animation stumbles - javascript

I have implemented a parallax effect with a video. I wanted to do it for my own so I did it without any framework or plugin but it is slow and it stumbles around.
My idea was that there are 2 pictures, 1 video and 2 boxes in front of them. So my code was that if i am on the position of the 1 picture, the pictures scroll slower (with margin-top) like this:
$( window ).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll>470){
scroll = scroll-470;
var scrollSlow = scroll*0.4;
$('#Picture1').css('margin-top', scrollSlow);
$('#InfoBox1').css('margin-top', -scroll);
if(scroll<400){
$('#Picture2').css('margin-top', -scroll);
}
$('#InfoBox2').css('margin-top', -scroll+heightPX);
if(scroll<900){
$('#Picture3').css('margin-top', -scroll+heightPX);
}
}
}
But if I scroll down it doesn't work.
Here is the online version: http://p-goetz.de/Parallax.html

Problem: You are probably testing your website in chrome/safari, try using Firefox you will notice that the things are smoother.
Reason: In some browsers when you scroll they jump 100px at once hence your parallax animation start looking odd.
Solution: Try to use a custom scroll with smooth fx.I will recommend Nicescroll.

The issue is the images/videos are so large, the browser lags when scrolling before they are completely loaded. One solution would be to wait for the images/videos to finish loading before presenting the page.
$('body').hide();
var video = document.getElementById('PARALLAX_bild2');
video.addEventListener('loadeddata', function() { // video is loaded
$('img').load(function() { // images are loaded
// Do some fancy fade in of the page here. This is just an example.
$('body').show();
});
}, false);

Related

How can I scroll a web page smoothly using JavaScript, without the scrolling being interrupted by the next scroll command?

This question is for when using the mouse wheel on an external mouse, not the touchpad.
I'm working on a program that modifies the mouse's behavior.
I'm using window.scrollBy, but window.scroll or window.scrollTo or something else could also work.
I've included the code below for a test page that you could copy and paste.
It works fine for one scroll, but not for multiple scrolls at once.
One scroll of the mouse wheel scrolls smoothly up or down.
But when multiple scrolls are sent quickly, the page actually scrolls slower in a jerky motion.
The problem seems to be that before the initial scroll is finished, the next scroll interrupts it.
For example in the code I typed out below:
If you scroll slowly down 5 times, then quickly up 10 times, the page doesn't scroll back up to the top.
It makes me wonder how it works normally in Windows or Chrome OS or other operating systems.
I've tried to research this already but couldn't find a good explanation of how it normally works.
Normally multiple scrolls at once increase the scrolling smoothly, while the code below does not.
How does this normally work?
What code can be used to make the page scroll properly?
<html><head>
<title>Scroll Test</title>
<script>
window.addEventListener("mousewheel", processEvent, {passive: false});
function processEvent()
{
event.preventDefault();
var scrollAmount = event.deltaY < 0 ? -100 : 100;
window.scrollBy({left:0, top:scrollAmount, behavior:"smooth"});
}
</script>
</head><body align="center">
<b>Test Area:</b>
<p>
</body></html>
<script>
for (var i = 1; i <= 1000; i++) {document.body.innerHTML += i + "<br>";}
</script>
Either throttle the mousewheel/wheel event using something like lodash:
window.addEventListener("mousewheel", _.debounce(processEvent, 500), {passive: false});
Another thing to note, the window scrollBy function may not be as smooth a scroll as the GSAP ScrollTo plugin:
gsap.to(window, {duration: 2, scrollTo: 400});
Some potential solutions depending on if you're cool with external libraries! :)

Restart Gif when scroll into view

I would like to "restart" a gif from the beginning when I scroll down or up, and come back into view.
So for exemple, my page load, the animation start -> I scroll down or up -> I come back to the div with the gif, the gif has been reset.
I have found this great piece of js in codepen, which is working great when I scroll to the top and come back, but doesn't work when I scroll Down and come back.
https://codepen.io/anon/pen/aWvagO?editors=0010
the code looks like this :
$(window).scroll(function() {
var current = $(this).scrollTop(),
path = '//cdn.pbrd.co/images/5QABxgAp7.gif',
visible = $('img').css('opacity') != 0;
if (current > 200) {
if (!visible) $('img').attr('src', path).fadeTo(400,1);
}
else if (visible) $('img').fadeTo(0,0);
});
Is there a simple way to make it work and keeping the code simple like this ?
Thanks a lot
I might be too late and this might be a bad solution. However, I solved a similar problem by having two duplicated gifs and alternating between the two when 'restarting' the gif. This seamlessly restarted the gif when needed, and technically it was the same gif. Hope this helped, Good luck!

How can I stop a CSS animation on scroll?

I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls.
Normally I could do something like this:
jQuery(window).scroll(function() {
jQuery('.arrow').css("display", "none");
});
However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working.
Is there a way to hide the animation that is not based on scrolling detection?
http://codepen.io/sol_b/pen/ORGKbP
Thanks.
EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.
You can do the following in your jquery.
jQuery(window).scroll(function() {
document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});
This will stop your animation while scrolling, but this will cause an issue that the animation won't be played when the scroll is stopped. Fot that you can use this function
$.fn.scrollStopped = function(callback) {
var that = this, $this = $(that);
$this.scroll(function(ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
});
};
And then on scroll stop you can start the animation again.
$(window).scrollStopped(function(ev){
document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});
If the plugin, that allows horizontal scrolling, has an official documentation, you should look for a callback method. Like when the users is scrolling this called gets called. In the callback you could then hide the arrow (or .fadeOut() imo)...
I was able to fix this by replacing 'window' with my content wrapper. Like this:
jQuery('#wrapper').scroll(function() {
jQuery('.arrow').css("display", "none");
});

.animate(); in Javascript is Freezing for a second

I am having problems with .animate() in Javascript. I am using it to automatically scroll to an element in a div whitch is working. The problem I have is that after a few milliseconds the scrolling freezes for a second or so and then continues at that point where it should already had animated to and then it continues animating without any problems.
The scrollable div contains about 36 divs with the width of 75 px and in the background is a dynamically generated SVG graph. To animate the div I using
parent.stop(true, false).animate({
scrollLeft: offsetToLeft
}, 50*Math.abs(elementsToSkipp), function (element, index) {
//Show highlight the element and refresh data
return false;
}.bind(this, forecastElement[0], index));
The return false; and .stop(true, false) is from Stackoverflow, but it did not really fixed my issue. Help is very appreciated.
EDIT:
I only experience this lag on mobile devices (iOS, Android), there is no such lag on a Desktop PC.
Thanks,
David
it sounds like you are running your animation as a response to a scroll event. here is a post wich solves this kind of problem (including code): Jquery slow reaction time

Disable page scroll until page loads - JQuery

I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).
I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?
If you want to fade in when all images are loaded, you can try this
var images = $('img');
var images_nbr = images.length;
images.load(function() {
images_nbr--;
if (images_nbr == 0) {
$('body').css('overflow','auto');
$('...').fadeIn();
}
});
Set
#mydiv {
overflow:hidden
}
in your parent div in CSS. Then, in your document, add this...
$('#mydiv').css('overflow', 'auto');
...in the function that fades in your content.
Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.
.scrolldiv{
overflow:hidden;
}
$(window).load(function(){
$(".scrolldiv").css("overflow","auto");
});
You can try like,
initially add the below css on body
body {overflow:hidden;}
and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like
$('body').css('overflow','auto');

Categories