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

Аудиоплеер для сайта 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



Фон Counter Strike с меняющимися картинками | Скрипт для сайта


Фон Counter Strike с меняющимися картинками




Применяются технологии CSS3,я долго сидел думая как такое можно сделать,в итоге сделал и хочу поделится с Вами.Фон будет работать если стили сайта сделаны без ошибок ( я испытывал его на 4 сайтах,на 1 он не работал из за неправильной таблицы стилей,в частности свойства z-index расставленного непоследовательно).Дополнительно стоит обратить внимание элемент управляющий показом фона,обычно за таким элементом привязана имеющаяся картинка фона.выглядит такой элемент приблизительно так ▼

background:#000 url('/images/body_bg.jpg') top left repeat-x fixed;

Вам нужно будет его изменить,сделав его прозрачным то есть заменить на ▼

background:transparent;

Далее,на используемых страницах модулей вставить код который находится ниже сразу после тега <body>.Имеются в виду все модули,включая "Пользователи","Гостевая книга","Поиск по сайту" + разумеется основные модули с материалом,такие как "Каталог файлов","Блог" и тд.
Самое главное!!!
Обязательно делайте копию Вашего файла CSS перед изменением,вдруг что пойдёт не так - замените.Всё должно работать если нет погрешностей в вёрстке самого сайта - это безоговорочное условие!Для примера я использовал этот материал,стили будут работать даже так,каждый материал может иметь по 6 меняющихся фонов при желании.Делать все элементы прозрачными я не стал,но Вы можете посмотреть как он работает в полном объёме на ЭТОМ САЙТЕ.




Код устанавливаем на страницах модулей после <body>


<style>
ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_7.jpg);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
 25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>
<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>

Проверить код в работе

Вставьте код в HTML редактор и проверьте.









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 8758 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: изменение фона

    Всего комментариев: 11
    0   Спам
    10 serna62   (14.04.2014 16:34)
    Аватар serna62 Здравствуйте. Помогите пожалуйста. Как можно поменять фон отдельно взятой страницы на картинку? Как здесь.

    0   Спам
    11 IZOTOP   (15.04.2014 14:52)
    Аватар IZOTOP У каждой страницы сайта может быть свой фон, но Вам надо было указать не чужой а свой сайт.
    Свойства находящиеся ниже внешних имеют приоритет, поэтому, при добавлении нового материала через HTML редактирование можно дописать вот это:
    Код

    <style>
    body {
    background:transparent;
    }
    </style>
    <script src="//delaisait.ucoz.ru/script/effect/2014/js/backgroundsize.js"></script>
    <script>
    var images = [
    "http://fantastic-girl.ucoz.ru/_ph/1/801058435.jpg"
    ];
    var index = 0;
    $.backgroundsize(images[index]);
    </script>


    Меняйте ссылку на изображение и всё.

    0   Спам
    9 Fanat   (04.03.2014 16:14)
    Аватар Fanat Как закрепит меняющий фон,чтоб не прокручивался?

    0   Спам
    8 Pip21   (13.09.2013 19:05)
    Аватар Pip21 Здравствуйте!
    Подскажите могу ли я используя этот код установить свои картинки?

    0   Спам
    7 serna62   (28.07.2013 15:36)
    Аватар serna62 Супер. respect Всё получилось. respect Огромное СПАСИБО. respect
    Осталось за малым: подобрать нужные цвета, но это уже не проблема.

    0   Спам
    5 Admin9349   (26.07.2013 15:19)
    Аватар Admin9349 Вот адрес сайта . Сейчас на нём применяется один цвет на всех страницах. Я бы хотел, что бы на каждой странице был бы свой статичный цвет, в зависимости от тематики страницы.

    0   Спам
    6 IZOTOP   (28.07.2013 13:34)
    Аватар IZOTOP Вам нужно изменить html код страниц.
    Найдите вот такую строку:

    Код

    <body style="background-color:#99CCFF; margin:0;padding:0;">


    Замените её на:

    Код

    <body style="margin:0;padding:0;">
    <div id="wrap">


    Там же внизу найдите тег:

    Код

    </body>


    И замените его на это:

    Код

    </div>
    </body>


    Далее, в самый верх таблицы стилей вставьте:

    Код

    #wrap{background-color:#99CCFF;}


    Этот цвет фона будет по умолчанию на всех страницах.
    На тех страницах где нужно будет изменить цвет фона, через панель HTML кодов добавьте вот это:

    Код

    <style>
    #wrap{background-color:#99CCFF;}
    </style>


    Замените цвет ( #99CCFF ) на тот который нужен.
    Таким образом можно сделать любой странице свой цвет фона.

    0   Спам
    3 Admin9349   (24.07.2013 15:32)
    Аватар Admin9349 Спасибо за подсказку. Мне нужно было только сделать разного цветные страницы, их 11 штук. Но не смог разобраться что и куда. sad
    Как создать формы разных цветов в большом кол-ве, где их устанавливать. Помогите.
    Но данный сайт всё равно классный.

    0   Спам
    4 IZOTOP   (25.07.2013 20:13)
    Аватар IZOTOP Напишите адрес страниц где хотите изменять цвет фона, не всех если они находятся в одном модуле или созданы через "Редактор страниц".
    И подробнее объясните как должны работать формы цветов.

    0   Спам
    2 IZOTOP   (23.07.2013 19:54)
    Аватар IZOTOP Сделать фон для каждой страницы в отдельности можно.
    Можно сделать с картинками, цветом или градиентом фона если длинна кода будет позволять.
    Нужно создать 3 дополнительных поля, если используются все 3 возможности . Поместите на странице комментариев модуля, там будет меняться фон, в зону head вот такой код:

    Код

    <style>
    #wrap {
    <?if($OTHER1$ or $OTHER2$ or $OTHER3$)?>
    <?else?>
    background-color:#000000;
    <?endif?>
    <?if($OTHER1$)?>
    background: url($OTHER1$) fixed no-repeat 100% 0;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    -ms-background-size:100% 100%;
    <?else?><?endif?>
    <?if($OTHER2$)?>
    background-color:$OTHER2$ ;
    <?else?><?endif?>
    <?if($OTHER3$)?>
    background-image:$OTHER3$ ;
    -o-background-image:$OTHER3$ ;
    -ms-background-image:$OTHER3$ ;
    <?else?><?endif?>
    }
    </style>


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

    radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%)

    Тогда будет фон с градиентом.
    --------------\\---------------
    Если не будет заполнено не одно поле тогда фон будет чёрным.

    0   Спам
    1 Admin9349   (23.07.2013 14:22)
    Аватар Admin9349 Класс! ok
    Вопрос: можно ли сделать так, чтобы на каждой страницы был свой фон и чтобы фон был не картинка, а любая цветовая гамма (красная, синяя и т.д.)и куда загружать картинки, что потом брать ссылку на них?
    Я ведь не мастер, я только учусь.


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