Прелоадер для сайта?

Question

[Muxammadislom Eshonqulov]

Доброго времени.
Нужно сделать прелоадер.
1 светлый фон
2 на этом фоне распашная Дверь
3 верхний текст текст logo.
4 нижний текст Откройте совершенство
5 без задержки текст приближается к пользователю и растворяется
6 двери в это время открываются
7 с эффектом что пользователь якобы пролетает во внутрь
3D скорее всего так это называется
8 и во время всех этих действий все элементы растворяются
Вопрос. я не силён в js и не получается сделать 5 и 7 пункт. Искал в интернете но не могу найти. Если есть примеры где используется похожий прилоадер или статья можете подсказать не могу найти. Спасибо большое за ответ.

Answer 1

[Gary_Ihar]

Я почти уверен, что тут можно обойтись без js. CSS должен справиться налегке. Попробуйте @keyframes и поиграть с параметром scale и opacity у двери и лого на определенных моментах. Мне кажется, что это поможет достигнуть цели "приближение к пользователю".
Открывающуюся дверь тоже таким же способом , но уже с помощью translate как-нибудь

Answer 2

[ksnk]

Нужно найти/нарисовать картинку с анимированием открытия двери, и сделать что-то такое
В примере анимация стартует по наведению мыши, в прелодере лучше добавить правило, применяющее стиль в конце тела прелодера - блок стилей перед < / body > . Или по таймауту на javascript.

Да, scale будет разумнее, чем установка размера, если картинка в большом увеличении не будет выглядеть коряво. Если картинка рисованная - указать размер в пикселях может быть более правильно.