Плавная загрузка страницы - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 03.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Плавная загрузка страницы

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Плавная загрузка страницы

Эффект плавного перехода при загрузке страниц сайта




Страницы сайта будут плавно исчезать и появляться после добавления скрипта работающего при подключенной библиотеке jQuery. Эффект плавности зависит от установленного параметра времени, синхронизировать переходы нужно для каждого сайта индивидуально. Постараюсь подробнее пояснить как нужно настраивать скрипт, а там методом научного тыка можно найти золотую середину. Устанавливать скрипт лучше в "Нижнюю часть сайта" если хотите наблюдать эффект плавности перехода на всех страницах Вашего сайта. Аналогичным эффектом оборудованы сайты WIX, вот у меня там есть такой Меренков Михаил.





Основное требование к адекватной работе эффекта плавности

Вёрстка сайта должна иметь основной селектор, на сайтах системы uCoz тег <body> таковым не является, в стандартной таблице стилей основным селектором внутри которого находится вся страница является идентификатор <div id="wrap">. Вы можете зайти в "ПУ" - > "Управление дизайном" - > "Верхняя часть сайта" и посмотреть, в самом верху должен находиться такой селектор, если такого нет надо будет сделать. Открываете "Верхнюю часть сайта" и в самый верх вставляете <div id="wrap">, затем открываете "Нижнюю часть сайта" и в самый низ вставляете </div>, теперь можно приступать к установке и настройке скрипта плавной загрузки страниц.


Установка скрипта плавной загрузки

Устанавливаем пример скрипта в "Нижнюю часть" сайта, можно в самый низ.



<!-- MyFade -->
<script type="text/javascript">
$(document).ready(function() {
$("#wrap").css("display", "none");
$("#wrap").fadeIn(7000);
$("a.myfade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#wrap").fadeOut(100, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
<!-- /MyFade -->



Настройка скрипта плавной загрузки

Основному селектору #wrap установлено время плавного появления загружаемой страницы числом 7000 миллисекунд, со значением времени нужно только экспериментировать, чем тяжелее страницы тем выше значение. Плавность появления не берёт на себя время, она происходит параллельно загрузке.



$("#wrap").fadeIn(7000);


Устанавливаем имя селектору тега <a> как классу (<a href="#" class="myfade">), при нажатии на ссылку с таким классом будет происходить эффект плавности перехода, другими словами Вам нужно добавить класс myfade в задействованные ссылки ( кнопки ). Если у ссылки уже есть класс (class) ничего страшного, через пробел дописываем второй или третий (если 2 уже есть) вот так - <a href="#" class="moiclass myfade"> так можно делать.



$("a.myfade").click(function(event){


Основному селектору #wrap установлено время плавного исчезания загружаемой страницы числом 100 миллисекунд, будьте внимательны при повышении значения 100, установленное время не будет включено в загрузку страницы, то есть сначала страница будет затухать 100 миллисекунд, а уже потом пойдёт загрузка!!!



$("#wrap").fadeOut(100, redirectPage);



Выявленные недостатки в работе скрипта

Как ни странно, даже если тегу <a> присвоить индивидуальное имя класса, действие скрипта наследуется всеми тегами <a>, советую выбрать только один из эффектов, или появление (эффекту затухания устанавливаем значение 0) или ноль устанавливаем эффекту плавного появления, так ещё куда ни шло чмыкает. Сами решайте, попробуйте и оцените преимущества и недостатки этой странной фичи. В редакторе HTML проверить работу скрипта нельзя, его можно проверить только установив на своём сайте!!!








Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2247 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: страниц, плавно, Для сайта, загрузка, медленно

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]