I try to use the jQuery for my header animation, the animation slows down after I added:
else if (headeranimated && $(this).scrollTop() > 1200)
else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000)
I have to wait a couple of seconds for the second part of animation. Is there anything wrong with this code?
Thank you
// header animation
var headeranimated2 = false;
var headeranimated = false;
var headeranimated3 = false;
$(window).scroll(function() {
if ($(window).width() > 800) {
if (!headeranimated && $(this).scrollTop() > 500) {
$('#headerpattern').animate({
left: "-40%"
}, 800);
headeranimated = true;
} else if (headeranimated && $(this).scrollTop() > 1200) {
$('#headerpattern').animate({
top: "-20%"
}, 200);
headeranimated2 = true;
} else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000) {
$('#headerpattern').animate({
top: "0"
}, 200);
headeranimated2 = false;
headeranimated3 = true
} else if (headeranimated3 && !headeranimated2 && $(this).scrollTop() < 400) {
$('#headerpattern').animate({
left: "0"
}, 800);
headeranimated = false;
headeranimated3 = false;
}
} else {
if (!headeranimated && $(this).scrollTop() > 500) {
$('#headerpattern').animate({
top: "-8%"
}, 1200);
headeranimated = true;
} else if (headeranimated && $(this).scrollTop() < 400) {
$('#headerpattern').animate({
top: "0"
}, 800);
headeranimated2 = false;
}
}
});
well.. you are calling the scroll listener which occurs evry moment while you are scrolling. but you also play an animation which is relatevly slow to scroll. when you call the scroll listener by scrolling, you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).
the solution: if animation still played - don't scroll
var animScroll;
$(window).scroll(function()
{
if (animScroll) return;
if ($(window).width() > 800)
{
if (!headeranimated && $(this).scrollTop() > 500)
{
animScroll = true;
$('#headerpattern').animate({ left: "-40%"}, 800, function()
{
animScroll = false;
});
headeranimated = true;
}
// rest of code
A scroll even is an event the is emitted continuously while scrolling, so it will be triggered multiple times a second while you are scrolling.
Whenever you call .animate for an element, the animation is added to a queue. And the animations are executed one after the other, in the order they where added to the queue. As your animations have a duration of in a range of 200 to 1200 you might result in an animation queue that has a duration of several seconds.
One solution would be to call .stop() before you call .animate:
$('#headerpattern').stop().animate(....)
But this might break your desired effect.
Another solution would be to check if there is an animation that is currently running and if so, then do not start a new animation. But this will have some kind of stop and go or delay effect.
Related
I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
ยดยดยด
I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});
I have the following Javascript code:
$(window).scroll(function() {
if (window.innerWidth <= 768) {
let scrollStatus = $(this).scrollTop();
if (scrollStatus > lastScrollTop) {
//do some stuffs
else
//do some other stuffs
lastScrollTop = scrollStatus;
}
});
So it worked well with non-mobile devices and Android devices. However, when I ran that on iOS's Safari and scroll to the topmost, it drags down the viewport by a little bit before bouncing up back when I release my finger hold. That bounce back up is detected by the above Javascript code as scrolling up and causes the trigger on the else section, which is undesirable. How do I fix this?
Before bouncing back Safari overscrolls the Y-Position into negative land. You can use this to ignore position changes from the bounce animation.
The window scroll event fires very rapidly. For performance reasons you don't want to handle these events directly.
The example below shows how to check in 250ms intervals whether the user has scrolled, which is easy on performance.
var didScroll = false;
$(window).scroll(function() {
didScroll = true;
});
// interval scroll handler
setInterval(function() {
if ( didScroll ) {
didScroll = false;
scrolled();
}
}, 250);
var lastScrollTop = 0;
function scrolled() {
var scrollStatus = window.pageYOffset;
if (scrollStatus < lastScrollTop) {
//user scrolled up
} else if ( lastScrollTop >= 0) {
//user scrolled down
}
lastScrollTop = scrollStatus;
}
Alternatively you can alleviate performance issues by resetting a timeout that only calls the scrolled() function after scrolling has finished.
var timer;
$(window).scroll(function() {
if ( timer ) clearTimeout(timer);
timer = setTimeout(function(){
scrolled();
}, 100);
});
var lastScrollTop = 0;
function scrolled() {
var scrollStatus = window.pageYOffset;
if (scrollStatus < lastScrollTop) {
//user scrolled up
} else if ( lastScrollTop >= 0) {
//user scrolled down
}
lastScrollTop = scrollStatus;
}
This is what I use to make 2 divs "unwrap" while scrolling:
CSS
.entry {
height: 40px;
}
.entry.expanded {
height:600px;
}
JavaScript
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var x = $(window).scrollTop();
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
});
It works perfectly fine on my 1920x1080p screen but it doesn't on a friend's 1920x1200px because there aren't 820px to scroll..
How can I solve this to work with every resolution? I tried with this, but unfortunately nothing happens:
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $window.height();
var x = $(window).scrollTop();
if (x > 820 || x == availableScroll) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || x == availableScroll) {
$($('.entry').get(2)).addClass('expanded');
}
});
Is there a fancy method, that maybe calculates the pixels from the bottom or some method relative to the vertical res?
Here's the webpage with the code live (you can see the 2 divs unwrapping when scrolling).
In general, avoid the == for scrolling because if the scroll is off by even .0001 it will resolve as false. Also replace $window with $(window).
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $(window).height();
var x = $(window).scrollTop();
if (x > 820 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(2)).addClass('expanded');
}
});
Also, if you want to execute code when the page first loads, use the $(document).ready(handler) pattern.
Your former functions seems to working fine. I am testing it as MacBook Pro. However, at sometime it seems it is not fired at JQuery. What you can do is you can wait for few milliseconds to check if the scroll is finished. If scroll is finished then you can simply check the value of scroll.
Option 1:
jQuery debounce is a nice one for problems like this. jsFidlle
So your modified code will be (you need to use debounce)
$(window).scroll($.debounce( 250, true, function(){
console.log("Still scrolling");
}));
$(window).scroll($.debounce( 250, function(){
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}));
Option 2:
There may be a chance you don't like use JQuery Debounce then you can native approach with timer function. See the code below and you can adjust the timer duration as per your needs.
It is simply waiting for scroll event to be finished and wait for certain milliseconds before it scroll event recalled. If scroll refires then it simply clear the timer and start waiting again. If timer is finished then it executes the method you have stated.
$(window).scroll(function() {
var timerDuration = 250; // In milliseconds
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}, timerDuration));
});
i've added this script that scroll down 100% with mouseweel at once
$(document).ready(function () {
var divs = $('.mydiv');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
But i need to add something on it so the scrolling look smooth , how can i do that ?
Fiddle
You can either specify a duration for your animate function or an easing function to have a different animation behavior.
You can find easing functions and instruction to use theme here :
jQuery Easing Plugin
SOLUTION:
#user3127499 already provided you a working FIDDLE.
He changed the time to 1000 from 100
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 1000);
And added a 1000 delay here:
$('html,body').scrollTop(divs.eq(div).offset().top.delay(1000));
There is a plugin for that:
You will counter many other challenges while recreating the wheel, why don you you simply use this plugin named Scroll Section.
DEMO
My function works 100% when i only scroll a little bit, but when i scroll all the page down and scroll up fast, my opacity:0 take longer or doesn't work at all. Have any idea why ? It is because my function i call to many times ?
$(window).scroll(function () {
var TopValue = $(window).scrollTop();
if (TopValue <= 50) {
$("div.mouseover > p").css('opacity', 0);
} else {
$("div.mouseover > p").animate({
opacity: '1.0'
}, 1000);
}
});
Since your function call is happening multiple times, You have to clear the animation queue before starting another animation, Please read .stop() for further clarifications.
Try this,
$(window).scroll(function () {
var TopValue = $(window).scrollTop();
if (TopValue <= 50) {
$("div.mouseover > p").css('opacity', 0);
} else {
$("div.mouseover > p").stop().animate({
opacity: '1.0'
}, 1000);
}
});