Reveal fade in animation

[bwood]

I’m not one to use a lot bells and whistles on sites. Only when appropriate. I usually reference http://previews.xara.hosting/charity/ if I need a quick look at something.

I have a very old 1920 black and white photo of a Main Street. I also have a pro color photo of the same Main Street.
My text will read something like “Main Street then and now”. The color photo will have a revel fade in animation. Both photos the same x and y size.

My question is can I run this animation “on click” rather than a scroll reveal. The viewer would click the old photo to see what Main Street looks like now. The old photo on click reveals the new photo. I believe this could be a fade in pop up layer .

[Acorn]

Quickest:

1. Place old image over new.
2. Add Name of old to old image.
3. Add 99% transparent shim over both.
4. Add Link of javascript: void $('#old'). fadeToggle('slow'); to shim.
5. Add UsesJQuery as Name to shim.

'Better' is not using jQuery.

Acorn

[bwood]

Thanks Acorn.

Bill

[Chris M]

You could try a 'before/after' reveal. They usually only work well with exact photos, but might be worth a look.

I've uploaded the images, 'before.jpg' and 'after.jpg' in the public_html folder, so I don't need a URL after 'scr='. However, it means I have to publish to see any changes, preview doesn't show the images.

Demo of the slider >>> Freddy <<<

Please don't think I had anything to do with the actual code. I'm a copy/paste person.

Change the path, scr= to where your images are. Title is literally the name of your slider, and alt= is the name screen readers and bots use.

Placeholder Head:

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Before/After Slider</title>
  <link rel="stylesheet" href="beforeafter.css">
  </style>

Placeholder Body:

  <div id="page">
  <div class="wrapper">
  <div class="before">
  <img class="content-image" src="before.jpg" draggable="false" alt="Before Image">
  </div>
  <div class="after">
  <img class="content-image" src="after.jpg" draggable="false" alt="After Image">
  </div>
  <div class="scroller">
  <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon 
  points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
  </div>
  </div>
  </div>
  <script src="beforeafter.js"></script>

[bwood]

Great examples Chris. Very well done. Thank You!