Эффект полета светлячков

Второй вариант - найти какой-то скрипт. Вряд ли есть нужный, поэтому на ум пришло только два варианта. Скрипт падающего снега и летающих светлячков. Снег - не подойдет, так как он просто движется вниз, иногда, немного меняя траекторию. Остались только светлячки. Когда-то я случайно наткнулся на данный скрипт и решил его сохранить на будущее. Это было отличное решение.

Скрипт работает с помощью - jQuery. Суть его заключается в том, что он создает точки определенного размера и заставляет их хаотично двигаться внутри заданного блока. Задав нужный цвет получился реалистичный результат. Как использовать этот скрипт, решать Вам, поэтому покажу его в виде изначального назначения - светлячков. Результат будет примерно таким:

Для подключения такого эффекта на сайт сначала нужно подключить в шапку перед закрывающимся head или в подвал перед закрывающимсяbody, библиотеку jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Посмотрите, не подключали ли Вы ее ранее, чтобы не создать конфликт.

Далее надо добавить сам скрипт, который совершит анимацию. Делается это двумя способами. Можно вставить скрипт напрямую в шапку или подвал, либо подключить отдельным файлом, что я и покажу. Так что создаем файл, например fly.js и подключаем его после библиотеки.

<script type="text/javascript" src="fly.js"></script>

Теперь, внутрь файла нужно добавить такой вот код:

(function($) { 
	/*
	 * Настройки скрипта
	 */
	var defaults = {
			total : 25,
			ofTop: 0,
			ofLeft: 0,
			on:'document.body',
			twinkle: 0.1,
			minPixel: 1,
			maxPixel: 2,
			color: '#fc0'
	};
	$.firefly = function(settings) {

			$.firefly.settings = $.extend({}, defaults, settings);
			$.firefly.eleHeight = $($.firefly.settings.on).height();
			$.firefly.eleWidth = $($.firefly.settings.on).width();
			if($.firefly.settings.on!=='document.body'){
				var off = $($.firefly.settings.on).offset();
				$.firefly.offsetTop = off.top;
				$.firefly.offsetLeft = off.left;
				$.firefly.eleHeight = $($.firefly.settings.on).height();
				$.firefly.eleWidth = $($.firefly.settings.on).width();
			}
			else{
				$.firefly.offsetTop = 0;
				$.firefly.offsetLeft = 0;
				$.firefly.eleHeight = $(document.body).height();
				$.firefly.eleWidth = $(document.body).width();

			}

			
		

			for (i = 0; i < $.firefly.settings.total; i++){

				$.firefly.fly($.firefly.create($.firefly.randomPixel($.firefly.settings.minPixel, $.firefly.settings.maxPixel)));
			}

			return;
	};
	
	/*
	 * Public Functions
	 */

	 $.firefly.create = function(pixelSize){
		spark = $('<div>').hide();

		if($.firefly.settings.on === 'document.body')
			$(document.body).append(spark);
		else 
			$($.firefly.settings.on).append(spark);
		



		return spark.css({'position':'absolute',	
						'width' : pixelSize, 
						'height': pixelSize,
						'background-color': $.firefly.settings.color,
						'z-index': $.firefly.random(20), //under all the stuff
						top: $.firefly.offsetTop + $.firefly.random(($.firefly.eleHeight-50)),	//offsets
						left:  $.firefly.offsetLeft + $.firefly.random(($.firefly.eleWidth-50)) //offsets
						}).show();

	 }
    


$.firefly.fly = function(sp) {
  
  $(sp).animate({
	  top: $.firefly.offsetTop + $.firefly.random(($.firefly.eleHeight-50)),	//offsets
	  left: $.firefly.offsetLeft + $.firefly.random(($.firefly.eleWidth-50)),
	  opacity: $.firefly.opacity($.firefly.settings.twinkle)
  }, (($.firefly.random(10) + 5) * 2000),function(){  $.firefly.fly(sp) } );
};

$.firefly.stop = function(sp) {
  $(sp).stop();
};



$.firefly.randomPixel = function(min, max) {
	return Math.floor(Math.random()*(max-min+1)+min);
}
$.firefly.random = function(max) {
	return Math.ceil(Math.random() * max) - 1;
}
// set twinkle.
$.firefly.opacity = function(min)
{
        op= Math.random();
        if(op < min)
                return 0;
        else
                return 1;
}		
})(jQuery);
		$(document).ready(function() {
	$.firefly(); 	
});

С шестой строки начинаются настройки, которые могут помочь Вам немного подправить работу скрипта.

1. total : 25 - это количество движущихся точек. Если надо больше или меньше, просто напишите свое значение.
2. on:'document.body' - это блок внутри которого будут двигаться точки. В примере это весь body сайта. Если надо только в пределах какого-то div, то просто вставьте его класс или ID. Например:
   on:'.block' или on:'#block'.
3. minPixel: 1 - минимальный размер точки в пикселях, в примере 1 пиксель.
4. maxPixel: 2 - максимальный размер точек.
5. color: '#f30' - цвет точек.

Вот в принципе и все. Это основные настройки, которые запустят анимацию. Лично мне, этот скрипт помог и я его нахожу неплохим.

Если он Вам пригодится и Вы используете его для чего-то необычного, как я использовал для создания эффекта летающего жара, поделитесь, интересно узнать :).

На этом все, спасибо за внимание. 🙂