Очень красиво смотрятся сайты, в которых перед загрузкой страницы появляется анимация, например, затемнение экрана, перелистование страниц или какое-то действие. Это так называемые 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.
Теперь, если вы все сделали правильно, перед загрузкой каждой страницы у вас будет красивая анимация.
PHP
Joomla
Joomla 1.5 модули и плагины
WordPress
Онлайн сервисы
Услуги
Работа в сети
Новое на сайте
Карта сайта
Как можно сделать, чтоб на стартовой стр перед началом работы был эффект поднятия полупрозрачных жалюзей снизу вверх
Добрый день!
Не работает как в примере. После загрузки страницы header и footer видны, между ними белый фон и по центру крутится svg анимация из примера и не пропадает.
как вы видите в демонстрации все работает. Возможно у вас конфликт скриптов или jQuery не включен