Задача такая: когда пользователь заходит на страницу, надо чтобы секунды через 2 все изображения (3-4 шт) серого цвета становились цветными. Т.е. без наведения курсора. Соответственно, у меня есть каждой картинки по две (серая и цветная). При нажатии на каждую открывается своя галерея. Сменой цвета хочется показать посетителю, что на картинки можно и нужно нажимать. Подскажите, пожалуйста, как и чем это лучше реализовать.
2 ответа
Можно написать через js:
...
<div id="img"></div>
...
<script>
document.getElementById("img").style.background="url('1.png')";
setTimeout(go,1000);
function go(){
document.getElementById("img").style.background="url('2.png')";
}
</script>
</body>
...
-
Да, благодарю, работает. А что еще дописать в код, чтобы смена картинок происходила плавно?– CeReRa29 янв 2018 в 9:18
-
@CeReRa надо создать 2 класса: в 1 - div имеет картинку 1, в другом - div имеет 2 картинку. Присваиваем только 1. В JS пишем document.getElementById("img").classList.add("класс2") вместо второго document.getElementById("img").style.background="url('2.png')"; Не забываем про transition! 29 янв 2018 в 11:57
Можно обойтись без использования javascript.
Ключевые моменты в коде css.
Это:
- свойство filter:grayscale();
- свойство animation с параметрами.
Поизучайте эти свойства, а также преобразования и переходы в css. Успехов!
#container {
width: 350px;
height: 270px;
display: flex;
flex-flow: row wrap;
}
@keyframes grayToColor {
from {
filter: grayscale(1);
}
to {
filter: grayscale(0);
}
}
.grayscale {
width: 150px;
height: 112px;
margin: 10px;
animation-name: grayToColor;
animation-duration: 2s;
animation-timing-function: cubic-bezier(1, .03, 1, .100);
}
<div id="container">
<img alt="" class="grayscale" src="https://i.stack.imgur.com/3Xaq6.jpg"/>
<img alt="" class="grayscale" src="https://i.stack.imgur.com/yim07.jpg"/>
<img alt="" class="grayscale" src="https://i.stack.imgur.com/diOUw.jpg"/>
<img alt="" class="grayscale" src="https://i.stack.imgur.com/SfPTn.jpg"/>
</div>
И, да, кстати. Вам теперь не нужны изображения в серых тонах ;-)
-
благодарю, решение интересное) но у меня картинки в сепии должны становиться цветными. При чем сепия вполне определенного оттенка, тут filter: sepia (100%) не подходит. Да и смена должна происходить плавно через 2 секунды после пребывания на странице.– CeReRa27 мар 2018 в 11:13