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);
}
});
Related
i'd like to limit scrolling on my webpage to divs/sections whatever.
Like limiting the scroll step to the screen-height.
If a user scrolls whether it is with a mouse-wheel or a mac 2-finger-scroll.
He should scroll automatically to the next section or the previous one.
Example pages: Jenny Example FLPNY Example
I have already found a function here, to limit listening to the scroll event (debounce). I just can't figure out how no to get a random scroll behaviour.
function debounce(func, interval) {
var lastCall = -1;
return function () {
clearTimeout(lastCall);
var args = arguments;
lastCall = setTimeout(function () {
func.apply(this, args);
}, interval);
};
}
$(window).on('wheel', debounce(function (e) {
currentScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
var delta = e.originalEvent.deltaY;
if (delta > 0) {
console.log("down");
$("html, body").animate({
scrollTop: nextSection
}, 500);
}
else {
console.log("up");
// this will search within the section
$("html, body").animate({
scrollTop: prevSection
}, 500);
}
Not quite sure what you mean by:
I just can't figure out how no to get a random scroll behaviour.
But the site you link is making use of fullPage.js.
I would like to scroll up or down the window while the mouse is over a specific element.
What I have so far basically works but it's not "smooth". It starts and stops on and on, not looking nice. Do you have any idea how to make a more constant smooth scrolling?
This is my code:
doScroll = 0;
$(".helperDown").mouseenter(function() {
scrollHandler = setInterval( function() {
console.log('scrolling down...');
if(doScroll == 0) {
doScroll = 1;
$("html, body").animate({scrollTop: fromTop+50}, 200, 'linear', function() {
doScroll = 0;
});
}
}, 200);
});
$(".helperDown").mouseleave(function() {
clearInterval(scrollHandler);
});
.helperDown is the area where the mouse has to be in to start scrolling. fromTop is always recalculated after a scroll event.
You can not start a series of animation and expect a smooth scrolling. What you need is to start one animation only by pre-calculating the distance this animation will cover. Also, jQuery has a nice wrapper for mouseenter and mouseleave -combined. It's the hover() function with two functions as its parameter. The following code block will solve your issue.
Also, this plnkr has both the up and down scroll feature:
https://plnkr.co/edit/WoneJ8?p=preview
$(function () {
// change this value as per your need
var distancePerSec = 1000;
$(".helperDown").hover(function () {
var h = $("body").height();
var targetScrollTop = h - $(window).height();
var distanceToTravel = targetScrollTop - $(window).scrollTop();
var animationDuration = (distanceToTravel / distancePerSec) * 1000;
$("html, body").animate({
scrollTop: targetScrollTop
}, animationDuration, 'linear');
}, function () {
// stop the animation
$("html, body").stop();
});
})
I am experiencing extreme lag issues with my javascript code. Especially parallaxing is very slow. I expect that this results from multiple executions of the functions. Here is my code:
function tada() {
$(".arrow").addClass("tada");
setTimeout(function () {
$(".arrow").removeClass("tada");
}, 1000);
}
var j = 0;
function thumb() {
if(j < 18) {
setInterval(function () {
$('.equip-thumb').eq(j).css('opacity', '1');
j++;
}, 100);
}
}
$(document).ready(function(){
for (var i = 0; i < 18; i++) {
var color = "#1b1f25";
if ((i%3) === 0) {
color = "#1b222c";
}
if ((i%3) === 1) {
color = "#171c23";
}
if ((i%3) === 2) {
color = "#2a313b";
}
$('.equip-thumb').eq(i).css("background-color", color);
}
});
var fired = 0;
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wHeight = $(this).height();
$(".arrow").css({
'opacity' : 1-wScroll/wHeight/0.5
});
$("#splash").css({
'transform' : 'translate(-'+ wScroll /10 +'% , 0px)',
'opacity' : 1-wScroll/wHeight/0.5
});
if(wScroll > ($('.section-equipment').offset().top - 0.6*wHeight)) {
if (fired === 0) {
fired = 1;
thumb();
}
}
});
$(function() {
setInterval(function () {
tada();
}, 4000);
$('.equip-thumb').on({
mouseover: function(){
$(this).children().css('transform', 'translate(0px, 0px)');
},
mouseleave: function() {
$(this).children().css('transform', 'translate(0px, 100%)');
},
click: function(){
$(this).siblings().children().css('transform', 'translate(0px, 100%)');
$(this).children().css('transform', 'translate(0px, 0px)');
}
});
$('#portfolio-a').click(function (){
$('html, body').animate({
scrollTop: $('.section-portfolio').offset().top - 65
}, 1000);
});
$('#equipment-a').click(function (){
$('html, body').animate({
scrollTop: $('.section-equipment').offset().top - 65
}, 1000);
});
$('#contact-a').click(function (){
$('html, body').animate({
scrollTop: $('.section-contact').offset().top - 65
}, 1000);
});
});
How could I improve it?
You should contemplate using requestAnimationFrame for animation, as the browser will invoke your callback before each repaint, thus it's a better guarantee that animations will be in sync with your monitor's refresh rate, Also, some browsers will make optimisations which ultimately result in more performant code.
Aside from the answers surrounding your use of setInterval, your scroll event callback could be wrapped in an invocation of requestAnimationFrame:
$(window).scroll(function () {
requestAnimationFrame(function (lastUpdate) {
var wScroll = $(this).scrollTop();
var wHeight = $(this).height();
$(".arrow").css({
'opacity' : 1-wScroll/wHeight/0.5
});
});
});
The lastUpdate parameter is a timestamp representing when queued callbacks begin to fire, so you could even use this to throttle your logic.
The code below will run forever. Because j < 18 initially, it will execute the setInterval function. However, there is nothing that is stopping the function from ending. Therefore, you are executing $('.equip-thumb').eq(j).css('opacity', '1') 10 times a second forever!
setInterval(function () {
$('.equip-thumb').eq(j).css('opacity', '1');
j++;
}, 100);
In order to fix this, you should create a for loop instead (to keep things simple) and use setTimeout instead of setInterval. I hope this helps!
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.
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