Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Где сидел кузнечик в детской песни Н.Носова ?
Всего ответов: 1295
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Реалистичные облака на CSS3

Хочешь сказать спасибо? Кликни на рекламный баннер.

09.05.2013, 00:29
Эффект чарующий взгляд, выглядит все реалистично, а главное, красиво. В этом скрипте используются картинки, поэтому и выглядит все реально. Это пример того, как можно реализовывать свои идеи средствами CSS3. Посмотрите ДЕМО пример и Вы убедитесь в красоте данного скрипта. Скрипт можно использовать как фон сайта либо в виде шапки. Время движения настраивается в стилях CSS. Вообщем где Вы будете использовать скрипт решать Вам.
Итак приступим к установке:
Это в CSS ( ПУ» Управление дизайном» Таблица стилей ):

Код
html,body {margin:0; height:100%;}  
.sky {  
  height:100%;  
  background: no-repeat #007fd5;  
  position:relative;  
  overflow:hidden;  
  -webkit-animation:sky_background 50s ease-out infinite;  
  -moz-animation:sky_background 50s ease-out infinite;  
  -o-animation:sky_background 50s ease-out infinite;  
  -webkit-transform:translate3d(0,0,0);  
  -moz-transform:translate3d(0,0,0);  
  -o-transform:translate3d(0,0,0); }  
   
.moon {  
  background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/moon.png");  
  position:absolute;  
  left:0;  
  height:100%;  
  width:300%;  
  -webkit-animation:moon 50s linear infinite;  
  -moz-animation:moon 50s linear infinite;  
  -o-animation:moon 50s linear infinite;  
  -webkit-transform:translate3d(0,0,0);  
  -moz-transform:translate3d(0,0,0);  
  -o-transform:translate3d(0,0,0); }  
   
.clouds_one {  
  background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_one.png");  
  position:absolute;  
  left:0;  
  top:0;  
  height:100%;  
  width:300%;  
  -webkit-animation:cloud_one 50s linear infinite;  
  -moz-animation:cloud_one 50s linear infinite;  
  -o-animation:cloud_one 50s linear infinite;  
  -webkit-transform:translate3d(0,0,0);  
  -moz-transform:translate3d(0,0,0);  
  -o-transform:translate3d(0,0,0); }  
   
.clouds_two {  
  background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_two.png");  
  position:absolute;  
  left:0;  
  top:0;  
  height:100%;  
  width:300%;  
  -webkit-animation:cloud_two 75s linear infinite;  
  -moz-animation:cloud_two 75s linear infinite;  
  -o-animation:cloud_two 75s linear infinite;  
  -webkit-transform:translate3d(0,0,0);  
  -moz-transform:translate3d(0,0,0);  
  -o-transform:translate3d(0,0,0); }  

.clouds_three {  
  background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_three.png");  
  position:absolute;  
  left:0;  
  top:0;  
  height:100%;  
  width:300%;  
  -webkit-animation:cloud_three 100s linear infinite;  
  -moz-animation:cloud_three 100s linear infinite;  
  -o-animation:cloud_three 100s linear infinite;  
  -webkit-transform:translate3d(0,0,0);  
  -moz-transform:translate3d(0,0,0);  
  -o-transform:translate3d(0,0,0)  
  ; }  
   
  @-webkit-keyframes sky_background {  
  0% {  
  background: no-repeat #007fd5;  
  color:#007fd5  
  ; }  
   
  50% {  
  background: no-repeat #000;  
  color:#a3d9ff  
  ; }  
   
  100% {  
  background: no-repeat #007fd5;  
  color:#007fd5  
  ; }  
  }  
   
  @-webkit-keyframes moon {  
  0% {  
  opacity: 0;  
  left:-200%  
  ; -moz-transform: scale(0.5);  
  -webkit-transform: scale(0.5);  
  }  
   
  50% {  
  opacity: 1;  
  -moz-transform: scale(1);  
  left:0%  
  ; bottom:250px;  
  -webkit-transform: scale(1);}  
   
  100% {  
  opacity: 0;  
  bottom:500px;  
  -moz-transform: scale(0.5);  
  -webkit-transform: scale(0.5);}  
  }  

  @-webkit-keyframes cloud_one {  
  0% {  
  left:0  
  ; }  
   
  100% {  
  left:-200%  
  ; }  
  }  
   
  @-webkit-keyframes cloud_two {  
  0% {  
  left:0  
  ; }  
   
  100% {  
  left:-200%  
  ; }  
  }  
   
  @-webkit-keyframes cloud_three {  
  0% {  
  left:0  
  ; }  
   
  100% {  
  left:-200%  
  ; }  
  }  
   
  @-moz-keyframes sky_background {  
  0% {  
  background: no-repeat #007fd5;  
  color:#007fd5  
  ; }  
   
  50% {  
  background: no-repeat #000;  
  color:#a3d9ff  
  ; }  
   
  100% {  
  background: no-repeat #007fd5;  
  color:#007fd5  
  ; }  
  }  
   
  @-moz-keyframes moon {  
  0% {  
  opacity: 0;  
  left:-200%  
  ; -moz-transform: scale(0.5);  
  -webkit-transform: scale(0.5);  
  }  
   
  50% {  
  opacity: 1;  
  -moz-transform: scale(1);  
  left:0%  
  ; bottom:250px;  
  -webkit-transform: scale(1);  
  }  
   
  100% {  
  opacity: 0;  
  bottom:500px;  
  -moz-transform: scale(0.5);  
  -webkit-transform: scale(0.5);  
  }  
  }  
   
  @-moz-keyframes cloud_one {  
  0% {  
  left:0  
  ; }  
   
  100% {  
  left:-200%  
  ; }  
  }  
   
  @-moz-keyframes cloud_two {  
  0% {  
  left:0  
  ; }  
   
  100% {  
  left:-200%  
  ; }  
  }  
   
@-moz-keyframes cloud_three {0% {left:0; }  
100% { left:-200%;} }


HTML код вставьте туда куда Вам нужно:
Код
<div class="sky">  
<div class="moon"></div>  
<div class="clouds_one"></div>  
<div class="clouds_two"></div>  
<div class="clouds_three"></div>  
</div>


Все материалы в архиве.





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 10918 | Загрузок: 1032 | Комментарии: 22 | Рейтинг: 4.2/43
Теги: CSS, скрипт, облака на css, анимация на css
Всего комментариев: 221 2 »
Сообщение №18 от ЛИдия
Добавлен: 01.11.2015

Доброго времени суток!
Вы не можете подсказать как сделать так, чтобы облака непрерывно летели.
Спасибо!
Сообщение №19 от Олег
Добавлен: 01.11.2015

Здравствуйте !
Я не совсем понял ваш вопрос, облака и так летят непрерывно.
Или вы хотите чтобы были ТОЛЬКО облака, тогда класс .moon и другие скройте (display:none;)
.moon { display:none;
background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/moon.png");
position:absolute;
left:0;
height:100%; ............
Сообщение №20 от ЛИдия
Добавлен: 01.11.2015

Да, moon уже скрыла. Проблема в том, что остается пустое место пока облака не доплывут до конца влево.
Ссылка скрыта Администратором !
Сообщение №21 от ЛИдия
Добавлен: 04.11.2015

Получается, что остается время на сайте, когда облака влево еще летят, а справа не появляются...и какое-то время их еще нет на сайте, прежде, чем снова появляются. sad
Сообщение №22 от Олег
Добавлен: 06.11.2015

Простите за долгий ответ, командировки. Поиграйтесь со временем сами.
Сообщение №12 от Юрий
Добавлен: 02.01.2015

В просьбе помог. Чем помог..? Кликал на рекламные баннеры. )
Блин.. все таки со своей проблемой поспешил.. пока занят переводом разделов файла index.css Уже перевел, теперь выясняю в какой именно раздел index.css
нужно вставить код. Но пока еще немало не ясного.
Сообщение №14 от Олег
Добавлен: 02.01.2015

В просьбе помог. Чем помог..? Кликал на рекламные баннеры.

Я вообще ничего не понял. ВЫ О ЧЁМ ???
Сообщение №15 от Юрий
Добавлен: 02.01.2015

Да господи! Просто увидел и кликнул безо всякой задней мысли и все.
ежели вам это нужно было, то ради бога..)
Сообщение №17 от Олег
Добавлен: 03.01.2015

А вот Вы о чём, СПАСИБО.
Сообщение №11 от Юрий
Добавлен: 02.01.2015

Здравствуйте Олег.
Предоставленный Вами чудесный скрипт, я попытался воплотитьу себя на сайте сверху "шапки". К сожалению ничего не вышло..
В SMF файл стилей - это index.css Вот его начальные строки



я и вставил ваш скрипт, соблюдая синтаксис, открывающие/закрывающие но теги.. никаких изменений.
Если Вас не затруднит поясните пожалуйста что сделано не так как нужно?
С Уважением hummingbird

PS. Не знаю можно ли у вас привести код в полном обьеме, ведь он займет
немало места.
Сообщение №13 от Олег
Добавлен: 02.01.2015

Что это за код и откуда он.
В данном скрипте (Реалистичные облака на CSS3) нет таких строк.
Сообщение №16 от Юрий
Добавлен: 02.01.2015

Извините Олег.
Этот код совсем не имееет никакого отношения к вашему коду. Это код/шаблон из "движка" smf в котором видимо нужно применить ваш код. И все.
Но вы рекомендуете вставить его в css Пытался, ничего не вышло.
Видимо различия существенны и осуществить его на практике не по силам дилетанту вроде меня. Уберите пожалуйста что я написал лишнее.
Более Вас беспокоить не стану.
С Ув. hummingbird
Сообщение №6 от Юрий
Добавлен: 27.12.2014

Фантастика! Изумительно, просто нет слов… по моему скромному мнению это один из самых лучших скриптов. Скрипты видел разные, но такой красоты нет.
Создателю этого чуда - большое уважение!
ps. Ответьте пожалуйста на какой платформе ваш сайт, myBB?
я более знаком с платформой SMF, язык скриптов php - идентичен.
но вот со вставкой в соответствующие места испытываю определенные трудности.
С Уважением hummingbird
Сообщение №7 от Олег
Добавлен: 28.12.2014

Здравствуйте !
Мой сайт ВРЕМЕННО находиться на Ucoz.
В скором времени сайт будет переезжать.
Сообщение №9 от Юрий
Добавлен: 28.12.2014

Здравствуйте Олег! Переезжать?
Если переезд на пользу сайту.. приятно слышать!
Надеюсь мы переедем вместе с вами, и вы не оставите нас? ))
Гуд лак!
Сообщение №10 от Олег
Добавлен: 28.12.2014

Здравствуйте Юрий !
Да дороговато стало содержать сайт на Ucoz.
При переезде всё останется, так как есть.
У меня много чего интересного в запасе, но пока нет времени.
Сообщение №5 от Валерий
Добавлен: 02.01.2014

Сделайте пожалуйста под фон сайта!
Сообщение №8 от Олег
Добавлен: 28.12.2014

Под фон какого сайта ???
Сообщение №3 от Антон Ромашко
Добавлен: 18.09.2013

Здравствуйте. Объясните подробнее куда в редакторе HTML вставить код для замены шапки.
Сообщение №4 от Олег
Добавлен: 18.09.2013

Попробуйте найти в Панели Управления "Верхний контейнер" и вставить туда.
1-6 7-7
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Солдаты в Первую Мировую войну были первыми, кто начали использовать прототип современного туалета со смывным бочком. Невероятно, но факт!


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта