Develop Reference

Animate image left to right on scroll

What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them.
I tried this javascript for it (totally new to JS)
$(window).scroll(function(){
if($this.scrollTop()>300)
{
$('.onfoot1').slideright();
}
function slideright(){
var a = getElementsByClassName('.onfoot1');
var stoppos = 100;
if (parseInt(a.style.left)< stoppos )
{
a.style.left = parseInt(a.style.left) + 3 + "px";
setTimeout(slideright , 1);
}
}
});
Markup
<div class="onfoot1"></div>
CSS
div.onfoot1{
content:url(../img/onfoot1.jpg);
left:0;
}

I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/
I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.
EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/

SnapJS Mobile Menu Positioning

I'm trying to setup a Wordpress starter theme with an out-of-the-box mobile menu. I'm using SnapJS to create a slide out menu.
It's working fairly well - almost perfectly but I've run in to one issue that I just cannot fix.
You can find the menu in it's current state here: http://sandbox.benpalmer.me/flow/test/
The problem is that if you scroll down the page (in a browser width less than 700px) then hit the menu button, the menu will slide out but the content (in #wrapper) will jump back to the top.
I know precisely why this is happening - the positioning switches to fixed with a top set to 0px.
I've got the following JS setup:
snap.on('open', function() {
wrapper.css({
'top': '-' + $('body').scrollTop() + 'px'
});
});
This almost does what I need but it basically jumps to the top and then scrolls down to this position.
I'm fairly sure in saying that this animation is coming from Snap but I'm really not sure what to remove or alter. Or even if there is a simple way to disabled this from happening?
Any help would be hugely appreciated! Thanks!

I found the offending line in SnapJS and fortunely it means that to fix this, I didn't have to edit SnapJS itself.
settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing;
The fix was to set the transitionSpeed setting to 0. Now it still applies the transition but as it's set to 0 it's obviously not noticeable.

How to make carousel smooth scroll to top when next slide and use 'hand carousel'

I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks

You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);

Why does .animate to scrollTop jump to 0 before animating?

I am playing with Parallax scrolling like on that nike site. So I have been using scrollTop to determine the user's vertical position on the page and then I've been adjusting element's positions based on the changes to that value.
Here I round the scrollTop value and log it. I'll show the log later.
var distance = 60*(Math.round($(window).scrollTop()/60));
console.log(distance);
Then, on click, I call this function which scrolls to the scrollTop value that I've passed it.
function goTo(n){
console.log('begin animating');
$('html,body').animate({scrollTop: n},2000);
}
Here's the problem, the scroll top value jumps to 0 before animating.
So I'll be halfway down the page and it logs:
begin animating
0
6240
6180
6120
// etc...
The way I'm positioning stuff relies on the accuracy of the scrollTop value. So my question is:
How can I keep the scrollTop value from jumping to 0 before going through with the animation?
Let me know if theres any more info needed.
Heres the live version of the site: http://theblueeyeguy.com/moon/Illumination/
(click 'Next' then 'Prev' to break it)

Probably because you're using a link with href="#".
Add return false; to your onclick attribute.
< Prev |

Animate a div after scrolling away from the top of the webpage

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/