Страница 1 из 212»
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Движущийся фон на чистом CSS
Движущийся фон на чистом CSS
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 1 | 17:48:44
Вот этот 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;}
}


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Суббота, 04 Апр 2015, 17:50:49
killbit
Сообщений: 317
Репутация: 104

Сообщение # 2 | 20:41:07
В принципе если на кнопки повесить то не сложно, а вот на одну я еще не смогу)
Просто при нажатии кнопки дописывать класс к блоку.

Коряво , но я только учусь)

Код
<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
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 3 | 22:01:40
спасибо, добрый человек! =)
пошел пробовать.. внедрю и отпишусь
я только не понял BODY1 чем собственно отличается от BODY который движется?


WWW.DOGICA.COM / WWW.DOGICA.ORG
killbit
Сообщений: 317
Репутация: 104

Сообщение # 4 | 01:23:21
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
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 5 | 02:19:47
Вы специально шрифты с таргетом поставили ?)
а вас в ваших шрифтах в swf зашито


на какой страничке видите ?
поубирал этот шрифт... может быть еще остатки есть

Добавлено (06 Апр 2015, 02:14:19)
---------------------------------------------
никакого эффекта к сожалению - кроме появления кнопочек : * )
слева вверху за Хаски (Goodies)

http://www.dogica.com/car.html


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Понедельник, 06 Апр 2015, 02:20:14
killbit
Сообщений: 317
Репутация: 104

Сообщение # 6 | 02:20:27
Вы можете этот класс прописать боди или обернуть весь контейнер.открыть под <body>
закрыть перед </body>
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 7 | 02:22:50
где прописаны линки.. как SWF файл(ы) называются?


WWW.DOGICA.COM / WWW.DOGICA.ORG
killbit
Сообщений: 317
Репутация: 104

Сообщение # 8 | 02:26:27
нашел на странице регистрации

проверьте папку

/DOGZ/2/4/63.swf
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 9 | 02:27:31
поставил JAVASCRIPT и <div="s2"> в конце перед закрывающим </body>
CSS перед </head>
кнопки есть.. но ничего не делают все равно :*)

Добавлено (06 Апр 2015, 02:27:31)
---------------------------------------------
/DOGZ/2/4/63.swf ок спасибо
ща удалю
=)



WWW.DOGICA.COM / WWW.DOGICA.ORG
killbit
Сообщений: 317
Репутация: 104

Сообщение # 10 | 02:35:08
а где поставили ?) вчера ковырял , все работало)

Добавлено (06 Апр 2015, 02:35:08)
---------------------------------------------
его немного нужно переделать что бы на одну кнопку и включался и выключался

Вот так примерно
примерчик
Сообщение отредактировал killbit - Понедельник, 06 Апр 2015, 17:32:15
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 11 | 20:05:16
посмотрите вот я сделал пробную пустую страничку на которой только ваш код
код не пашет к сожалению tongue cry

http://www.dogica.com/js/car.html

Добавлено (06 Апр 2015, 20:05:16)
---------------------------------------------

Цитата killbit ()
Вот так примернопримерчик
wacko unsure facepalm
ничего себе примерчик...


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Понедельник, 06 Апр 2015, 19:56:27
killbit
Сообщений: 317
Репутация: 104

Сообщение # 12 | 20:29:05
вот так попробуйте
стили
Код
<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
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 13 | 20:34:55
но зачем весь этот кисс ?
достаточно одной строчки.. нет?
остальное ведь для движения только

Добавлено (06 Апр 2015, 20:34:55)
---------------------------------------------
поставил весь код один к одному
посмотрите
http://www.dogica.com/js/car.html



WWW.DOGICA.COM / WWW.DOGICA.ORG
killbit
Сообщений: 317
Репутация: 104

Сообщение # 14 | 20:37:18
Цитата Dogica ()
но зачем весь этот кисс ?
достаточно одной строчки.. нет?
остальное ведь для движения только

так это движение именно для класса) вы попробуйте)

Добавлено (06 Апр 2015, 20:37:18)
---------------------------------------------
body{
должно быть .body

тот что у вас был,удалите
Сообщение отредактировал killbit - Понедельник, 06 Апр 2015, 20:41:08
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 15 | 20:44:03
так заработало
но есть 2 проблемки
1) изначально фон должен плыть - а есть белый экран (если .body{.. а если как было изначально - body{ - тогда плывет но кнопка не пашет лол)
2) при нажатии на кнопку фон должен останавливаться и быть растянутым на 100% экрана с repeat, а в наличии белый пустой экран


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Понедельник, 06 Апр 2015, 20:52:34
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Движущийся фон на чистом CSS
Страница 1 из 212»
Поиск: