We Keep Coding

Initializing Parallax position values after page refresh

This may well have been asked before but I have an issue with a parallax effect I have deployed on an image slider. On scroll, the background images being used in the slider adjust their position and their opacity.
The problem is if I scroll a short way down the page and then refresh the page, the background position and the opacity revert to their original values, so then scrolling causes a jump in order for them 'catch up' on what their actual values should be.
I'm trying to figure out how I can have the values automatically set no matter what position the page is in when it's refreshed.
Here is the code that I have currently
//HomepageParallaxFade
window.addEventListener('scroll', function () {
var scrollPosition = window.pageYOffset;
var bgParallax = document.getElementsByClassName('carousel-cell');
Array.prototype.forEach.call(bgParallax, function (el) {
var limit = el.offsetTop + el.offsetHeight;
if (scrollPosition > el.offsetTop && scrollPosition <= limit) {
el.style.backgroundPositionY = (50 + 90 * scrollPosition / limit) + '%';
el.style.opacity = (1 - 1 * scrollPosition / limit);
} else {
el.style.backgroundPositionY = '50%';
}
})
});
Happy to provide a JSFiddle if necessary. All help much appreciated

You can do parallax with pure css.
https://www.digitalocean.com/community/tutorials/css-pure-css-parallax.
From there, when you refresh if you set the scroll position with javascript, the parallax will just work.

Parallax effect white space

My parallax effect adds white space to the top of the page, when scrolling.
My JavaScript:
<script>
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.bg').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
</script>
No scroll:
When scrolling:

This code adds a vertical offset in pixels on scroll so it goes right: when the image shifted down there is nothing to display at the top so you need to set background-repeat or control the offset value and avoid to set new value after it goes out of bounds. And also you need to multiply scrolledY value by -1 to makes image on a background moving up on a page scroll down like in a parallax effect.
$(window).scroll(function() {
var scrolledY = -1 * $(window).scrollTop();
$('.bg').css('background-position', 'left ' + (scrolledY) + 'px');
});
Also you can control the speed of background offset by division of vertical value by two or something like that. Here is an example: https://jsfiddle.net/panamaprophet/9pkrxjh0/

Parallax Effect Adjustment for individual DIVs

I created a parallax effect, as it was described here:
Is there a way to make parallax work within a DIV
This method works pretty well, but I have a problem with it. My page is basically composed of alternating DIVs. White DIVs with text and DIVs with a picture in it, which moves with the parallax effect. This works pretty well, unless, that I have to manually adjust the position of each picture DIV. Here is the code from the header:
<script type="text/javascript">
$(window).scroll(function () {
parallax();
});
function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}
function render(ev) {
var t = ev.scrollTop;
var y = Math.round(t * 2/3) - 100;
$('#ff-section01').css('background-position', 'center ' + y + 'px');
$('#ff-section03').css('background-position', 'center ' + (y - 1000) + 'px');
$('#ff-section05').css('background-position', 'center ' + (y - 1700) + 'px');
$('#ff-section07').css('background-position', 'center ' + (y - 2750) + 'px');
}
</script>
As you can see, each section got another vertical position in the background-position value at the bottom. 0, 1000, 1700, 2750. This works well so far, but as soon as the intermediate Text DIVs change in height, this method doesn't work, as the value is always calculated from the top of the page. The HTML of one section looks like this:
<div class="ff-section03" id="ff-section03"></div>
So very simple, and combined with the CSS:
.ff-section03 {
width: 100%; height: 550px;
position: relative;
background: url('system/urbansolutions.jpg') center -300px no-repeat;
}
Also very simple. What can I do, that the calculations are not dependent of the page height? I basically don't want to subtract a superficial number from the background-position, so that the parallax effect works, not dependent of the location on the website.
Thanks a lot!
Sebastian

Covering the first element or block of the page when scrolling downwards

I wanted to achieve an effect like this http://www.offset.com/
as you can see when it scrolls it slowly covering the carousel rather than scrolling with it.
I've tried using background fixed but the problem is the elements inside it will not stay in its position
Maybe there is a good technique in achieving this, Thanks

this is called parallax scrolling here is an example of how to do this using Jquery :
Live Demo
// Y axis scroll speed
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
an other example it might help DEMO

Parallax background image for top-bottom and not right-left

I wrote a script that changes the BG position as you scroll down, its works good for left and right positions but i cant seem to reach the syntax that will allow me to parallax the background-position top or bottom - instead of right and left.
here is my code:
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position',(scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}

The css attribute background-position has two values, #horizontal #vertical.
See: http://www.w3.org/wiki/CSS/Properties/background-position
Consider something like:
function parallax(){
var scrolledTop = $(window).scrollTop();
var scrolledLeft = $(window).scrollLeft();
$('section.intro .custombg').css('background-position',(scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
Also, this seems like it will add the scroll event every time the parallax method is called. To correct this, you could try:
function parallax(top, left) {
$('section.intro .custombg').css('background-position',(left * -0.2) + 'px ' + (top * -0.2) + 'px');}
} // end function
$(document).ready(function() {
$(window).scroll(function(e) {
parallax($(window).scrollTop(), $(window).scrollLeft()); // call the method
});
});

This is all wrong, you are setting up an event handler each time you use $(window).scroll(). You only need to do that once. Try this.
var scrolledTop,
scrolledLeft,
background_position,
$custom_bg;
function parallax(){
scrolledTop = window.scrollY,
scrolledLeft = window.scrollX,
background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');
console.log('background_position', background_position);
$custom_bg.css('background-position', background_position);
}
$(function() {
$custom_bg = $('section.intro .custombg');
$(window).on('scroll', parallax);
});

try
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position','center ' + (scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}

If you're looking to do more with parallax and change other properties as, I'd highly recommend the Skrollr library (https://github.com/Prinzhorn/skrollr).
You can vary almost any CSS property as you scroll, giving you more options than just background position or something else. It might be more than you're looking for, but it's pretty lightweight and has mobile support, too (which you could have trouble accounting for without a well-developed library). Hope it helps!
For example, if you wanted to shift the background-position of a background image, you could simply do the following:
initialize skrollr (in this case without options, but there are parameters you can set)
<script type="text/javascript">
var s = skrollr.init();
</script>
Then, you're able to use simple data-tags to tell Skrollr which elements you want to make fancy and which you don't. In your case, you could do something vaguely like the following:
(whatever element you want to use parallax on)
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
WOOOT
</div>
However, you'd swap background-color out for background-position
<div data-0="background-position: 0px 0px" data-700="background-position: 0px 100px"> </div>
or
<div data-0="background-position: top center" data-700="background-position: bottom center"> </div>
You can use any of the accepted CSS background-position keywords.
Useful:
https://github.com/Prinzhorn/skrollr