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

Question

[meltmestnt]

Здравствуйте. Очень понравился прелоадер для каждой страницы на этом сайте: www.poigneedemainvirile.com/le-studio/.
Так же динамический фон с постоянно меняющимся фоном и изображением.
Что тут используется для прелоадера и как они сделали такой фон? Наложили цветное изображение на фон?

Answer 1

[Антон Спирин]

Так же динамический фон с постоянно меняющимся фоном и изображением.

javascript. Смотрите какие стили и как меняются на странице после ваших действий.

Что тут используется для прелоадера

<div class="progressbar" style="z-index: 2; opacity: 1;">
  <span id="progressbar" style=""></span>
</div>

и как они сделали такой фон? Наложили цветное изображение на фон?

<div class="projects__images js-projects--images" style="opacity: 1;">
  <div class="projects__image desaturate js-projects--image" style="z-index: 2; opacity: 0; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/180g/header.jpg&quot;);"></div>
  <div class="projects__image desaturate js-projects--image current" style="z-index: 1; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/xme-company/header.jpg&quot;); opacity: 1;"></div>
</div>

Учитесь пользоваться панелью разработчика и анализировать код самостоятельно. Своим вопросом, вы просите сделать это за вас.

Comments

[meltmestnt]

Мне нужно было уточнить: как реализовать такую анимацию при загрузке страницы? Фон делиться на две части и раздвигается.

[Антон Спирин]

meltmestnt, просто делаете этот фон двумя блоками и раздвигаете любым удобным способом.