rainyday.js - анимация дождя
827материалов
228тем на форуме
3003комментария
6151пользователь

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


Не много описания:

Сегодня мы рады представить вам 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="" - оставляем пустым.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.04.2016 в 09:00
Материал просмотрен: 2451 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 14 комментариев

Пожаловаться
Сказать спасибо
Источник

14 комментариев


TwixAlex
Александр @TwixAlex 20.09.2015 11:211
+3
А можно по конкретней куда это все вставлять, а то я новенький!?
uTrojan
Смотря для чего и где хотите использовать библиотеку.
TwixAlex
Александр @TwixAlex 20.09.2015 14:023
+2
Я хочу чтобы на всех страницах дождь был!
uTrojan
фон сайта?
TwixAlex
Александр @TwixAlex 20.09.2015 15:585
0
Да типо того!
uTrojan
он не подойдет для вашего решения.
1. Не будет работать адаптивность
2. Он просто накладывает на изображение эффект дождя
Umbrella
Umbrella corporation @Umbrella 21.09.2015 00:119
+1
Не плохо, жаль что нельзя как фон сделать(
uTrojan
Нет не возможного в web;)
но это заказывать у фрилансера или сам, методом тыка:)
Валера Рагозин 20.09.2015 17:346
+3
Я тоже не фига не чего не понял!
uTrojan
Он просто накладывает на изображение эффект дождя.
Что тут не понятного. Установка проще некуда.
Albina-Danes
Для чего этот материал, если он ни каким боком не впишется в твой сайт?
uTrojan
А вы фантазию включите.
Например можно наложить на шапку.
Сделать информер погоды с таким фоном, если в городе дождь.
Albina-Danes
У меня с фонтазией все прекрасно! А от скрипта нет не какого толкка! (Мое мнение)
uTrojan
Не буду с вами спорить. Но то-что от него нет толка, это не значит что другим он не нужен.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта