This tutorial uses HTML and CSS to create a full screen background image slider that uses a crossfade effect to transition between images. The images will be set as background-images to a modified unordered list. We’ll use 5 images with 10 second intervals for a 50 second animation cycle.
landing.ejs
page to look like the following:<!DOCTYPE html>
<html>
<head>
<title>YelpCamp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/landing.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript" async></script>
</head>
<body>
<div class="container">
<% if(error && error.length > 0){ %>
<div class="alert alert-danger" role="alert">
<%= error %>
</div>
<% } %>
<% if(success && success.length > 0){ %>
<div class="alert alert-success" role="alert">
<%= success %>
</div>
<% } %>
</div>
<div id="landing-header">
<h1>Welcome to YelpCamp!</h1>
<a href="/campgrounds" class="btn btn-lg btn-success">View All Campgrounds</a>
</div>
<ul class="slideshow">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<% include partials/footer %>
/public/stylesheets
named landing.css
landing.css
and set the body’s background-color to blackbody {
background-color: #000;
}
#landing-header {
z-index: 1;
position: relative;
text-align: center;
padding-top: 40vh;
}
We use padding-top to vertically center our div, since it’s contents take up quite a bit of space we use 40vh (view height) instead of 50, this way the content looks more visually centered
#landing-header h1 {
color: #fff;
}
landing.ejs
need some styling to make them fit across the entire page.slideshow {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
list-style: none;
margin: 0;
padding: 0;
}
This will fix the ul to the window, positioning it in the top left corner and filling the entire screen by setting width and height to 100%; we set the z-index to 0 to keep the background images behind the rest of the page’s content; list-style is set to none in order to hide the bullet points from the list’s default styling; margin and padding are removed entirely
Now we can style all of the list items:
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 50s linear infinite;
}
Notice the animation property at the bottom of this rule, this is how we add an animation to an element; in this case we have an animation named imageAnimation that lasts for 50s (seconds), keeps linear timing (the whole animation runs at the same speed), and loops an infinite number of times
Each list item needs a background-image and the last four need an animation-delay (this way they all fire off one after the other in ten second intervals):
.slideshow li:nth-child(1) {
background-image: url(http://i.imgur.com/K3mPv14.jpg)
}
.slideshow li:nth-child(2) {
background-image: url(http://i.imgur.com/SBEmFpv.jpg);
animation-delay: 10s;
}
.slideshow li:nth-child(3) {
background-image: url(http://i.imgur.com/emvhOnb.jpg);
animation-delay: 20s;
}
.slideshow li:nth-child(4) {
background-image: url(http://i.imgur.com/2LSMCmJ.jpg);
animation-delay: 30s;
}
.slideshow li:nth-child(5) {
background-image: url(http://i.imgur.com/TVGe0Ef.jpg);
animation-delay: 40s;
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
10% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1
}
30% {
opacity: 0
}
}
landing.css
:/* Older browser support - .no-cssanimations class added by modernizr */
.no-cssanimations .slideshow li {
opacity: 1;
}
You now have a full screen background slider. If you’re interested in learning more about animations with CSS checkout this tutorial