Воспроизводится анимация перед прелоадером?

Question

[fsociety_one]

Добрый день! Верстаю свой сайт-портфолио, по сути он уже готов и т.д. но решил добавить прелоадер, для того что бы был. Когда заходишь на сайт должна воспроизводиться анимация с плагина "WowJS", да вот только она воспроизводится за прелоадером. Хотел сделать с помощью добавления классов по окончанию загрузки, но не получилось.

Comments

[GessNNF]

К сайту можно обратиться через сеть? Было бы неплохо, увидеть проблему собственными глазами, иначе сложно что-то сказать. Может быть, там бональные ошибки:

• в сss, какой нибудь z-index,
  
• в css, не к тому элементу заданы класы :D,
  
• в js, проблема в версии библиотеки
  
• и т.д..
  

[fsociety_one]

GessNNF, Да, сайт стоит на бесплатном хостинге и домене
Ссылка: n92926ww.beget.tech
То-есть, допустим я обычный пользователь увидел ссылку, меня перекидывает на сайт и я оказываюсь в его шапке, пока действует прелоадер анимация которая в шапке уже выполнилась и когда прелоадер убирается, то никакой анимации соответственно нет. Но, если прокрутить до вкладки "Портфолио", обновить страницу, прокрутить обратно до шапки, то можно заметить что анимация присутствует.

Answer 1

[GessNNF]

window.onload = function() {} - если не ошибаюсь, начинает выполняться по загрузке всех ресурсов страницы (картинок, стилей и т.п.). У вас в обработчике этой стадии находиться функция прелоадера (fadeOutnojquery), которая вызывается еще через интервал в 1.2 секунды. А инициализация анимации (new WOW().init();) вызывается сразу, до того как страница загружена и тем более, до запуска функции прелоадера.

В функции прелоадера есть код, попробуйте добавить инициализацию в него

...
if (el.style.opacity <= 0.05) {
    clearInterval(interhellopreloader);
    hellopreloader.style.display = "none";
    // перенесите сюда
    new WOW().init();
}
...

Comments

[fsociety_one]

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

Answer 2

[fsociety_one]

Все, получилось! Исправил дергание текста (Когда прелоадер полностью исчезал, только тогда вызывалась анимация и было дергание) с помощью еще одной проверки if (el.style.opacity <=0.99) {new WOW().init();} Благодарю за помощь! :)