FreewayTalk

Richard Cacciato

3 Mar 2020, 3:13 pm

Parallax images that fade in and out

I’ve been asked if I can build a site similar to the NPR “White Lies” site with parallax images (background images that stay put as html scrolls up or down) that fade in an out. I had built a site using parallax, www.mobilysis.com, which defined a series of css classes I named parallax and embedded them in place using HTML markup items. I’m wondering if there’s a way to make the parallax images fade in and out.

https://apps.npr.org/white-lies/

Richard Cacciato

3 Mar 2020, 3:17 pm

By the way here’s an example of the code I inserted on the page before </head>:

<style> .parallax { /* The image used */ background-image: url(“Resources/bg1.jpeg”);

/* Set a specific height */
min-height: 472px; 

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;

} </style>

(I created a bunch of these classes, parallax, parallax1, parallax2, etc.)

and this is the html markup item I embedded on the page to invoke the background image:

<div class="parallax"></div>