I want to create an animation where with scrolling background image of the Website changes. Changing happens with a fadeIn and fadeOut effect, But fading effect happens multiple times due to scroll function.
JSFiddle
Jquery Code:
var styles01 = {"background" : "url(https://iso.500px.com/wp-content/uploads/2016/02/cover.jpg) fixed",
"background-size":"cover"};
var styles02 = {"background" : "url(http://www.mybligr.com/wp-content/uploads/2017/02/beautiful-lake-wallpaper-nature-photos-pics-images-pictures-16.jpg) fixed",
"background-size":"cover"};
var styles03 = {"background" : "url(https://cdn.fodors.com/ee/files/slideshows/9-derwent-water-lake-district-england.jpg) fixed",
"background-size":"cover"};
$(window).scroll( function() {
if ($(window).scrollTop() >= 50 && $(window).scrollTop() <= 150) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles01);
$(".wrap").fadeIn(200);
}
if ($(window).scrollTop() >= 150 && $(window).scrollTop() <= 250) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles02);
$(".wrap").fadeIn(200);
}
if ($(window).scrollTop() < 50) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles03);
$(".wrap").fadeIn(200);
}
});
It appears to be a timing issue, because you're trying to re-style and re-fade before the initial fade-out is done. This is an asynchronous operation:
$(".wrap").fadeOut(200);
So anything that needs to happen after this operation should be placed in its callback, not placed immediately after this line of code. Something like this:
$(".wrap").fadeOut(200, function () {
$(".wrap").css(styles01);
$(".wrap").fadeIn(200);
});
Updated fiddle.
Related
I'm trying to replace the logo image in heading of the page when scrolling, with fade effect. It starts working in the correct way, and the image replacement is done but while you continue scrolling down the site, the new logo continues fading.
Here's my code:
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar-fixed-top").addClass("nav-scrolled");
$('#logo').fadeOut('',function(){
$(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
});
}
else{
$(".navbar-fixed-top").removeClass("nav-scrolled");
$('#logo').fadeOut('',function(){
$(this).attr('src','Template/images/logo.png');
});
}
})
})
You can see it in www.ultramarinosvillena.com
How could I fix it?
EDIT: sorry, my mistake - first thinking then posting. ;) One of the conditional statements was triggered with each scroll event - now it will only be triggered once, when the scrolling point is reached.
You should check the nav-scrolled class:
$(document).ready(function(){
var $navbar = $(".navbar-fixed-top"),
$logo = $("#logo"),
currentScroll;
$(window).on('scroll', function(){
currentScroll = $(window).scrollTop();
if ( currentScroll > 100 && !($navbar.hasClass('nav-scrolled')) ) {
$navbar.addClass("nav-scrolled");
$logo.fadeOut('',function(){
$(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
});
} else if ( currentScroll < 100 && $navbar.hasClass('nav-scrolled')) {
$navbar.removeClass("nav-scrolled");
$logo.fadeOut('',function(){
$(this).attr('src','Template/images/logo.png').fadeIn();
});
}
});
});
I have a project I'm working on with a site that receives information and displays it in a table. If the table is larger than the screen, the page will automatically scroll down, and when it hits the bottom, back up, and repeat, repeat, up and down.
The issue I'm having is that every time I send a chunk of data to the site, the speed of the scrollBy increases. Every refresh scroll incrementally faster, up and down.
Here is the code:
window.onload = function() {
...
buildHeader(event);
buildTable(event);
};
function buildTable(event) {
...
if((+tableHeight) > window.innerHeight){
pageScroll();
}
}
var scrollDirection = 1;
function pageScroll() {
window.scrollBy(0,scrollDirection); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',50); // scrolls every 50 milliseconds
if ( (window.scrollY === 0) || (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
scrollDirection = -1*scrollDirection;
}
}
I would like to know why each time the page is sent information the speed increases. Isit necessary to cancel an occurring scrollBy before calling it again?
Any help would be greatly appreciated.
Thanks
Josh
Yes, it is. If you call scrollby twice, it will scroll twice. You have a self-calling timeout, which means that it would repeatedly call the function. The timeout is async, and won't be cancelled just because something changed.
Luckily, setTimeout returns an ID that you can pass to clearTimeout().
So you can do something like this:
var currentTimeout;
function buildTable(event) {...
if ((+tableHeight) > window.innerHeight) {
window.clearTimeout(currentTimeout);
pageScroll();
}
}
function pageScroll() {
window.scrollBy(0, scrollDirection); // horizontal and vertical scroll increments
currentTimeout = setTimeout('pageScroll()', 50); // scrolls every 50 milliseconds
if ((window.scrollY === 0) || (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
scrollDirection = -1 * scrollDirection;
}
}
Here's a simpler example to demonstrate the behavior. jsFiddle example.
i was working on a galery where when the user scrolls and reaches a thumb certain background action occurs.
Now did this coding and i am able to get the result but somehow i am confused as it only works one time and then when i again scroll to that position it does nothing.
I am using alert boxes to reach 5th and 7th thumb and it only shows message once.
I am using something like this
$(document).ready(function () {
// Thumb 1
var thumb4Target = $("#myImg1").offset().top;
var interval = setInterval(function () {
if ($(window).scrollTop() >= thumb4Target) {
alert('1nd Image Position Obtained');
clearInterval(interval);
}
}, 0);
//Thumb 2
var thumb4Target2 = $("#myImg2").offset().top;
var interval2 = setInterval(function () {
if ($(window).scrollTop() >= thumb4Target2) {
alert('2nd Image Position Obtained');
clearInterval(interval2);
}
}, 0);
});
check this Fiddle
LINK
Please tell me where i am doing wrong.Thanks.
Use scroll event instead of interval. LIVE DEMO 1 Or LIVE DEMO 2
$(window).scroll(function()
{
var thumb4Target = $("#myImg1").offset().top;
var thumb4Target2 = $("#myImg2").offset().top;
if ($(window).scrollTop() >= thumb4Target) {
alert('1nd Image Position Obtained');
}
if ($(window).scrollTop() >= thumb4Target2) {
alert('2nd Image Position Obtained');
}
});
I'm trying to have my content fade in when reaching a certain proximity to to respective ends of the page. The fade works fine when the trigger is set to the very top and bottom but when I set a distance (200px) the fade no longer works and the content simply appears.
$(window).scroll(function(){
if($(window).scrollTop()<=200){
$('#about .content').stop(true,true).fadeIn("5s");
}
else {
$('#about .content').stop(true,true).fadeOut("10s");
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
$('#work .content').stop(true,true).fadeIn("5s");
} else {
$('#work .content').stop(true,true).fadeOut("5s");
}
});
What is happening is that you have two functions working against each other:
The first function has an "if-else" statement and the second function as well.
That means that each function does something EVERYTIME you scroll.
There are multiple ways of solving this.
The way I would solve it is using a variable and updating the constraints.
Let's say we have a variable onScreen that has value 1 if the paragraph is on the screen and value 0 if it isn't:
For example:
<div style="height: 800px">Example of scroll with fadeIn, fadeOut.
<p style="margin-top:300px;">These paragraphs will go away when you have scrolled
more than 10 pixels from the top. They will appear again when you have scrolled
to a proximity of 50 pixels from the bottom. They will also appear if you go
within a proximity of 10 pixels of the top again.</p>
</div>
Now for the jQuery code:
var $onScreen = 1;
$(window).scroll(function(){
if($(window).scrollTop() < 10){
if ($onScreen == 0)
{
$("p:first").stop(true,true).fadeIn("slow", "linear");
$onScreen = 1;
}
}
if($(window).scrollTop() <= 20 && $(window).scrollTop() >= 10){
if ($onScreen == 1)
{
$("p:first").stop(true,true).fadeOut("slow", "linear");
$onScreen = 0;
}
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
if ($onScreen == 0)
{
$("p:first").stop(true,true).fadeIn("slow", "linear");
$onScreen = 1;
}
}
});
Now this is not the most concise way of doing it and I didn't mean to do so: by making the code a bit more extensive I hope you can follow why it works now and didn't work before (such that you actually learn from it).
I prepared a live example for you on Fiddle: http://jsfiddle.net/ycCAb/4/
I hope this answers your question. Good luck!
This is a follow-up post to a previous question: jQuery - scroll down every x seconds, then scroll to the top
I have refined the scrip a little further, but am having a little trouble with the last step.
I have a div that automatically 50px at a time until it reaches the bottom, at which point it scrolls to the top and starts again. I have this working perfectly thanks to the above question and with a little add work.
I need to make all scrolling stop when the div is hovered. I have done part of this already (there is no incremental scrolling down on hover) but I cannot get the full picture. The div will still scroll to the top even when hovered.
Here is my jQuery and a fiddle to go along with it: http://jsfiddle.net/wR5FY/1/
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0 && dontScroll == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
$('#scroller').bind('scroll', function () {
if (dontScroll == 0) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
}
}
});
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});
In the fiddle, try hovering the scroller div when the yellow square is visible. You will see that it scrolls to the top.
A couple of notes:
You will notice I have used mouseenter and mouseleave rather than hover and mouseout. This was the best way I could find to ensure all child elements within the div didn't have an adverse affect.
A potential problem area is the fact that I have binded to the scroll event for my function that scrolls to the top. I think this might cause some additional problems when a user is manually scrolling through the items, with my jQuery trying to scroll against the user.
I did a little experimenting with killing setInterval, but I didn't find this to be very helpful as the function that triggers isn't the problem area.
My overall goal here is to lock down all automatic scrolling when a user is hovering or manually scrolling through the list. This is 90% there. If they happen to scroll to the bottom, NOTHING should happen until they move the mouse elsewhere - this is the problem.
Keep it easier ;)
The problem was that you first evaluate wheter dontScroll is zero, then start the timer.
When the timer has ended, it doesnt evaluate anymore, whether dontScroll STILL is zero.
Just pulled that into your scrollIt function:
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 2000);
function scrollit() {
if(dontScroll == 0){
if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
} else if(scrollingUp == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
}
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});