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.
Related
I have a function that scrolls down/snaps to a div after the user starts to scroll (to avoid them having to manually scroll down to where the main content starts). I have used some GSAP to achieve this, however I don't think that will make much difference with the solution to this problem. However, while this function does exactly what I'd like, It won't then allow the user to scroll back up. It just glitches a little bit, as if I'm fighting with the function to scroll back up. I've tried a variety of answers from all the "run only once questions" on here, but none seem to work in this situation.
I want to basically kill the function after the first time it is initiated, or to tweak the function to only work on the first scroll at the top of the page (though I appreciate this would be much more complicated).
Thank you in advance of any help.
JS:
$(window).scroll(function () {
function headScrollToDiv() {
var dHeight = $(window).height();
if (dHeight >= $(this).scrollTop()) {
gsap.to(window, 0.4, { scrollTo: ".buffer" });
}
}
headScrollToDiv();
});
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;
};
I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.
I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/
I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!
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 trying to do something like this.
http://www.mini.jp/event_campaign/big-point/
What I can't figure out is how to make the animation happen based on the scroll when the scroll hits a specific position. I have similar blocks of content that I only want to animate parts of it based on the scroll and when the block is within the browsers view area when scrolling.
I understand using the scroll event to get the scrollTop position I'm more concerned with how everything else would work.
$(window).bind('scroll',function(e){
var scrolledY = $(window).scrollTop();
});
Anyone can help explain some of this.
Thanks
Just like what MiniGod said in the comment, look in to the source code (animate.js), and you can see that they have recorded all the "scenes" and all other things like alpha and pos for everything.
// scene 1
{
scene:"#scene1",
name:".car",
runStatus:[
{p:10,pos:true,x:275,y:240,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:180,pos:true,x:275,y:200,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:270,pos:true,x:275,y:140,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:500,pos:true,x:275,y:-300,alpha:true,opacity:0,scale:true,orgSize:[475,270],scaleSize:1}
]
}