Эффекты предзагрузки страниц на html и css (30 штук)

Эффекты предзагрузки страниц на html и css (30 штук)

526

Очень красиво смотрятся сайты, в которых перед загрузкой страницы появляется анимация, например, затемнение экрана, перелистование страниц или какое-то действие. Это так называемые preload эффекты. Рассмотрим подробнее, как их организовать а своем сайте.

Более всего мне понравился "скрипт" с западного сайта. Скрипт взял в кавычки, так как jQuery здесь практически не используется - всего одна строка кода. Но зато более активно используется css и html.

Данная предзагрузка страницы работает так - перед открытием сайта появляется анимация. В это время грузятся скрипты, текст и картинки вашего сайта. После того, как все загрузится, анимация пропадет. Также, если пользователь принудительно нажмет на страницу, анимация сразу пропадет (эту опцию можно отключить). Данный способ очень полезен не только для установки на сайтах, но и в php программах, чтобы пользователь не успел нажать ничего лишнего, пока программа полностью не загрузится.

Посмотреть скрипт в действии или скачать его вы можете с помощью кнопок ниже.

В скачанном архиве будет много файлов demo1.html - demo30.html. В каждом из которых, вы найдете код анимации. Подключите все согласно структуре одного из файлов анимации в индексный файл вашего сайта и радуйтесь красивой предзагрузке страницы.

В примерах есть мусор, поэтому рассмотрим способ правильного подключения анимации к вам на сайт. Подключите (на примере demo8):

В <head>:

  • 1. Для нормальной работы скрипта нужна jQuery библиотека. Если ее нет на вашем сайте, то подключите.
  • 2. Файл main.js можно не подключать - вместо него сразу пропишите немного измененый код:
    $(window).load(function() {
    $("#loading").fadeOut(500);
    $("#loading-center").click(function() {
    $("#loading").fadeOut(500);
    })
    })
  • 3. Далее потребуется style.css и весь <style> примера.

В <body>:

  • 1. Теперь после открывающего <body> подключите все содержимое тега с id loading.

Теперь, если вы все сделали правильно, перед загрузкой каждой страницы у вас будет красивая анимация.

 

 

| | Эффекты предзагрузки страниц на html и css (30 штук) | Очень красиво смотрятся сайты, в которых перед загрузкой страницы появляется анимация, например, затемнение экрана, перелистование страниц или какое-т | http://blogprogram.ru/wp-content/uploads/2016/12/526-131x131.jpg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>