Молнии для сайта на jQuery by Apocalypse

Разместил: Apocalypse
2 октября 2015

Скачать Скрипт, который я написал два года тому назад. Суть его заключалась в том, чтобы на сайте создать молнии, что подчёркивало бы осеннюю атмосферу. Молнии появляются в случайный промежуток времени в случайных местах, однако, в строго закреплённом блоке размером примерно 700 на 230 пикселей Для начала посмотрите ДЕМО Установка: 1#: После /head на нужных страницах вставьте:

<script> $(function() { setInterval('apostartlight()', getRandomInt(5000, 20000)); }); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; function apostartlight() { $('div.apolightning').hide(0); $('div#apol' + getRandomInt(1, 3)).css('margin-left', getRandomInt(-400, 0) + 'px').show(0).fadeOut(1000); }; </script>

1 2 3 4 5 6 7 8 9 10 11 12

<script> $(function() { setInterval('apostartlight()', getRandomInt(5000, 20000)); }); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; function apostartlight() { $('div.apolightning').hide(0); $('div#apol' + getRandomInt(1, 3)).css('margin-left', getRandomInt(-400, 0) + 'px').show(0).fadeOut(1000); }; </script>

  2#: Следующий код в самый низ вашего CSS:

.apolightning { width: 300px; height: 235px; position: absolute; z-index: -1; left: 50%; margin-left: -14px; top: 0px; background: url(/img/apolight.png); display: none; } #apol2 { background: url(/img/apolight2.png); } #apol3 { background: url(/img/apolight3.png); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.apolightning { width: 300px; height: 235px; position: absolute; z-index: -1; left: 50%; margin-left: -14px; top: 0px; background: url(/img/apolight.png); display: none; } #apol2 { background: url(/img/apolight2.png); } #apol3 { background: url(/img/apolight3.png); }

  3#: Следующий код вставьте перед тегом < body >:

<div class="apolightning" id="apol1"></div> <div class="apolightning" id="apol2"></div> <div class="apolightning" id="apol3"></div>

1 2 3

<div class="apolightning" id="apol1"></div> <div class="apolightning" id="apol2"></div> <div class="apolightning" id="apol3"></div>

Осталось лишь залить три картинки из прикреплённого архива в папку img

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: ApocalypsejQueryМолнияОсеньЭффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Снег, снежинки которого можно толкать на HTML5 Canvas и jQuery через плагин LET IT SNOW
• Предыдущая публикация Ещё один эффект огня, который движется за вашим курсором на HTML5 canvas

Вам может также понравиться...

• Осенние листья, падающие и скапливающиеся внизу страницы на CSS3 и Javascript

  Разместил: Apocalypse 11 октября 2022

  - Apocalypse 11 октября 2022 Last modified 7 октября 2022

• Визитная карточка с 3D эффектом на CSS и jQuery

  Разместил: Apocalypse 3 апреля 2016

  - Apocalypse 3 апреля 2016

• Необычное анимированное меню - гамбургер на CSS3 + SVG

  Разместил: Apocalypse 26 октября 2020

  - Apocalypse 26 октября 2020 Last modified 16 октября 2020

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии