(Css) Make a Background Image Scroll Slower Than Everything Else

(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/

How do I make one div scroll slower or faster than other items on the page, using pure CSS or CSS/JS (without JQuery)?

So I have managed to come up with this which is not too complex, however, it does scroll relative to the users scroll speed, but does work with scroll wheel, scrollbars, and keyboard.

It also scrolls up and down.

You can change the speed to suit your needs, but 10 worked for keeping it pretty much in view all the way down for my scroll speed, but left it behind when faster or using Page Down.

document.addEventListener("DOMContentLoaded", function DomContentLoaded(){

  //Get the element you want to slow down;

  var slowDiv = document.getElementById('slowDiv');

  //Set its style.top to be the offsetTop so if style.top is not set, it will still work.

  slowDiv.style.top = slowDiv.offsetTop + 'px';

  //set the last scrollTop to use for direction

  var lastScrollTop = 0;

  //Get the element you are scrolling against

  var relativeSpeedDiv = document.getElementById('main');

  var moveLittle = function MoveLittle(speed, scrollY) {

    //Get the current top of the slow element

    var topVal = parseInt(slowDiv.style.top);

    //Check scroll direction

    if (isScrollingDown(scrollY)) {

      topVal = topVal + speed;

    } else {

      topVal = topVal - speed;

    }

    //Set new top of slow element

    slowDiv.style.top = topVal + 'px';

  };

  var isScrollingDown = function IsScrollingDown(scrollY) {

    var retVal = false;

    if (scrollY > lastScrollTop) {

      retVal = true;

    }

    lastScrollTop = scrollY;

    return retVal;

  };

  window.onscroll = function WindowScroll() {

    //Send speed and current scroll Y

    moveLittle(10, this.scrollY);

  }

});

.biggestBig {

    margin: auto;

    align-self: center;

    width: 90%;

    min-height: 9999em;

}

.faded {

    background: linear-gradient(gray, black);

}

.slow {

    width: 2em;

    height: 2em;

    background-color: #ee9b0b;

    position: absolute;

}

<div id="mainDiv" class="biggestBig faded">

    <div id="slowDiv" class="slow"></div>

</div>

Scroll background image untill the end not further

I found this thread while I was looking for a solution to just this problem. I managed to write a short jQuery script adapting the hints given by Alex Morales.

With the following code, the background-image of the body scrolles down with the rest of the site until its bottom is reached. You can take a look at my homepage (http://blog.neonfoto.de) to see what it does.

$( window ).scroll( function(){
  var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
  var visible = $( window ).height(); //visible pixels
  const img_height = 1080; //replace with height of your image
  var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom  
if ( max_scroll > ypos) {
     $('body').css('background-position', "center -" + ypos + "px");
  } else {
    $('body').css('background-position', "center -" + max_scroll + "px");
  }
});

This is actually the very first thing I did with JavaScript and JQuery, so any improvement would be great!

jQuery to give impression of background scrolling slower

You are trying to achieve a 'parallax scrolling' effect. I recommend you take a look at a few articles such as this tutorial and this documentation. If you need any more help just ask, I've made a few site with this design.

How do I create a parallax effect without using a background-image?

Unfortunately, I do not know of any sure fire way using pure CSS. The reason for it is because there is no way to get the current scroll position (which we could be using in a calc()). Also, when positioning an element using fixed, it does not care about its parent anymore and it becomes impossible to enforce an overflow:hidden.

There are two ways of creating a paralax effect without using background, is to either make use of JavaScript, I've given you a full working example. It is minimal, might make the browser work way too much for nothing, but it works. You'll certainly want to optimize it to only apply on elements that are visible if you have a lot.

$(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.paralax-image').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find('img').css('top', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on('scroll', onScroll);
});

.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h2>Lorem Ipsum</h2>
  <div class="paralax-image">
    <img src="https://via.placeholder.com/400x200">
  </div>

</div>

Scroll a CSS background when user scrolls the webpage - parallax?

This can be done with javascript:

$(window).scroll(function(){
  $("#para-social-bg").css({"background-position":"left " +($(window).scrollTop()*.5) + "px"})
});

http://codepen.io/anon/pen/qdRjXJ

CSS Parallax Background Image White Space in IE

There isn't any way to get CSS parallax to work in IE, yet. But since Webkit-based browsers like Chrome and Opera (I haven't tested Safari) work well with parallax, it's possible to target Webkit browsers and display the parallax background for them, and display different code - without parallax - for other browsers.

First, I put the parallax code inside @media queries, like this:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .container {
    [rule contents]
  }

  .background {
    [rule contents]
  }

  .page-content {
    [rule contents]
  }
}

The first attribute (-webkit-min-device-pixel-ratio:0) targets all Webkit-based browsers, but since I assume not all versions of Webkit browsers will support this parallax effect, I also added the second attribute, which limits the browsers to Chrome 29+ and Opera 16+ (I excluded Safari just to be safe, but you can choose another hack that targets Safari too if you find out it works).

It would probably be a much better idea to use feature detection, but I haven't yet learned JavaScript, and the above is a CSS-only solution.

After putting the parallax rules in a @media query, I set up an alternative default rule for the back div element.

(Though dividing up the site into front and back div elements isn't necessary without parallax, setting the back div element with a background image rather than body or html eliminates a ton of lag.)

To retain as much similarity to the parallax version as possible, I set the background image to position: fixed.

Because browsers read through the CSS file top-down and apply styles in that order, it's important to have the parallax .back rule (and its surrounding @media query) coming after the standard, non-parallax .back rule in the file.

And of course, I made sure that all the attributes which applied to both the standard and parallax .back rules were only present in the default one to save space (they would be applied by Webkit browsers along with additional rules in the parallax version).

---

Related Topics