CSS Multiple Backgrounds Scrolling at Different Speeds

CSS multiple backgrounds scrolling at different speeds

It's call parallax there's plenty of plugin for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/

(CSS) Make a background image scroll slower than everything else

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/

Responsive background scrolling with constant speed

You can consider CSS variable to make the animation dynamic:

.offset {  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');  background-size: 100%;  animation: slideLeft768px 5s linear infinite;  width: var(--p);}
.div1 {  --p: 76.8px;  height: 57.6px;}
.div2 {  --p:768px;  height: 576px;}
@keyframes slideLeft768px {  0% {    background-position: var(--p,0px) 0px;  }  100% {    background-position: 0px 0px;  }}

<div class="offset div1"></div><div class="offset div2"></div>

HTML/CSS - Fixed Backgrounds while scroll

They have panels that are the size of the window. Then what they are doing is setting a background image for each panel and setting its background-attachment: fixed so that it stays positioned relative to the window, not the div it is in.

I set up the fundamentals for you here: http://jsfiddle.net/Zc822/

body, html {
    width: 100%;  // Sets the html and body width and height 
    height: 100%; // to the width and height of the window.
    margin: 0;
}
.panel{
    width: 100%;  // Sets each panel to the width and height
    height: 100%; // of the body (which is set to the window)

    background-repeat: no-repeat;
    background-attachment: fixed;  //Sets background fixed in window
    background-size: cover;
}

Then you just need to specify a background-image for each individual panel.

Pretty sure this is what you are looking for.

---

Related Topics