Sometimes you don't need crazy javascript code to come up with creative and nice looking effects. Today's snippet is all about a single CSS property: background-attachment. You can set the background to be fixed within the viewport (background-attachment: fixed;). We've used this already in our alternate fixed & scroll backgrounds template.

The new trick here is having the same element (in this case a phone) in the exact same position in all background images, so that while you scroll everything moves, but the phone.

The only assets you need are different images, with the same size and an element in common in the same position.

Image credits: Unsplash.

iPhone mockup from Pixel Buddha.

Creating the structure

The HTML structure is pretty basic: each section contains a .content element with the title and paragraph. Classes .img-1, .img-2 etc are used to set up different background images in CSS. The .cd-vertical-nav is the arrow navigation (visible on bigger devices only). Data types have been used to identify in jQuery the sections/items of the slider.

<section class="cd-fixed-background img-1" data-type="slider-item">
   <div class="cd-content">
      <h2>Title here</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
   </div>
</section>

<section class="cd-fixed-background img-2" data-type="slider-item">
   <!-- ... -->
</section>

<nav>
   <ul class="cd-vertical-nav">
      <li><a href="#0" class="cd-prev inactive">Next</a></li>
      <li><a href="#0" class="cd-next">Prev</a></li>
   </ul> <!-- cd-vertical-nav -->
</nav>

Adding style

Couple of important things to bear in mind: iOS devices don't like background-attachment: fixed; Therefore on small devices the fixed background effect won't be visible. Also on small devices we don't use CSS background-images yet, but we inject smaller photos of phones as ::after pseudo-elements of the .cd-content element.

.cd-fixed-background .cd-content::after {
  /* phone image on small devices */
  content: '';
  display: block;
  width: 100%;
  padding: 60% 0;
  margin: 2em auto 0;
}

Secondly, since we are using background-images, we can't have 100% control on where the fixed element (phone in this case) will appear. This is hard to accept if you're obsessed by pixel perfection, but I couldn't find a solution for that.

This is all the code you need to achieve the fixed background effect:

html, body {
  height: 100%;
}

.cd-fixed-background {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.cd-fixed-background.img-1 {
  background-image: url("../img/img-1.jpg");
}

.cd-fixed-background.img-2 {
  background-image: url("../img/img-2.jpg");
}

.cd-fixed-background.img-3 {
  background-image: url("../img/img-3.jpg");
}

Events handling

We used jQuery to implement a basic slider to navigate through the different sections (previous/next arrows and keyboard navigation). On window scroll, we update the arrows visibility (checkNavigation() function) and detect the section visible in the viewport (the .is-visible class is assigned using the checkVisibleSection() function). The nextSection() and prevSection() functions are used to navigate to the next/previous section.