We’ll name the animation slider and set that first slider The start is easy: we want the slider to begin exactly where it is.
The next image in the sequence will be shown, with the images before and after hidden due to overflow: hidden on the header.Īs I’ve previously discussed, initializing a CSS3 keyframed animation is very much like using an embedded font: we name and specify the animation at the top of our stylesheet, then call it later in our code.Īnimation steps are measured in percentages between the start (0%) and end (100%) frames. (Note that I've dropped vendor prefixes for this example). You can prove this by altering the CSS momentarily to include the following. Showing the next image is simple: we just have to move the the width of one image (800px). Let’s fix that by hiding any content outside the header element:Īnd make the the width of all the images added together ( 800 × 4 = 3200 pixels). Viewing the page in a browser, you’ll notice that the images spill outside the element, and that they don’t stretch out in a single horizontal line.
The principles of the slider are very simple: the elements on the page consist solely of a container (a element, in this case) and a “strip” of slider gallery images side-by-side. CSS now gives us the ability to create the same effect natively in the browser, without JavaScript or any dependence on frameworks or plugins.įor the purposes of illustration I’ll keep the animation sequence fairly basic as CSS Filters and variables start to be supported cross-browser, you’ll find that you will be able to add a great many more effects to this simple code. Slider galleries have been around a long time, but until very recently they have almost exclusively been coded using JavaScript.
0 kommentar(er)
