Падение сверху
Первая фотография в этом примере используется 2 раза, чтобы определить ее пропорции
Этот вариант можно протестировать на codepen
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="photo-container-1"> <div class="photo-0"> <img src="photo-1.jpg" /> </div> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.photo-container-1 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-1 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-1 .photo-0 { position: relative; z-index: -2; } .photo-container-1 .photo-1 { position: absolute; top:-100%; animation: fromtop 10s linear 5s infinite; } .photo-container-1 .photo-2 { position: absolute; top:-100%; animation: fromtop 10s linear infinite; } @keyframes fromtop { 0% { top: -100%; } 4% { top: 0; } 5% { top: -20px; } 6% { top: 0; } 49.99999% { top: 0; z-index: 1; } 50% { top: 0; z-index: -1; } 100% { top: 0; z-index: -1; } } |
Поворот с прозрачностью
Этот вариант можно протестировать на codepen
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-2"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.photo-container-2 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-2 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-2 .photo-1 { position: relative; animation: rotate 10s linear 5s infinite; } .photo-container-2 .photo-2 { position: absolute; top: 0; animation: rotate 10s linear infinite; } @keyframes rotate { 0% { opacity: 1; transform: rotate(0) scale(1); } 50% { transform: rotate(0) scale(1); opacity: 1; } 59.99999% { transform: rotate(45deg) scale(3); opacity: 0; z-index: 1; } 60% { opacity: 0; z-index: -1; } 100% { opacity: 1; } } |
Увеличение
Этот вариант можно протестировать на codepen
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-3"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.photo-container-3 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-3 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-3 .photo-1 { position: relative; animation: scale 10s linear 5s infinite; overflow: hidden; } .photo-container-3 .photo-2 { position: absolute; overflow: hidden; top: 0; animation: scale 10s linear infinite; } @keyframes scale { 0% { transform: scale(0); border-radius: 50%; } 10% { transform: scale(1); border-radius: 50%; } 15% { border-radius: 0; } 49.99999% { z-index: 1; } 50% { z-index: -1; } 100% { transform: scale(1); z-index: -1; border-radius: 0; } } |
Горизонтальное вращение
Для вертикального нужно заменить rotateY на rotateX
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-4"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.photo-container-4 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; } .photo-container-4 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-4 .photo-1 { position: relative; animation: rotateY1 10s linear infinite; backface-visibility: hidden; } .photo-container-4 .photo-2 { position: absolute; top: 0; animation: rotateY2 10s linear infinite; backface-visibility: hidden; } @keyframes rotateY1 { 0% { transform: rotateY(-180deg); } 40% { transform: rotateY(-180deg); } 50% { transform: rotateY(0); } 90% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } } @keyframes rotateY2 { 0% { transform: rotateY(0); } 40% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } |
Фильтр с прозрачностью
Смена фотографий через фильтр с добавлением прозрачности. В примере используется brightness, но можно выбрать и любой другой фильтр
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-5"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.photo-container-5 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-5 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-5 .photo-1 { position: relative; animation: brightness 10s linear 5s infinite; } .photo-container-5 .photo-2 { position: absolute; top: 0; animation: brightness 10s linear infinite; } @keyframes brightness { 0% { opacity: 1; } 54% { filter: none; } 58% { opacity: 1; } 59.99999% { filter: brightness(10); z-index: 1; } 60% { opacity: 0; z-index: -1; } } |
Добрый день.
Подскажите в последний вариант "Фильтр с прозрачностью" как добавить ещё два фото, чтобы они тоже ротировались.
Добавляю строками <div class="photo-3"> и 4 +
.photo-container .photo-3 {
position: absolute;
top: 0;
animation: brightness 10s linear 10s infinite;
}
Но ни 3, ни 4 не показываются или показываются, но вместо первых двух...
Тут нужно будет менять проценты в анимации, ее продолжительность и задержку.
В этой [url="https://atuin.ru/blog/slajder-s-menyayushhimisya-foto-na-css/"]теме[/url] можно посмотреть, как считаются они
Привет. Покажите на одном примере, как запустить вашу анимацию при hover. Что никак не выходит.
На 3 примере:
Удаляем вызов анимации
[code]animation: scale 10s linear 5s infinite;[/code]
и
[code]animation: scale 10s linear infinite;[/code]
и добавляем:
[code].photo-container-3:hover .photo-1 {
animation: scale 10s linear infinite;
z-index: 1;
}
.photo-container-3:hover .photo-2 {
animation: scale 10s linear 5s infinite;
}[/code]
Еще 1 вариант - это использовать [b]animation-play-state[/b]
Для классов
[b].photo-container-3 .photo-1 [/b]и [b].photo-container-3 .photo-2[/b] добавляем
[code]animation-play-state: paused;[/code]
и запускаем их по ховеру:
[code].photo-container-3:hover .photo-1 {
animation-play-state: running;
}
.photo-container-3:hover .photo-2 {
animation-play-state: running;
}[/code]
Спасибо. Понятно. Тут дело оказывается ещё и в последовательности правил. Не нашёл ещё как убрать задержку. Так как получается при наведении она ждёт несколько секунд. Я делаю 4-ый пример.
Я вот воспользовался последним вариантом, но проблема в том, что мне нужно остановить цикл смены изображений и зафиксироваться на втором слайде, но никак не пойму как это можно сделать ?
Т.е. сменить 1 раз фото и все?
Если так, то заменяем классы на:
[code].photo-container-5 .photo-1 {
position: relative;
}
.photo-container-5 .photo-2 {
position: absolute;
top: 0;
animation: brightness 10s linear 1;
}
@keyframes brightness {
0% {
opacity: 0;
}
90% {
opacity: 0;
filter: none
}
95% {
filter: brightness(10);
}
100% {
opacity: 1;
}
}
[/code]
Только в этот момент фотка может находиться за пределами экрана.
Это то, что было нужно ! спасибо !