0

Задача такая: когда пользователь заходит на страницу, надо чтобы секунды через 2 все изображения (3-4 шт) серого цвета становились цветными. Т.е. без наведения курсора. Соответственно, у меня есть каждой картинки по две (серая и цветная). При нажатии на каждую открывается своя галерея. Сменой цвета хочется показать посетителю, что на картинки можно и нужно нажимать. Подскажите, пожалуйста, как и чем это лучше реализовать.

1
  • 1
    на js таймаут сделайте при первом посещении страницы, и там замените картинки, например.
    – teran
    26 янв 2018 в 10:30

2 ответа 2

1

Можно написать через 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>
...
2
  • Да, благодарю, работает. А что еще дописать в код, чтобы смена картинок происходила плавно?
    – CeReRa
    29 янв 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
1

Можно обойтись без использования javascript.

Ключевые моменты в коде css.


Это:


  1. свойство filter:grayscale();
  2. свойство 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>
   

И, да, кстати. Вам теперь не нужны изображения в серых тонах ;-)

1
  • благодарю, решение интересное) но у меня картинки в сепии должны становиться цветными. При чем сепия вполне определенного оттенка, тут filter: sepia (100%) не подходит. Да и смена должна происходить плавно через 2 секунды после пребывания на странице.
    – CeReRa
    27 мар 2018 в 11:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.