CSS slider
I want to tell a simple way to create a slider, without using JS, using CSS animation.
1) To start, let's write HTML, suppose that 4 images follow each other in the slider.
2) Next, we arrange the dimensions of the block, and a few more settings, position: relative is necessary in order to create a formatting context, it will be clear further why.
')
3) Also define some properties for the slides themselves:
As you can see from CSS, we place all the slides in the upper left corner of the slider, thus setting the same starting position.
4) Next, you need to determine exactly how the slides will replace each other without creating gaps - for each slide I decided to use the following sequence of actions:
1. The slide is at the initial position, shown to the user.
2. The slide moves to the left until it completely leaves the slider (at the slider, as indicated above, overflow: hidden, respectively, the slide does not hit the surrounding objects).
3. Next, the slide moves up until the lower border of the slide leaves the upper border of the slider.
4. Next, the slide moves to the right until the left border of the slide goes beyond the right edge of the slider.
5. The slide goes down one level with the slider.
6. Slide moves to starting position.
In other words (I will name the frames according to the numbers from the list above):
5) So, it became clear what the trajectory of the slide looks like. Each slide “circles” around its container - the slider - and returns to the original one. Thus, we can infinitely twist any number of slides. But there was one nuance that is most important in this scheme - time. It is necessary to correctly calculate the storyboard animation over time and set the correct delay for each slide, so that not everyone rushes to animate at the same time. In order to understand how to correctly set the delay and calculate the time of the animation, I went the way described below.
Let's take the notation of steps from the previous paragraph and see what happens in each step. In fact, steps 1, 2 and 6 are those steps in which the slide enters the visible area. From the fact that the slides must move inseparably and, as it were, push each other out of the slider, we can conclude that the duration of steps 2 and 6 should be equal. At once I will make a reservation that I managed to successfully work this construction only on condition that the duration of the first step is also equal to the duration of the 2nd and 6th. What happens during steps 3, 4 and 5 are essentially technical needs, and for simplicity, let's combine these three steps into 1.
After simplification, we have:
1. Step - slider is demonstrated on the source
2. Step - slider moves to the right
3. Step - slider makes technical moves
4. Step - the slider moves to the left, returning to its original position
To ensure a continuous slide show, when the slide starts with step 2, the next slide should begin with step 4.
Those.:
In order to calculate the percentage of the required time for each stage, it is, so to speak, derived a small formula that works under the condition that steps 1, 2 and 4 are equal.
If time, the circle of the entire animation is t;
Slides number - n;
Duration 3 steps - y;
The duration of steps 1,2 and 4 - x;
The animation delay pitch for the n-slide is z;
That:
y = (100 * n - 150) / n;
x = (100 - y) / 3;
x and y must be converted to percentages, and then:
z = 2 * x * t;
For the case when n = 4, as in the example above, we get:
The third step - 62.5%, 1, 2 and 4th - 12.5% ​​each. The animation delay for each subsequent slide is 25%.
What intervals will be between the stages within the third step - it does not matter.
6) Now that we have calculated everything and we know all the quantities, we can bring the final code.
Animation:
Slides
General CSS for all slides:
That's all! Thanks to everyone who read to the end.
1) To start, let's write HTML, suppose that 4 images follow each other in the slider.
<div class="slider"> <div class="slide slide1"></div> <div class="slide slide2"></div> <div class="slide slide3"></div> <div class="slide slide4"></div> </div> 2) Next, we arrange the dimensions of the block, and a few more settings, position: relative is necessary in order to create a formatting context, it will be clear further why.
')
.slider { width: 500px; height: 300px; margin: auto; margin-top: 25px; border: 1px solid black; position: relative; overflow: hidden; } 3) Also define some properties for the slides themselves:
.slide { width: 500px; height: 300px; position: absolute; top: 0; left: 0; } As you can see from CSS, we place all the slides in the upper left corner of the slider, thus setting the same starting position.
4) Next, you need to determine exactly how the slides will replace each other without creating gaps - for each slide I decided to use the following sequence of actions:
1. The slide is at the initial position, shown to the user.
2. The slide moves to the left until it completely leaves the slider (at the slider, as indicated above, overflow: hidden, respectively, the slide does not hit the surrounding objects).
3. Next, the slide moves up until the lower border of the slide leaves the upper border of the slider.
4. Next, the slide moves to the right until the left border of the slide goes beyond the right edge of the slider.
5. The slide goes down one level with the slider.
6. Slide moves to starting position.
In other words (I will name the frames according to the numbers from the list above):
@keyframes slide { from { top: 0; left: 0; } 1 { transform: translate(0px, 0px); } 2 { transform: translate(-500px, 0); } 3 { transform: translate(-500px, 300px); } 4 { transform: translate(500px, 300px); } 5 { transform: translate(500px, 0); } to { transform: (0px, 0px); } } 5) So, it became clear what the trajectory of the slide looks like. Each slide “circles” around its container - the slider - and returns to the original one. Thus, we can infinitely twist any number of slides. But there was one nuance that is most important in this scheme - time. It is necessary to correctly calculate the storyboard animation over time and set the correct delay for each slide, so that not everyone rushes to animate at the same time. In order to understand how to correctly set the delay and calculate the time of the animation, I went the way described below.
Let's take the notation of steps from the previous paragraph and see what happens in each step. In fact, steps 1, 2 and 6 are those steps in which the slide enters the visible area. From the fact that the slides must move inseparably and, as it were, push each other out of the slider, we can conclude that the duration of steps 2 and 6 should be equal. At once I will make a reservation that I managed to successfully work this construction only on condition that the duration of the first step is also equal to the duration of the 2nd and 6th. What happens during steps 3, 4 and 5 are essentially technical needs, and for simplicity, let's combine these three steps into 1.
After simplification, we have:
1. Step - slider is demonstrated on the source
2. Step - slider moves to the right
3. Step - slider makes technical moves
4. Step - the slider moves to the left, returning to its original position
To ensure a continuous slide show, when the slide starts with step 2, the next slide should begin with step 4.
Those.:
In order to calculate the percentage of the required time for each stage, it is, so to speak, derived a small formula that works under the condition that steps 1, 2 and 4 are equal.
If time, the circle of the entire animation is t;
Slides number - n;
Duration 3 steps - y;
The duration of steps 1,2 and 4 - x;
The animation delay pitch for the n-slide is z;
That:
y = (100 * n - 150) / n;
x = (100 - y) / 3;
x and y must be converted to percentages, and then:
z = 2 * x * t;
For the case when n = 4, as in the example above, we get:
The third step - 62.5%, 1, 2 and 4th - 12.5% ​​each. The animation delay for each subsequent slide is 25%.
What intervals will be between the stages within the third step - it does not matter.
6) Now that we have calculated everything and we know all the quantities, we can bring the final code.
Animation:
@keyframes slide { from { top: 0; left: 0; } 12.5% { transform: translate(0px, 0px); } 25% { transform: translate(-500px, 0); } 36% { transform: translate(-500px, 300px); } 37% { transform: translate(500px, 300px); } 87.5% { transform: translate(500px, 0); } to { transform: (0px, 0px); } } Slides
.slide1 { background: url(1.jpg); animation-delay: 7.5s; } .slide2 { background: url(2.jpg); animation-delay: 5s; } .slide3 { background: url(3.jpg); animation-delay: 2.5s; } .slide4 { background: url(4.jpg); animation-delay: 0s; } General CSS for all slides:
.slide { width: 500px; height: 300px; position: absolute; top: 0; left: 0; animation-name: slid; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; } That's all! Thanks to everyone who read to the end.
Source: https://habr.com/ru/post/324034/
All Articles