0

I just want to know how this late body background-image animation/transition works just like on

If you notice the delayed scrolling of the background image, that's what I've wanted to achieve

I can't provide any codes for this, cuz this is the first time I've asked stackoverflow.

Here's a simple Html & CSS for example:

body {
  height: 700px;
  overflow: auto;
  background-image: url("http://www.webdesign.org/img_articles/17101/step2.gif");
  background-size: 50%;
}

#body_wrapper {
  background: transparent url("http://www.clipartkid.com/images/678/image-page-transparent-background-oasis-skin-1-png-modern-wikia-1MESpa-clipart.png");
  height: 700px;
  width: 200px;
}
<body>
  <center>
    <div id="body_wrapper">
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
      <h1>Contents</h1>
  </center>
  </div>
</body>

How can I put a transition/animation to my body background-image so when scrolled by mouse click or mouse wheel the body background-image will be delayed by .7 sec or something.

I'm not very good with CSS I just started learning please help me out with this.

Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
NuraCavalire
  • 13
  • 5
  • That's called **Parallax**. It uses Javascript to move the `background-position` property of `background-image` at different speed than that of the page scroll.! In PureCSS approach, you can only keep the `background-image` fixed on the page. it doesn't matches that effect. – Deepak Yadav Mar 24 '17 at 12:23
  • I see, so this can't be achieve by PureCSS. Given to the snipset... if you know how to do it, can you provide any javascript for it? – NuraCavalire Mar 24 '17 at 12:34
  • Nevermind, I just search parallax and start by studying parallax first... thanks for the info. really appreciate it. – NuraCavalire Mar 24 '17 at 12:40
  • There is a non-JS alternative to this, which uses translate-z and scale in order to achieve this effect. Here's a nice tutorial to this: http://keithclark.co.uk/articles/pure-css-parallax-websites/ – Maharkus Mar 24 '17 at 12:50
  • Thanks for the link I need to learn this. – NuraCavalire Mar 24 '17 at 13:02

0 Answers0