I worked on a tattoo removal website recently that required a vertical scrolling effect where the user could scroll and depending on whether they’re scrolling up or down, the tattoo would reveal or hide itself.

Turns out, it was a fairly simple task using just HTML & CSS, no JavaScript required. Here’s how I did it.

Firstly, source two images. The trick for me was to use two identical images, the only difference being one had a tattoo and the other didn’t. A similar idea would be to use two images, one black and white and one colour, much like:

example-02

example-01

From there, you will want to stack these within your HTML. Keep it simple by creating two empty <div> tags:

<div class="photo-before"></div>
<div class="photo-after"></div>

Once done, it’s time to add style. To create the effect, we want ensure they fill the height of the browser (we also need to set the html and body height to 100%) and we also want to use a few background properties:

html,
body {
  height: 100%;
}

.photo-before,
.photo-after {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

Setting background-attachment to fixed will do as it suggests, fixes the image to the viewpoint, rather than scrolling along with the containing block. For background-position and background-size, that can be changed depending on where you plan to implement it within your layout.

With these styles in place, it’s time to add a background image to each. This can be done with the following CSS:

.photo-before {
  background-image: url(images/photo-before.jpg);
}

.photo-after {
  background-image: url(images/photo-after.jpg);
  border-top: 1px solid #ccc;
}

Note the border. That’s not required, it was just a nice visual indicator that you’re actually indeed scrolling, otherwise it may not be obvious at first.

And that’s all you need. I’ve uploaded an example to CodePen to see it in action.