We Keep Coding

Gradually fade top of elements only on scroll without fixed background

Not sure if this is even possible, but what I'm trying to do is fade content out as it reaches the header.
I've seen solutions such as this:
// fade content out at top of div before it reaches LD icon and nav
$('.content-block *').each(function (index, item) {
$(item).children().each(function (indexChild, child) {
var st = $(window).scrollTop() - $(child).offset().top + 115;
console.log('st: '+st);
$(child).css({ 'opacity': (1 - st / 1.1) }); // changing the / 1.1 supposedly changes the intensity of the effect
});
});
But this causes content blocks to fade out prematurely on mobile. For instance, the top of the content block will reach the top of the screen, so it fades out, yet the bottom is not visible yet, so they never get a chance to read all the content.
I'm trying to fade out gradually, as if we had a gradient PNG image overlay. However, I'm trying to find a solution that does not require a fixed background, as I'm trying to do this over a live video background.

How do I move the background image of a DIV based on the scrollbar movement?

I have been looking into parallax effects for vertical scrolling on my web page, and after some research, I'm not sure that what I want to do is technically a parallax effect.
From what I've seen, most parallax effects assume you want to be able to scroll indefinitely with many background images rolling by, or with huge images that repeat.
What I want to do is have the background of two DIVs be filled with a background image as the scroll bar reaches the bottom of the page. Note that I do not want the background images to stretch. I'm assuming to get the effect I want that these images would have a vertical height bigger than most people's viewport, and then their vertical position would change. When the user's scrollbar is at the top, a certain amount of the background is visible, and then it moves vertically to fill the background space as the user scrolls down.
Please see the image below for a visual explanation of the effect I hope to acheive:
The height of the veiwport will vary depending on the length of content inside the inner DIV.
My trouble is that if what I am trying to do is not exactly a parallax effect, then I don't know what else to call it, and my attempts to search by describing it keep landing me back at pages offering tutorials on parallax effects. So I've been stumped by a lack of terminology.
If someone could direct me to how I can control the vertical position of the background depending on the scrollbar position, that would be much appreciated. If this can be done with just CSS that would be great, but I'm assuming some Javascript would be required. A jQuery solution would also work for me.
Update:
After searching using the terms provided in comments, I've got the background image in the outer DIV to almost do what I want with the following code:
$(window).scroll(function () {
var yPos = $("#outerDiv").height() - ($("#outerDIV").height() * ($(window).scrollTop() / $(window).height()));
document.getElementById('outerDIV').style.backgroundPosition="0px " + yPos + "px";
});
It moves the background image in the right direction relative to the scrolling, but what it lacks is constraining that motion to within the viewport. Getting the right proportions based on the viewport and DIV sizes is proving to be just a little beyond my mathematical abilities.

For your requirement, you have to use a jquery parallax plugin to guide this activity, my best suggest it to use a Superscollorama and play with the elements as your wish...
As far as your question, Try this example,
controller.addTween(
'#examples-background',
(new TimelineLite())
.append([
TweenMax.fromTo($('#parallax-it-left'), 1,
{css:{backgroundPosition:"(0 -54px)"}, immediateRender:true},
{css:{backgroundPosition:"(0 -54px)"}}),
TweenMax.fromTo($('#parallax-it-right'), 1,
{css:{backgroundPosition:"(0 -54px)"}, immediateRender:true},
{css:{backgroundPosition:"(0 54px)"}})
]),
1000 // scroll duration of tween
);
You serial vice change as far as your wish...
Try practice this plugin, hope that works for you...
http://johnpolacek.github.io/superscrollorama/
Thanks...

Turns out what I want to acheive is possible with no special plugins, just some carefully thought out math. I did use a little jQuery syntax, but I don't think it's strictly necessary.
The code below has copious notes, so hopefully it's largely explanatory. In summary, you just need to find the position of the background image when the scroll would be at the top, and the position it would be if the scroll bar was at the bottom, and then you can use the percentage of the scrollbar's movement to work out where you are between those two points. It's a little tricker than just that, of course, in that you have to account for the difference between the total height of the scroll bar and where your DIV appears on the page and a few other adjustments, but the details of what I did are below.
What I've done here is just for the "outer DIV" that I described in my question. To get a background to move like the "inner DIV" I described, you'd have to modify the code, presumeably by reversing a few parameters. I haven't done that yet, but it seems like a straightforward task.
Hope others find this code useful. If anyone has suggestions on how it can be made more efficient or better, please let me know.
function moveBG(){
// imageHeight is not the total height of the image,
// it's the vertical amount you want to ensure remains visible no matter what.
var imageHeight = 300;
// Get the maximum amount within the DIV that the BG can move vertically.
var maxYPos = $("#outerDIV").height() - imageHeight;
// Get the amount of vertical distance from the top of the document to
// to the top of the DIV.
var headerHeight = document.getElementById("outerDIV").offsetTop;
// Calculate the BG Y position for when the scrollbar is at the very top.
var bgTopPos = $(window).height() - headerHeight - imageHeight;
// I don't want the image to wander outside of the DIV, so ensure it never
// goes below zero.
if (bgTopPos < 0)
{
bgTopPos = 0;
}
// Calculate the BG Y position when the scrollbar is at the very top.
var bgBottomPos = $(document).height() - $(window).height() - headerHeight;
// To prevent the BG image from getting cut off at the top, make sure
// its position never exceeds the maximum distance from the top of the DIV.
if (bgBottomPos > maxYPos)
{
bgBottomPos = maxYPos;
}
// Subtract the top position from the bottom, and you have the spread
// the BG will travel.
var totalYSpan = bgBottomPos - bgTopPos;
// Get the scrollbar position as a "percentage". Note I simply left it as a
// value between 0 and 1 instead of converting to a "true" percentage between
// 0 and 100, 'cause we don't need that in this situation.
var scrollPercent = ($(window).scrollTop() / ( $(document).height() - $(window).height()));
// The percentage of spread is added to the top position, and voila!
// You have your Y position for the BG image.
var bgYPos = bgTopPos + (Math.round(totalYSpan * scrollPercent));
// Apply it to the DIV.
document.getElementById('outerDIV').style.backgroundPosition="0px " + bgYPos + "px";
}
// Place the BG image correctly when opening the page.
$(document).ready(function() {
moveBG();
});
// Make it update when the scrollbar moves.
$(window).scroll(function () {
moveBG();
});

Center the background position of body / div to middle of Viewport

I have a Body height of 1000px, and my screen height is 100px. I wanted to display a <div> that occupies the entire <body> width and <body> height. That <div> is having one background-image and I want to make it displayed at the middle of the viewport. How can I achieve this using Javascript.
I have used the below concept but it did not work for me in mobile devices
ele.style.backgroundPosition = document.body.scrollTop +
(window.innerHeight / 2) - heightOfImage;

The simplest solution may be to have a fixed positioned <div /> with the background image set on it, and it's z-index set such that it appears under all the other elements on the page.
Example: http://jsfiddle.net/gztRa/
If you really do want to go the JavaScript route (which I personally wouldn't do if I could help it here), you're going to have to do something along these lines:
Hook up to the scroll event of the element thats scrolling
Every time this fires, adjust the scroll position like so:
var verticalPosition = document.body.scrollTop + (window.innerHeight / 2) - heightOfImage;
ele.style.backgroundPosition = 'center ' + verticalPosition + 'px';
Note the addition of the 'px' as this is important. There is also a space after "center", so you should end up with something that looks like this: ele.style.backgroundPosition = 'center 50px'.
Example (using Zepto or jQuery): http://jsfiddle.net/7aqgG/7/

same calculation functions, different outcomes depending on .load() and .resize() or .scroll()

I'm trying to write my own lightbox script but I'm stuck on a problem.
The wrapper div centering is done through position: absolute and top / left positioned by calculating...
top:
_center_vertical = function() {
return (($(window).height() - wrapper.height()) / 2) - (options.margin + options.border) + $(window).scrollTop()
}
left:
_center_horizontal = function() {
return (($(window).width() - wrapper.width()) / 2) - (options.margin + options.border) + $(window).scrollLeft()
}
The wrapper div is centered on .load() and on $(window).resize() / $(window).scroll().
When the image is loaded and appended to wrapper, top and left is calculated using the functions above, horizontal centering is correct, but vertical centering is not. It is off by around 10px or more.
When the browser window is resized or scrolled, it calls the function which animates the centering which uses the same function to calculate the top and left. The window resize / scroll does center the image properly.
I have tried using jQuery deferred.then() to have it calculate the top / left after the image is appended, but it didn't change anything.
Example: http://jsfiddle.net/vfMNQ/
I initially thought that the difference in top position changed when I played around with things like wrapper padding (aka my border), however, I found that I was wrong.
I added some console.log('image load height: ' + ((($(window).height() - wrapper.height()) / 2) - (options.margin + options.border)) + 'px') to .load() and .scroll() and found that the difference was oddly 21px no matter what. The default border is 10px, margin is 30... so where did the 21 come from?
I'd hate to use + 21 as a hack, but seems like nobody can figure it out.

Your problem appears to be in the loading div:
.lbe-loading {
background: #578DB2 url(/public/images/loading.gif) no-repeat center center;
width: 32px;
height: 32px;
padding: 5px;
}
height:
32 + padding: (5 * 2) = 42
42 / 2 = 21px
Looks like you've appended the image with the loading div still appended to the wrapper.
wrapper.append(loading);
...
$(function() {
var img = $(new Image());
img.load(function() {
wrapper.append(this) // .lbe-loading still appended here
.css({ // Position wrapper.
...
});
loading.remove(); // Too late.
If I remove .append(loading), it centers fine.
Put .lbe-loading on a different div so it's not being added to the wrapper's height.

Best guess:
You are trying to calculate the height of the wrapper before actually putting in the image.
i.e. you are append(this) and then immediately trying to calculate the height before giving the browser a chance to display and load the image.
When I put in debugging code wrapper.height() changed by 40 pixels after resizing the display. 40 pixels is exactly the border + margin. (And when I changed those, the difference changed too.)

Its a delay in wrapper getting the height and width of the image. The jQuery for centering is executing before Browser has preformed its reflow and given 'wrapper' the height and width of the image.
I forked your fiddle and fixed it here: http://jsfiddle.net/3th5k/
by setting wrapper's height and width with javascript before centering. This way your centering calculation draws from the right data source, the javascript image object rather than the dom.
Also please note that the css statement with 'opacity: 0' has been replaced with .hide(); I did this because opacity and ie are not friends and it would most likely cause a problems down the line.
Cheers!

Background position image overlay (Works in IE, not in Mozilla/Chrome/Safari)

I am having an issue positioning a background image using the following jquery background position command in Firefox, Google Chrome, and Safari. The code works correctly in IE 8.
$('#element').css({ backgroundPosition: 'xpx ypx' });
The desired effect is a continuous stream of fluid from the right side of the screen to the left, blurred out while behind the main page content. This is achieved using 2 fluid images, one completely sharp and one completely blurred. As the user resizes the window, a jquery function calculates the appropriate positioning of the blurred image (set as a background image) and edits the backgroundposition css attribute.
The x position of the image is calculated dynamically based on window size and the y position is static. The css appears to be modified correctly (note the backgroundposition display in the right most text box). However, the background image I am attempting to overlay is absent in mozilla/chrome/safari. See jscript code below:
$(window).resize(function () {
// image positioning variables
var windowwidth = $(window).width();
var imgwidth = $('#imgFluid').width();
var offset = $('#divFluidBlur').offset();
// calculate and implement position
blurPositionLeft = (windowwidth - imgwidth) - offset.left;
$('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });
// debug: display actual css Background Position of element to text box
$("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition); }
Thanks in advance for your help,
Andrew

What you are doing should work. Anyway, you may want to try a little cleaner version: $('#divFluidBlur').css('background-position', blurPositionLeft + 'px' + ' 30px'); And you may want to use Firebug to temporary disable or change values of other styles that could be iterfering.
Could you privide an online example of the problem?