I am developing a image gallery and was successful up to doing the scrolling. Images slide left and right when the mouse scrolls up and right respectively. I used animate({"top","left"},500) to animate images as sliding. But my problem is that when the mouse scrolls two or more times at once it takes 1000ms to complete because on each scrolling animation is called.
Is there any way to speed up the image animation with respect to mouse scroll speed?
I can't give you any code because I don't whether this can be done. ANY SUGGESTION ON HOW TO IMPLEMENT THIS?
EDIT
posn is an array with top and left, var posn = [{x:"50%",y:"50%"},{x:"40%",y:"70%"},{x:"30%",y:"90%"},{x:"30%",y:"10%"},{x:"40%",y:"30%"}];
$("#photo0").animate({"top":""+posn[0].x,"left":""+posn[0].y},500);
$("#photo1").animate({"top":""+posn[1].x,"left":""+posn[1].y},500);
There are 5 photos with #photo2,#photo3,#photo4
You can debounce the scroll callback so that it isn't fired as frequently while scrolling. If you make sure it only fires every 500 ms (the same duration as your animation) the two should line up nicely.
Related
I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
Situation: I'm using skrollr.js for a home page, and in that I'm using 3d transformations to simulate scrolling by translating the .panel divs into the viewport instead of the viewport moving to the fixed divs. I'm not using a helper class to enable the scrolling either.
JSFiddle: http://jsfiddle.net/5c9tgj4y/13/
<div id="panel-2" class="panel" data-0="transform:translate3d(0%,100%,0)" data-200p="transform:translate3d(0%,0%,0)"></div>
Current Behavior: The user has the ability to scroll the second panel up over the first directly after the page is loaded.
Wanted Behavior: I would like a delay on the second panel's transition translation, making the user unable to scroll until a certain amount of time has passed.
It is best if you imagine the first panel as a slideshow, and we want the user to wait until after the slideshow is finished to begin scrolling.
At this point I'm not going to be picky about how you solve this problem. However you know how, show me.
How about a very basic timeout?
window.setTimeout(function() {
var s = skrollr.init();
}, 2000); /* Wait 2000 ms before initializing the skrollr plugin */
I am using fullPage.js for a one pager website. It works beautifully. It has support for scrolling through full page slides at the flick of the scroll wheel, and each slide can also contain a horizontal slideshow, normally triggered at that point by clicking one of the side arrows.
I want to force the user to scroll through that slideshow before they can progress down to the next slide. Does anyone know of a way to allow the slideshow to be triggered with the mouse wheel when scrolling down? Then when it hits the end of that slideshow it scrolls vertical again to the next slide?
You can do it with jquery.mousewheel like:
$('#fullpage').on('mousewheel', function(event) {
if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
else{$.fn.fullpage.moveSlideLeft();}
});
https://github.com/jquery/jquery-mousewheel
Update 2016
Now fullPage.js provides the Scroll Horizontally extension for it.
What you want to accomplish is not that simple to implement in the plugin. Also, I would say forcing the user to follow a path is not consider as a good practice from the user experience point of view.
Also, what should happen once the user reach the next section and then scrolls up? Should he follow all the way back throw the slides of the previous section again in order to keep moving up ?
Anyway, if you want to accomplish it by your own, you would need first of all, to avoid the auto scrolling behavior when scrolling withing your slides (or the section slides for which you want to apply this).
And then, you would need to change the scrolling behavior to trigger the action to go to the next or to the previous slide by triggering the control arrows events depending on the scrolling direction.
Once the end of the slider is reached, you would need to add again the auto scrolling even.
It really doesn't sound simple if you want to do it by your own. You would need to recode the plugin.
I am building an infinite scroll component for a web page that needs to work on iPad.
So - when the user scrolls to the bottom of a list, we load more content and display an animated ajax loader image while it's loading.
I have managed to get this to work to a point by using the touchmove event to measure page scroll position and load content when required. But - when we are scrolling the page, any animated gifs (or css animated icons) stop animating (presumably to reduce load on the gpu).
I have however found a way around this - if I create an element with overflow:scroll on it, I can put all my contents in that and emply the same method of measuring position on touchmove but the animated gifs still continue to animate and I can run javascript functions in the background as well.
But - I also want the scrolling region to have the standard iOS momentum/inertia slow down after scrolling. I have managed to achieve this by applying -webkit-overflow-scrolling: touch to the scroll region.
So - to my question - when I release the scroll element and it gradually slows down, I would like to measure the position of the scrolled element as it auto slows down (if that makes sense). I can measure it as I scroll through the use of the "touchmove" event and I can measure it when the momentum comes to a halt but not during the momentum/slow-down bit.
I can run javascript loops/intervals while it is happening but it seems impossible to acually measure the scroll position of the element as it gradually slows down.
Any ideas?
Thanks
I am using jQuery to slide through some images.
The slide animation is achieved using:
$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition)});
This works fine, however when I reach the final image, and it loops back to the start, this animation will quickly slide through all of the previous elements to display the first (obviously because I am suddenly reducing the left margin).
What code would I need to write in order to allow the transition from last image back to first image to continue being a LEFT slide animation, displaying only the transition from last slide to first (without showing all other slides).
To make things a little more complex, I have left/right buttons allowing the user to move forward/backwards through the slider. These work fine, but it does mean that the solution cannot break these buttons.
Thank you.