Фон сайта с меняющимися картинками и фото - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.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



Фон сайта с меняющимися картинками и фото

Делаем фон сайта с меняющимися картинками или фото




После добавления скрипта к себе на сайт, его фон будет меняться, можно использовать картинки или фото.Для работы эффекта используется плагин backstretch_version_1.2.5 библиотеки jQuery, поэтому сама библиотека должна быть подключена ( на сайте системы юКоз она задействована по умолчанию ).Скрипт смены фона будет работать даже в материале модуля, как здесь.Поэтому для установки достаточно поместить весь код в любом месте в зону HTML, например:
1.Если одни и те же картинки будут использоваться на всех страницах сайта тогда поместите весь код скрипта в "Нижнюю часть сайта".
2.Если делать разный фон для всех страниц модулей отдельно, тогда на каждой странице модуля ( например "Главная страница", "Страница категорий" и т.д ) поместите код скрипта перед закрывающим тегом </body>.
3.Если background на сайте будет меняться в каждом материале, тоесть каждый отдельно взятый материал будет иметь свой изменяющийся фон, тогда поместите весь код скрипта в материале - добавив его через "Панель HTML кодов".
Хочу сразу предупредить, хоть картинок и можно использовать неограниченное количество, не стоит применять их более 6 - 7 и использовать только расширение .jpeg или .jpg.Размер применяемых изображений будет растянут по всей ширине\высоте но желательно подобрать побольше.Если что не понятно с установкой или есть дополнительные пожелания, подробнее опишите их в форме комментариев.В нижней части материала есть редактор для проверки скриптов в действии, воспользуйтесь им чтобы проверить код установки в действии.





Код скрипта для установки


<script src="http://delaisait.ucoz.ru/js/jQuery/plugin/backstretch_version_1.2.5.js">
</script>
<script>
var images = [
"http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_1.jpg",
"http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_2.jpg",
"http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_3.jpg",
"http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_4.jpg",
"http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_5.jpg",
"http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_6.jpg"
];
var index = 0;
$.backstretch(images[index], {speed: 500});
setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
</script>



Библиотека jQuery для проверки работоспособности

Библиотека нужна только для проверки работы эффекта изменения фона в редакторе ниже!!! Не устанавливайте библиотеку к себе на сайт если он на uCoz, у Вас она уже есть.



<script type="text/javascript" src="http://s107.ucoz.net/src/jquery-1.7.2.js"></script>


Проверьте как работает эффект

Пометите в редактор библиотеку jQuery и код скрипта для установки, посмотрите работу эффекта в действии.










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



Ссылка:
BB code:




  • ©
  • | Просмотров: 5251 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: анимировать фон, изменить фон, разный фон

    Всего комментариев: 6
    0   Спам
    6 Lyubov   (23.09.2014 02:07)
    Аватар Lyubov Ответа не дождалась, ну я разобралась уже)

    0   Спам
    4 jm_69   (17.01.2014 20:47)
    Аватар jm_69 У меня на сайт нет Глобальны блок Нижняя часть сайта! Куда вставить код? cry

    http://polimed-montana.ucoz.ru

    0   Спам
    5 IZOTOP   (18.01.2014 10:30)
    Аватар IZOTOP При отсутствии "Нижней части", скрипт нужно устанавливать на страницах модулей. Так чтобы эффект фона работал на главной странице сайта, поместите скрипт в модуле "Страницы сайта".



    Размещать скрипт нужно перед закрывающим тегом </body>.

    0   Спам
    3 serna62   (07.08.2013 21:53)
    Аватар serna62 Спасибо.

    0   Спам
    1 serna62   (07.08.2013 19:28)
    Аватар serna62 Подскажите пожалуйста, а где найти "Нижнюю часть сайта"? И если можно, то наглядным примером (скрином).

    0   Спам
    2 IZOTOP   (07.08.2013 20:14)
    Аватар IZOTOP Вопрос понятный.
    Вот самый простой способ как найти "Нижнюю часть сайта", но для этого понадобится зайти на сайт как администратор.
    1.Перейдите на главную страницу сайта.
    2.Найти в админ панели кнопку "Дизайн" и нажать на неё, в выпадающем списке выбрать "Управление дизайном сайта" вот картинка:



    3.Нажав на кнопку "Управление дизайном сайта" Вам откроется страница "Управления дизайном", нажмите "Нижняя часть сайта" и посетите её, вот картинка:



    == \ ==

    Скрипт фона скопируйте в самый верх "Нижней части сайта".


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