Now, we'll learn to create the effect of a camera that moves through the slides; due to the fact that we cannot move the user's viewport, we'll need to simulate this feeling by moving the elements on the scene; this can be achieved by applying some transformations to #container
.
To move the camera close to a slide, we need to apply the exact transformations we used on that slide, but with opposite values and in the reverse order. So, for example, if we want to view the frame whose data-sequence
property is 3
, we can write:
// not to be permanently added to the project #container{ @include transform(scale(2) translateY(-300px) rotateX(-90deg)); }
Here's the result:
The animation has to focus on a slide, stay still for some time, and then move to the next slide. When creating this kind of effect, we usually face the following two main problems:
CSS
keyframes
accepts only percentage values, but we'd rather prefer to use seconds as a measurement unit (for example, to say "move...