I've managed to modify an animated progress bar to my specific requirements, but would like the additional feature of the animation effect being delayed until that section of the page is scrolled to.
Here is a fiddle of my current setup: Fiddle using the following Javascript:
$(".animated-progress span").each(function () {
$(this).animate(
{
width: $(this).attr("data-progress") + "%",
},
2000
);
});
I've come across a similar post from 8 years ago: Previous Post, but when I try to incorporate this code into my setup, the animation stops working completely.
Can anyone point me in the right direction to achieve the effect I'm looking for?
Thanks
P.S.
To clarify, I would only want the animation to play once. Once all the sliders have slid across, I would want them to stay there.
For how far into the view, I would say around when the bottom item "Copper" appears on the screen.
Related
I'm trying to scroll through my horizontal Bootstrap tabs, however, the scroller goes all the way to the end of the tab list, making some tabs not even visible. So is there a way to incrementally scroll through the tabs until you get to a certain point? (then I'd be fine with it scrolling to the end).
I've googled this subject quite a bit, and all the examples seem to go right to the end of the tablist.
jsFiddle: https://jsfiddle.net/82c4ged0/
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
In the fiddle, with the much smaller window, it's much clearer to see how the scroller goes straight to the last tabs in the list
The way things are currently setup, you're getting the amount to scroll with this variable/function.
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
You'll need to calculate how many pixels to move over on each click. It's roughly -220px which you can put in manually to try it out. You can put that in manually, like below, and see if things behave close to how you want them to.
var widthOfHidden = function(){
return -224;
};
EDIT: Revolution Slider recently updated to Version 5 which by default supports mouse scrolling between slides without the need for additional javascript by the user and I've found it to work flawlessly.
Original Question:
I'm using a full screen Revolution Slider and by using the code found on the developers site I've managed to get the slides to advance using a mousewheel scroll.
The problem is that the slider is advancing more than one slide at a time depending on how much the user scrolls. I need the slide to only scroll once per mousewheel event. I tried using the solution found here but couldn't get it to work: Removing event after one scroll
I'm very new to Javascript so any help is much appreciated.
Here is the code I am currently using
(function() {
var slider = revapi1;
slider.parent().on('mousewheel DOMMouseScroll', function(event) {
if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
slider.revprev();
}
else {
slider.revnext();
}
});
})()
revprev() and revnext() is where moves happen.
Deeper you should find something like speed, steps_length...
I'm using iScroll.js on a project and I'd like to trigger an animation when scrolling past a <div>. I'm a little bit lost as to how to do it, as using iScroll means Waypoints.js doesn't work.
overlayScroll = new IScroll('.overlay', { mouseWheel: true });
overlayScroll.on('scrollStart', scrollFn);
function scrollFn(){
//do something
};
This makes my actions happen when I scroll on top of the .overlay, but I need it to only start after reaching a certain point inside the .overlay. I also want to be able to detect direction so I can reverse the actions if the user scrolls up. Any help would be greatly appreciated.
The carousel (caroufredsel) scroll (check this for example) continously to the left. When I hover to an arrow to the right it will stop scrolling then it will reverse it's direction. I tried using custom events but it appears that it's not working. Here's a code of the carousel.
$('#gallery').carouFredSel({
width: "variable",
auto: {
items : 4,
duration :"40000",
easing :"linear",
timeoutDuration :0,
pauseOnHover :"immediate"
},
items: {
visible: 3
}
});
Now my custom event that will cause the carousel to reverse is direction is like this. But it's not working until the whole items where finished scrolling. What I want to achieve is to instantaneously reverse the direction when hovering.
$('a.prev').hover(function()
{
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}
The code above doesn't work and I've tried different events that will simulate the reversal of scrolling but had no luck with it.
If there's no workaround for this. I'm willing to change another plugin that will easily do the work. If you know something that can do it easily please leave your suggestions. Thank you very much!
That totally depends how the carousel is implemented. A possible solution might be to stop the eventPropagation. It may or may not work depending on the implementation of the carousel.
$('a.prev').hover(function(event)
{
event.stopPropagation();
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}
I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/