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

Question

[Ivan Ivanovich]

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

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

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

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

Заранее спасибо всем!

Comments

[Пашенька]

Конкретно этот работает таким образом, что есть две картинки с текстом(в данном случае это svg): темная и светлая. Одна из них смещена влево на свою ширину. И она просто анимируется посредством background-position.
Это можно реализовать как угодно иначе, включайте фантазию.

[Ivan Ivanovich]

like-a-boss, спасибо, я думал что это работает как-то по другому, потому что первое что бросилось в глаза было

background-image: url("http://www.syndicut.co/images/logo-white.svg")

, а это немного не то

[Пашенька]

Ivan Ivanovich, необязательно делать, как здесь. Не все свойства одинаково предназначены для анимирования и могут оказывать влияние на производительность. Лучше всего анимировать смещение через transform: translate3d(); и transition, соответственно - получится максимально производительно.

[Ivan Ivanovich]

like-a-boss, Спасибо, буду пробовать

Answer 1

[Антон Усачев]

В цсс примерно так. Думаю, принцип будет понятен:

Comments

[Ivan Ivanovich]

Антон Усачев Спасибо большое!

Answer 2

[Константин]

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);
	}
}

Comments

[Ivan Ivanovich]

Константин Я не могу понять как там css реализован, столько стилей, если есть время можете помочь начеркать в codepen? Я пытаюсь, но не уверен что получиться, а задумка интересная и я хочу разобраться в ней

[Vitaliy]

Ivan Ivanovich, все просто - два элемента с идентичным текстом, но разным его цветом. Один из блоков обрезается по width (overflow hidden в помощь)

[Ivan Ivanovich]

Виталий Столяров, Ну всё равно, может человек сможет набросок сделать, чтобы это заняло у меня в разы меньше времени, тут для вас это легко, а для начинающих это кажется достаточно сложно

[Константин]

body {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  position: relative;
  min-height: 100vh;
  background-color: #FFFFFF;
}

body.preload {
  overflow: hidden;
}

.preload header .logo {
  left: 50vw;
  top: 50vh;
}

.preload header .logo:not(div) {
  opacity: 0;
}

@media screen and (max-width: 799px) {
  .preload header .logo {
    left: 30px;
    -webkit-transform: translate3d(0px, -50%, 0);
    transform: translate3d(0px, -50%, 0);
  }
}

.loading header .logo {
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
  transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

.loading header .logo:not(a) {
  opacity: 1;
  z-index: 3;
}

.loading header .logo:not(a) span {
  width: 0%;
}

[Максим]

Константин, там же две svg друг друга перекрывают ..на after и before

[Константин]

точно, да. Ну, там ниже уже пример набросали

[Ivan Ivanovich]

Константин, Спасибо большое!

Answer 3

[Alex]

Вставляете html с исходным текстом и одним скриптом. И уже этот скрипт загружает весь остальной контент, все стили, после чего прячет прелоадер.

Comments

[Ivan Ivanovich]

Alex Как реализовать изменения цвета букв в прелоадере? Это главный вопрос