Вы вошли как:  Гость
Форум
Это сообщество, объединяющее в себе пользователей, заинтересованных в создании сайтов и разработки дизайнов различной тематики. У нас вы сможете узнать мнения профессионалов по любым вопросам или поделиться своим опытом с неопытными пользователями, найти полезную информацию и просто пообщаться с хорошими людьми.
Присоединяйтесь к нам!

rainyday.js - анимация дождя

374 07.12.2015 в 16:20 ILNUROFF
Сегодня мы рады представить вам rainyday.js - это библиотека на JavaScript, с помощью которой вы сможете сделать на своём сайте анимацию падающих каплей дождя, на поверхность стекла. Главная особенность этой библиотеке, то, что вы можете настраивать капли с помощью специального API, и для этого не надо быть профессионалом в программирование на JavaScript. Работает во всех современных браузерах.

Установка библиотеки
1. Загрузите rainyday.js, в файловый менеджер
2. Подключаем сому библиотеку и код с настройками, пере </body> устанавливаем следующий код:
Код
<script src="rainyday.js"></script>  
  <script>  
  function run() {  
  var image = document.getElementById('background');  
  image.onload = function() {  
  var engine = new RainyDay({  
  image: this  
  });  
  engine.rain([ [1, 2, 8000] ]);  
  engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);  
  };  
  image.crossOrigin = 'anonymous';  
  image.src = 'http://i.imgur.com/N7ETzFO.jpg';  
  }  
  </script>


В image.src - указываем ссылку на изображение

3. Теперь заменим <body>, на:
Код
<body onload="run();">


4. И вставляем код изображение:
Код
<img id="background" alt="background" src="" />

src="" - оставляем пустым.
Комментарии
Статистика