IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности

Как реализовать такой прелоадер?

Здравствуйте.

Подскажите пожалуйста как реализовать такой прелоадер с этого сайта.

Если есть возможность, начеркайте например в codepen наброски как он реализован там или свой, я дальше сам разберусь. Не могу понять как он работает.

Нужно именно реализовать постепенное заполнение цвета букв в прелоадере

Заранее спасибо всем!
  • Вопрос задан
  • 263 просмотра
Решения вопроса 2
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
В цсс примерно так. Думаю, принцип будет понятен:

Ответ написан
F12 же:

document.addEventListener("DOMContentLoaded", function (event) {
	window.scrollTo(0, 0);
	body = document.querySelector("body");
	progressElem = document.querySelector("header .logo span");
	AddClass(body, 'loading', true);
	Loading();
});

function Loading(val) {
	'use strict';

	progress = val || progress;

	if (progress < 100) {
		setTimeout(function () {
			progressElem.style.width = progress + "%";
			if (!val) {
				progress += (100 - progress) / 5;
				Loading();
			}
		}, 1000)
	} else {
		setTimeout(function () {
			AddClass(body, 'preload', false);
		}, 2000);
		setTimeout(function () {
			AddClass(body, 'loading', false);
		}, 3000);
	}
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Вставляете html с исходным текстом и одним скриптом. И уже этот скрипт загружает весь остальной контент, все стили, после чего прячет прелоадер.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы