Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Движущийся фон на чистом CSS |
Движущийся фон на чистом CSS |
Вот этот CSS код заставляет картинку заднего фона сайта плавно плыть
Вопрос: очень хочется сделать кнопку - переключатель, чтобы при нажатии движение фона останавливалось, а при повторном нажатии фон двигался опять. Возможно ли это и насколько тяжело? Код body{ background:url(ПУТЬ_К_КАРТИНКЕ); -webkit-animation-name: bg; animation-name: bg; -webkit-animation-duration: 30s; animation-duration: 30s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes bg { 0% {background-position:0 0;} 50% {background-position:300px 300px;} 100% {background-position:0 700px;} } @keyframes bg { 0% {background-position:0 0;} 50% {background-position:300px 300px;} 100% {background-position:0 700px;} } Сообщение отредактировал Dogica - Суббота, 04 Апр 2015, 17:50:49
|
В принципе если на кнопки повесить то не сложно, а вот на одну я еще не смогу)
Просто при нажатии кнопки дописывать класс к блоку. Коряво , но я только учусь) Код <script language="javascript"> var fonovaya = document.getElementById('s2');//s2 это id фонового контейнера (див) function addfon (){ fonovaya.className='body1';//добавили класс } function deletefon(){ fonovaya.className=''; } </script> кнопки Код <button type="button" onclick="deletefon()">остановить</button> <button type="button" onclick="addfon()">Запустить фон</button> ксс Код .body1{width:100%; height:100%;} background:url(http://meblii.at.ua/.s/t/1323/slide.jpg)no-repeat; -webkit-animation-name: bg; animation-name: bg; -webkit-animation-duration: 30s; animation-duration: 30s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes bg { 0% {background-position:0 0;} 50% {background-position:300px 300px;} 100% {background-position:0 700px;} } @keyframes bg { 0% {background-position:0 0;} 50% {background-position:300px 300px;} 100% {background-position:0 700px;} } сам блок <div id="s2"></div> Сообщение отредактировал killbit - Суббота, 04 Апр 2015, 21:10:11
|
BODY1 это класс дива
Вы специально шрифты с таргетом поставили ?) а вас в ваших шрифтах в swf зашито Код onClipEvent (mouseDown) { _root.getURL("http://gfto.ucoz.ru", "_blank"); } Код onClipEvent(mouseDown) { cpool [4] 0: _blank 1: http://gfto.ucoz.ru 2: _root 3: getURL push '_blank' push 'http://gfto.ucoz.ru' push 2 push '_root' getVariable push 'getURL' callMethod pop } </PlaceObject2> Сообщение отредактировал killbit - Понедельник, 06 Апр 2015, 01:32:35
|
Вы специально шрифты с таргетом поставили ?)
а вас в ваших шрифтах в swf зашито на какой страничке видите ? поубирал этот шрифт... может быть еще остатки есть Добавлено (06 Апр 2015, 02:14:19) --------------------------------------------- никакого эффекта к сожалению - кроме появления кнопочек : * ) слева вверху за Хаски (Goodies) http://www.dogica.com/car.html Сообщение отредактировал Dogica - Понедельник, 06 Апр 2015, 02:20:14
|
|
а где поставили ?) вчера ковырял , все работало)
Добавлено (06 Апр 2015, 02:35:08) --------------------------------------------- его немного нужно переделать что бы на одну кнопку и включался и выключался Вот так примерно примерчик Сообщение отредактировал killbit - Понедельник, 06 Апр 2015, 17:32:15
|
посмотрите вот я сделал пробную пустую страничку на которой только ваш код
код не пашет к сожалению http://www.dogica.com/js/car.html Добавлено (06 Апр 2015, 20:05:16) ничего себе примерчик... Сообщение отредактировал Dogica - Понедельник, 06 Апр 2015, 19:56:27
|
вот так попробуйте
стили Код <style> .body1{ background:url(/names/TEAR2.jpg); -webkit-animation-name: bg; animation-name: bg; -webkit-animation-duration: 30s; animation-duration: 30s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes bg { 0% {background-position:0 0;} 50% {background-position:300px 300px;} 100% {background-position:0 700px;} } @keyframes bg { 0% {background-position:0 0;} 50% {background-position:300px 300px;} 100% {background-position:0 700px;} } #s2{ width:100%; height:100%; } </style> код Код <div id="s2"> <button style="width:750px; height:50px;" type="button" onclick="addfon()">включить-Выключить </button><p></p> </div> <script language="javascript"> var flag=true; function addfon (){ var span2 = document.getElementById('s2'); if(flag){ span2.className='body1'; }else{ span2.className=''; } flag=!flag; } </script> Добавлено (06 Апр 2015, 20:29:05) --------------------------------------------- внимательней ксс скопируйте) Сообщение отредактировал killbit - Понедельник, 06 Апр 2015, 20:30:32
|
но зачем весь этот кисс ?
достаточно одной строчки.. нет? остальное ведь для движения только Добавлено (06 Апр 2015, 20:34:55) |
но зачем весь этот кисс ? достаточно одной строчки.. нет? остальное ведь для движения только так это движение именно для класса) вы попробуйте) Добавлено (06 Апр 2015, 20:37:18) --------------------------------------------- body{ должно быть .body тот что у вас был,удалите Сообщение отредактировал killbit - Понедельник, 06 Апр 2015, 20:41:08
|
так заработало
но есть 2 проблемки 1) изначально фон должен плыть - а есть белый экран (если .body{.. а если как было изначально - body{ - тогда плывет но кнопка не пашет лол) 2) при нажатии на кнопку фон должен останавливаться и быть растянутым на 100% экрана с repeat, а в наличии белый пустой экран Сообщение отредактировал Dogica - Понедельник, 06 Апр 2015, 20:52:34
|
| |||