Parallax escrolling effect - javascript

I want to do exactly the same as this page. http://www.googleventures.com/
It is like a parallax effect when you slide down the lower part of the page comes up. How can I do that with an image as a header? Pure jquery? Is there an onSlide function?

I did an alternate option. You don't even need z-index, since the newer elements are automatically higher in z-index.
HTML
<div class="fixed">
<img src="http://placekitten.com/800/300" />
This is some text that will be static as well
</div>
<div class="scroll">
Lorem ipsum dolor sit amet
</div>​
CSS
.fixed{
position: fixed;
}
.scroll{
background: #eee;
height: 700px;
position: relative;
top: 350px;
}​
Working example: http://jsfiddle.net/3vxBA/

That just looks like the header has a fixed position and a lower z-index, so when you scroll regularly, the page continues upward but the header stays in the same position behind the main contents.
Sample HTML:
<body>
<div id="header">
some image here
</div>
<div id="pagecontent">
everything else
</div>
</body>​
Sample CSS:
body {
padding-top: 100px; /* #header height */
}
#header {
position: fixed;
top: 0px;
z-index: -1;
background-color: #ccccff;
height: 100px;
width: 100%;
}
#pagecontent {
background-color: #ccffcc;
height: 1000px;
width: 100%;
}​
Here's this as a working example: http://jsfiddle.net/Nv7Ku/

Related

Changing color of fixed image based on background

So I´m working on a landing page (test site here: http://kingdomhousedev.cloudaccess.host/) that has a fixed pgn logo. Since it´s white and some of the background is also white it disapears over those sections.
So what I´m wanting to do is change the logo to black when it´s over white or light sections.
Can this be achived using javascript and css? I´ve searched and found some one example (like:http://www.kennethcachia.com/background-check/) but I want it to happen at scroll and not after. If possible it would be nice if it would be so that for example if only half the logo was over white only that part would be black.
Thanks in advance for the help!
Edit:
I was asked for an example not from a live site. So here is one: https://jsfiddle.net/57Legkq3/9/
HTML:
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>
CSS:
.white{
background-color:white;
height: 400px;
}
.black{
background-color:black;
height: 400px;
}
.logo {
width: 100px;
height: 100px;
width: 100px;
height: 100px;
background-color:white;
position: fixed;
top: 20px;
left: 20px;
}
.white {
background-color: white;
height: 400px;
}
.black {
background-color: black;
height: 400px;
}
.logo {
width: 100px;
height: 100px;
width: 100px;
height: 100px;
background-color: white;
position: fixed;
top: 20px;
left: 20px;
}
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>
Also to clarify. I want the white box (representing the logo) to change color to black when going over the white areas. But without me knowing where the white areas are. So I need to check somehow what is under the logo and change color based on that, and preferably only the part of the logo that is over the white area.
Here is a basic idea using JQuery. The code below demonstrates the general principal you'd apply.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("body").addClass("blue");
} else {
$("body").removeClass("blue");
}
});
Note in the above code sample, the scroll is a measurment indicating the windows top! Hence when scroll changes, appropriate class entries are added to, in this case, body element. Hope this helps.

Create a fixed header for an internal container

I would like to create a fixed header bar,
but the problem is that the header is not a full width navbar like always.
It is a header of the middle container, I have sidebar and container.
So the sidebar should be have the same,
but the container header should stay at the top when I scroll the container.
just like in this code example:
https://plnkr.co/edit/RxSkde8M5wkNg5XoFNEF?p=preview
The pink header "HEADER HERE" should stay at the top always.
code from example:
<div id="wrapper">
<div class="side">
side content
</div>
<div class="content">
<div class="header">
HEADER HERE
</div>
<div class="inner">
dontcare long content
</div>
</div>
</div>
I had fixed it for you: https://plnkr.co/edit/CO910df64twLhEvuaWvb?p=preview;
Explanation
You set the header in position fixed (fixed to the screen). So a part of your content will be under the header. So here I put a padding-top on the content (you can replace it with a margin). The value of the padding-top has to be the same as the height of the header.
.content {
background: blue;
width: 70%;
float: left;
position: relative;
padding-top: 2rem;
}
.content .header {
position: fixed;
top: 0;
width: 100%;
background: pink;
height: 2rem;
}
use this style in your header div
<div style="position: fixed; width: 100%" class="header">
HEADER HERE
</div>
.content .header {background: pink;top:0;position:fixed;width:100%;}
Adding the following to the .content .header makes the header stay at the top always
Just add position: fixed to your .header class
.content .header {
background: pink;
position: fixed;
top: 0;
}

HTML + (NV)D3: Can't place a div on top of a div of the chart even with > z-index

so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>

How to get rid of flicker during scrolling for artificially fixed elements?

This is a very simple example of sticking an element at the top of another element's visible area. When .container is scrolled, .fixed stays at the top.
<div class="container">
<div class="fixed">fixed content</div>
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
<style type="text/css">
.container {
position: relative;
border: 1px solid blue;
overflow: auto;
width: 250px;
height: 250px;
}
.content {
height: 500px;
width: 500px;
}
.fixed {
position: absolute;
width: 500px;
margin-top: 2rem;
border 1px solid red;
}
</style>
<script type="text/javascript">
$('.container').scroll(function () {
var top = $('.container').prop('scrollTop');
console.log(top);
$('.fixed').css('top', top);
});
</script>
The problem with this is that if the browser is not fast enough, the .fixed element flickers when I scroll. It lags behind the scroll (compare the position of the text in .fixed to the text in .content as you're scrolling). On my desktop it works flawlessly, but when I try running this in Chromium in a virtual machine, I can see the flicker.
Is there any other way to catch the scroll event and set the position of my .fixed element before the browser renders the page?
edit Updated example to include horizontal scrolling. The fixed element should only be fixed vertically.
Use a double container:
<div class="container-wrapper">
<div class="fixed">fixed content</div>
<div class="container">
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
</div>
With the CSS:
.container-wrapper {
position: relative;
border: 1px solid blue;
overflow: hidden;
width: 250px;
height: 250px;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
.content {
height: 500px;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
width: 245px;
border 1px solid red;
z-index: 10;
}
This way you won't need jQuery to reposition the .fixed div when you scroll, and it won't flicker.
EDIT To address the horizontal scrolling...
$('.container').on('scroll', function() {
var left = this.scrollLeft;
$('.fixed').css('left', -left + 'px');
});
This should move the .fixed div without flickering. In your solution, the flickering was caused because the browser moved your div while scrolling, and the event handler then moved it again. Now it will only move once.

Why doesn't my sticky footer stick?

I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050
Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>
I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).
I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>
It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.
Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>
In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.
This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>

Categories