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.
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.
I need to loop horizontal scrolling of wide block. Also I need to controll scrolling with mousewheel and buttons.
I have created working demo on codepen.
Demo on CodePen
Here I use Endless.JS for loop scrolling (works with 2 divs and more) and jquery.mousewheel for mouse wheel support. Also I write some code for arrows. On hover -> block start scrolling with animation.
animate({scrollLeft:'+=40'}
This method works great with mouse wheel but I got some trouble with arrows. After I have scrolled first few divs other div become blinking and works like artifact in game :) (see demo)
Can you help me? Maybe I need to use some other method or lib?
Thanks a lot.
You should probably avoid jQuery.animate here. Not exactly sure what causes the problem, but using timeouts seems to work fine. That way, you also have more control over the delay and animation speed. http://codepen.io/anon/pen/zGbLB
var timeout;
function loop_next(){
timeout = window.setTimeout(function() {
container.scrollLeft(container.scrollLeft() + 2);
loop_next();
}, 20);
}
function loop_prev(){
timeout = window.setTimeout(function() {
container.scrollLeft(container.scrollLeft() - 2);
loop_prev();
}, 20);
}
function stop(){
window.clearTimeout(timeout);
}
There are many JavaScript or CSS touch swipe sliders out there but all of them seem to only allow either vertical or horizontal swipe of a slide. Is there anything out there that allows both on one slide, so I can swipe horizontally and vertically on one slide?
I'm not 100% sure if this is what you are looking for, but it looks darn close:
iDangero.us Swiper.
http://www.idangero.us/sliders/swiper/
Allows vertical swping boxes within another horizontal carousel/slider. I've been looking for the same thing for awhile, and this is the closest plugin I've found to what I'm looking for. A little hacking/manipulation could probably make it do what you're looking for.
Here is an Easy Way of clreating horizontal and vertical slider
<script>
function MM_effectSlide1(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true});
}
function MM_effectSlide2(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true});
}
</script>
<body>
<div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>
If you look at the Code the only code that should be changed is the MM_effectSlide1, 2, 3, and so forth
You can use fullPage.js to have swipes exactly as you describe, as shown on this demo page.
The only issue I have with fullPage.js is the lack of 1:1 touch movement. So instead of the swipe being controlled as long as you have your finger on the screen, the script has a configurable variable that says once a threshold swipe of X percent of the screen height/width has been met. This works, but doesn't feel nearly as nice as something like RoyalSlider which does have 1:1 touch movement; so if you swipe only 49% of the way you remain on the same section. That said fullPage.js has great support (IE8+) and is updated regularly.
Ideally I'd like fullPage.js to have 1:1 touch movement, the author is open to pull requests but for now my knowledge of javascript is too basic to implement something like this.
An option I am considering at the moment is using two sliders in combination with each other. I am going to use RoyalSlider for the left and right swipes (so you get the nice 1:1 touch) and fullPage.js for the vertical up down effect.