Develop Reference

Using javascript to pause background scroll to allow for fixed elements to have slide show

Ok so the effect I am trying to emulate can be found on the nexus 5 site - http://www.google.com/nexus/5/ - when you scroll to the phone section. I've viewed source and looked through the code but there is over 13k lines of js so it was a waste.
Anyways what I did was add a class to fix the position of the images and created a background div that was like 5000px so it would appear to be fixed. The js fixed the position after the screen reached a certain point and then removed the fixed class after the end of the div.
My question is that i know this can be done better than my janky 'hack'. I'd love to hear your thoughts on better implementation.
This is part of the code that adds the fixed class
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".container").addClass("fixed");
}
if (scroll >= 8000) {
$(".container").removeClass("fixed");
}
});

Try this guide:
http://blog.teamtreehouse.com/multiplane-design-with-svgs-and-css-3d-transforms
Demo: http://codepen.io/nickpettit/full/eBCrK
Haven't done something like this before myself however. Also just a note that fixed position elements from my experience act up when viewed on tablet/smartphone.

Fly-in Fly-out effect on scroll jquery css animation

I am trying to make the elements on my site fly-in and fly-out on scroll.
This is the effect I am looking for.
http://nizoapp.com/
The effect in the nizo site is done with jquery, I think
I have tried many different ways to get this effect working, with Skrollr, scrollorama, and jquery animate and with css transitions etc etc etc
I decided to use css transitions as mad by the "css animation cheat sheet" (google it)
After a lot of effort and some borrowed code, I have got it half working, as in, I can get the elements to fly-in on down scroll, but not to fly back out on up scroll.
This is a jsfiddle with it half working
http://jsfiddle.net/mrcharis/Hjx3Z/4/
The code is......
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
$('.box').each(function (i) {
if (isScrolledIntoView(this)) {
$(this).addClass("slideRight");
}
});
});
// this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect,
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
// i figure to put the fly-in code here
}
else {
// and the fly-out code here
}
previousScroll = currentScroll;
});
}());
I have tried using another function (code chunk) to check if the scrolling is down or up, but i can't get it working with the existing code.
Any help to get this working would be awesome
Have a nice day
I will post the solution one day, if I can figure it out, sure someone else would like to know

The trick to knowing whether you're scrolling up or down is not to ask. Make it relational by using the top offset of the elements in question. Then it's as easy as > or <, for the most part.
Though if you do want to get the current direction you could always record the last scroll position and compare it with the current one.
var before = 0;
$(window).scroll(function(event){
var now = $(this).scrollTop();
if (now > before){
//on down code
} else {
//on up code
}
before = now;
});
Like the answer here suggests.
I like to trigger the events based on the screen size and the element position in the screen, so it doesn't matter whether it's up or down, it follows the same rules forwards and backwards. That way instead of asking up or down, it just asks if it's scrolling and executes it accordingly.
If you need me to make changes to my fiddle for you, just let me know what you want to happen. I only made the fiddle because of the horrible job they did on the tympanus.net example. You don't make a tutorial to accomplish a simple task 2 pages of js, that's unnecessary and it doesn't provide any instruction other than "hey, you want to do this? Then copy and paste these things I put together that have no clear course of action, and way too much code to digest quickly". Which doesn't help anyone learn.

After some code borrowing from tympanus.net and using the modernizer library I came up with this.
I tried different approaches as well but all of them turned out to have some flaws in them so I find best approach to be using the sample code and the already provided modernizer JS library.

scrolling effect

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}
]
}

How to slowly move header while user scrolls the page?

I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.

the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top

Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});

Scroll div on pagescroll but stop after certain amount

I have currently got an element to scroll on page scroll and I am looking to get it to stop after around 750px as it currently overlaps the footer on smaller monitors.
I have found a couple of other examples which would require some restructuring of my code which I am trying to avoid, as the various other examples have to have certain divs relevant to eachother in order to stop the scrolling div at a certain point on the page.
My current script is as below and wrks great, only I am unsure as to edit this to stop the div at a certain point:
<script type="text/javascript">
$(function(){
var btn = $('.overview-wrap');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed',top:0,marginTop:0});
}else if(btn.css('position') === 'fixed'){
btn.css({position:'',top:'',marginTop:'20px'});
}
});
});
</script>
Any pointers would be appreciated.

Personally, I hate dealing directly with the DOM for things like position, because it's so variable. Check out the jquery-position library for a nice abstraction on top of the dom.