What we're going to create is basically a slideshow where each slide is placed in a 3D space and the animation moves from one slide to the other. A basic slide structure can be as simple as:
<div data-sequence="1"> <div data-slide> Hello, </div> </div>
We need two nested
div
tags to define this structure; the first one will cover 100 percent of the window area, and the second div
tag will have the necessary properties to hold its content in the center of the screen. Plus, we need to set up each slide so that they will be piled up one above the other because we need them all in the center before we start to move them in the 3D space.
We can use the flexbox
CSS property to achieve this result. In fact, flexbox has properties to define both vertical and horizontal alignment.
Let's define a basic HTML structure based on what we have seen so far:
<!doctype html> <html> <head> <title>Movie Trailer</title> ...