![]() We have 6 images, so we will need 36 seconds for a whole cycle to finish. Now, why those values? We want each image to be visible for 6 seconds and we know that at the end of a cycle, we want the first image to show again. When reaching 25% the opacity should already be 0 again and stay like that until the end. And then this opacity gets kept until 17% are reached. In those 36 seconds we will change the opacity from 0 to 1 when the animation reaches 8%. Each span will have an animation time of 36 seconds. Now, let’s have a look at the slideshow animation. Now, we will define the background images for all the spans and the animation delay, so that each following slideshow image and title appear after 6 second of the previous one: The animation for the title division will also take 36 seconds. But let’s look at the details in a while, first, we will style the division with the headline:Īnimation: titleAnimation 36s linear infinite 0s įont-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif The animation for each span will last 36 seconds and run an inifinite number of times. We’ll then change that in our animation:Īnimation: imageAnimation 36s linear infinite 0s The background-size property value “cover” will make sure that the background image covers all the area of the element and hence it is the size of the screen, it will cover all the visible viewport. Since we have some text inside, we’ll make the color transparent because we don’t want to see it. The span that will contain a slideshow image will be positioned absolutely and have a width and height of 100%. We’ll use a repeated dot pattern but you could as well use, for example, a css gradient with some transparency. We’ll also use a :after pseudo-element in order to place a pattern on top of the image:īackground: transparent url(./images/pattern.png) repeat top left It will be fixed and we will stretch it over the viewport. The spans are going to be the elements that will have the background images of the slideshow. ![]() We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading:
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |