Почему неправильно работает плавное затемнение?

Question

[Андрей Филимонов]

Здравствуйте, делаю как в примере, тут задумано, что главная верхняя картинка сначала затемнена, а через секунду проявляется. У меня на странице почему-то сначала видна картинка, потом затемняется, а потом опять проявляется. Как поправить? Как сделать как в примере?

Comments

[Алексей Струков]

Код на jsfiddle или аналогичные сервисы выложи. Желательно только html и css этой картинки

[ой всё]

фиддл в данном случае не нужен
но указать где находится код не помешало бы, чтобы не рыться в вашем сайте

полезная привычка - держать весь js код в отдельном файле а не в хтмл, для простоты отладки

[Алексей Струков]

AnneSmith, не все сидят с компьютера)
С телефонов и планшетов открыть инструменты разработчика не представляется возможным, к сожалению)

[rinatoptimus]

При загрузке страницы у body имеется класс is-loading, и в коде написано, что у баннера внутри body.is-loading прозрачность 0.25. Что-то типа того...
В общем, смотрите, как там этот класс срабатывает, если я правильно понял, на нем все завязано.
Попробуйте отключить это свойство в браузере, увидите, как сработает эта анимация: joxi.ru/eAOB8zvU4EWob2

Answer 1

[ой всё]

в banner: after стоит
opacity: 0.25;
попробуйте с 1

Comments

[Андрей Филимонов]

тогда картинка полностью чёрная

[ой всё]

Андрей Филимонов, у вас весь код в html, при всем желании дебаг не сделать
на гадания нет времени

Answer 2

[Вадик Серебрянский]

Добавь скрипт, например в кастом.js или футер.

$( document ).ready(function() {
$('.slider', this).css({ opacity: 1 });
});

Сделай свой хедер, добавь к нему класс slider
В CSS добавь
.slider {opacity:0; transition: 1s;}
При загрузке страницы скрипт изменит затемнение на нормально видимый слайдер за 1 секунду.

Comments

[Андрей Филимонов]

А зачем с js? В примере без скриптов работает