Hello, I often notice such a feature on sites that the background is as if it’s at a distance from the user, for example http://goldneedle.by/ , there are a lot of such sites, + the pictures in the background change (for example, the first picture is a room , and the second - a piece of sewing machine). How to achieve this effect. Thank!

  • 2
    parallax effect - soledar10
  • 2
    The effect of paralax is scrolling through the picture that ka kb is going in the background, and the very effect of distance or something like a visual 3D glitch is a feature of the picture itself goldneedle.by/sitefiles/1/3/01_new.jpg Distantly " - Broouzer King
  • Yeah, I already started to understand this effect - simply good
  • But how to make it so that the image still moves a little bit - simply good
  • youtube.com/watch?v=I98ojKzYpew watch the video - user33274

1 answer 1

A simple example:

body{margin:0; padding:0;} .container { max-width: 960px; margin: 0 auto; } /*SECTION*/ section.module:last-child { margin-bottom: 0; } section.module h2 { margin-bottom: 40px; font-family: "Roboto Slab", serif; font-size: 30px; } section.module p { margin-bottom: 40px; font-size: 16px; font-weight: 300; } section.module p:last-child { margin-bottom: 0; } section.module.content { padding: 40px 0; } section.module.parallax { height: 600px; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } section.module.parallax h1 { color: rgba(65, 244, 255, 0.8); line-height: 600px; font-weight: 700; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } section.module.parallax-1 { background-image: url("http://kerriedorman.com/wp-content/uploads/2014/07/free-office-wallpaper-26001-26685-hd-wallpapers.jpg"); } section.module.parallax-2 { background-image: url("http://www.ennomotive.com/wp-content/uploads/2015/04/innovation-2015-ennomotive.jpg"); } section.module.parallax-3 { background-image: url("http://d-interventions.com/wp-content/uploads/2014/08/full01.jpg"); } 
 <section class="module parallax parallax-1"> <div class="container"> <h1>Perallax Slide-1</h1> </div> </section> <section class="module content"> <div class="container"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </section> <section class="module parallax parallax-2"> <div class="container"> <h1>Perallax Slide-2</h1> </div> </section> <section class="module content"> <div class="container"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </section> <section class="module parallax parallax-3"> <div class="container"> <h1>Perallax Slide-3</h1> </div> </section> <section class="module content"> <div class="container"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </section>

And here you can find a lot of delicious things for yourself: Scroll Magic

  • Thanks, and I already started watching the video using jquery - simply good
  • Of course, this is not paralax :) all the same without scripts anywhere - simply good