Menu
Elements with negative Z values will scroll slower than those with a positive value. The further the value is from 0 the more pronounced the parallax effect (i.e. translateZ(-10px) will scroll slower than translateZ(-1px)).
To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport. Giving the div a specific width and height will allow for scroll, but when viewing the page on a screen with a different resolution, the width of the image will be off.
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
I stumbled upon this looking for more flexibility in my parallax speed that I have created with pure CSS and I just want to point out that all these people are wrong and it is possible with pure CSS It is also possible to control the height of your element better.
You will probably have to edit your DOM/HTML a bit to have some container elements, in your case you are applying the background to the body which will restrict you a lot and doesn't seem like a good idea.
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Here is how you control the height with Viewport-percentage lenghts based on screen size:
https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
.forefront-element {
-webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
}
.base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
}
Layer speed is controlled by a combination of the perspective and the Z translation values. Elements with negative Z values will scroll slower than those with a positive value. The further the value is from 0 the more pronounced the parallax effect (i.e. translateZ(-10px) will scroll slower than translateZ(-1px)).
Here is a demo I found with a google search because I know there are a lot of non-believers out there, never say impossible:
http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
I know this is very late, but I wondered wether it would not be working easier than the codes above and invested 15 mins of my live.
Here is my code:
document.getElementById("body").onscroll = function myFunction() {
var scrolltotop = document.scrollingElement.scrollTop;
var target = document.getElementById("main1");
var xvalue = "center";
var factor = 0.5;
var yvalue = scrolltotop * factor;
target.style.backgroundPosition = xvalue + " " + yvalue + "px";
}#main1 {
background-image: url(https://images.unsplash.com/photo-1506104489822-562ca25152fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
background-position: top center;
background-attachment:scroll;
background-size: cover;
height: 80vh;
width: 100%;
}
#placeholdersoyoucanscroll{
height:100vh
}<body id="body">
<main>
<div id="main1">
</div>
<div id="placeholdersoyoucanscroll">
</div>
</main>
</body>you can use something simple like here: html:
css:
body {
min-height:4000px;
background-image: url("http://www.socialgalleryplugin.com/wp-content/uploads/2012/12/social-gallery-example-source-unknown-025.jpg");
}
h1 {margin-top:300px;}
js:
(function(){
var parallax = document.querySelectorAll("body"),
speed = 0.5;
window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){
var windowYOffset = window.pageYOffset,
elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
Here is jsfiddle
If you want to apply a high background image, use this JS:
(function () {
var body = document.body,
e = document.documentElement,
scrollPercent;
$(window).unbind("scroll").scroll(function () {
scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
body.style.backgroundPosition = "0px " + scrollPercent + "%";
});
})();
I also was looking for a modern and intuitive approach to adjusting my background scroll speed. You should try out the Simple Parallax Scrolling jQuery Plug-in, inspired by Spotify.com.
Once you have it attached to your project, along with a big image to play with, this is one of many ways to set it up.
The HTML | setup your containers and basic parallax attributes on element.
<main>
<section>Some Content Above it</section>
<div class="parallax-container" data-parallax="scroll" data-position="top" style="height: 80vh;"></div>
<section>Some Content Below it</section>
</main>
The jQuery | Here, you can play with additional parameters based on the docs
function parallaxjs() {
$('.parallax-container').parallax({
imageSrc: '/<path-to-your-image>/<your-big-image>.jpg',
naturalWidth: 1071, //your image width value
naturalHeight: 500, //your image height value
bleed: 0,
});
}
(function () {
parallaxjs();
})($);
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