I came across this website today and I was mystified: http://www.actionbutton.net/
Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it?
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
Set the background-size to "cover" to scale the images as large as possible to cover all the background area. Add links of the images with the background-image property. Style the content giving it a border and setting the width and height of it. Set the position to "fixed" so as it will be fixed while scrolling.
You could also consider something like that (no javascript is required):
@keyframes backgroundscroller {
from {
background-position: 0% 0%;
}
to {
background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;
}
}
#yourdivid {
background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png');
animation-name: backgroundscroller;
animation-duration: 300s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
Obviously you must be aware that this will work only with browsers that support CSS3 and you also want to consider including a very useful javascript that takes care of adding prefixes where and if needed: http://leaverou.github.com/prefixfree/
Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/
Key is that there is a 2-layer nested divs, the outer one to hold the background, the inner one to hold the content:
.section {
position:relative;
z-index:1;
height:500px;
width:100%;
background-attachment:fixed; /* this keeps the background in place */
background-size:100% 100%;
background-repeat:no-repeat;
}
.content {
position:relative;
z-index:2;
background-color:#fff;
border:2px solid #666;
height:50%; /* this height difference allows the bg to show through */
}
It's call parallax
there's plenty of plugin
for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With