jQuery-svg-popup

Надоели типичные модальные окна?!

  • Есть решение - jQuery-svg-popup.
  • Быстрый - формирование частиц основано на базе SVG.
  • Легкий - вес плагина всего 5kb.
  • Прост в использовании - имеет документацию на русском языке.
  • Ето решение разнообразит дизайн вашего сайта, а также придаст уникальности и стиля!

Скачать / установить

Примеры

jquery-svg-popup
jquery-svg-popup
jquery-svg-popup
jquery-svg-popup
jquery-svg-popup
jquery-svg-popup

HTML разметка

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo1" 
	data-svg-popup="demo1"> Demo 1 </button>
                        

JavaScript Инициализация плагина

$('.demo1').svgpopup({
	stepX: 12,
	stepY: 9,
	figure: 'rectangle',
	fill: '#fcbf02',
	opacity: 0.6,
	speed: 1.2});
                        

HTML разметка

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo2" 
	data-svg-popup="demo2"> Demo 2 </button>
                        

JavaScript Инициализация плагина

$('.demo2').svgpopup({
	stepX: 8,
	stepY: 7,
	figure: 'rectangle',
	fillOdd: '#fff',
	fillEven: '#111',
	opacity: 0.9,	
	speed: 1.2});
                        

HTML разметка

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo3" 
	data-svg-popup="demo3"> Demo 3 </button>
                        

JavaScript Инициализация плагина

$('.demo3').svgpopup({			
	figure: 'rectangle',
	fill: '#fcbf02',
	randomize: false
});
                        

HTML разметка

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo4" 
	data-svg-popup="demo4"> Demo 4 </button>
                        

JavaScript Инициализация плагина

$('.demo4').svgpopup({
	stepX: 10,	
	stepY: 8,
	figure: 'triangle',
	fill: '#111',
	speed: 1.2,
	opacity: 0.8,
});
                        

HTML разметка

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo5" 
	data-svg-popup="demo5"> Demo 5 </button>
                        

JavaScript Инициализация плагина

$('.demo5').svgpopup({
	stepX: 6,	
	stepY: 4,
	figure: 'triangle',
	fill: '#fcbf02',
	strokeFill: 'rgba(255,255,255, .2)',
	opacity: 0.8,	
	visible: false,
	speed: 1,
	randomize: false
});
                        

HTML разметка

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo6" 
	data-svg-popup="demo6"> Demo 6 </button>
                        

JavaScript Инициализация плагина

$('.demo6').svgpopup({
	stepX: 8,	
	stepY: 6,
	figure: 'triangle',
	fillOdd: '#fcbf02',
	fillEven: '#111',
	opacity: 0.9,	
	visible: false,
	speed: 1
});
                        

Документация

  • Свойство
  • Значение
  • Тип
  • Описание
  • stepX
  • 12
  • Number
  • количество частиц по ширыне екрана
  • stepY
  • 10
  • Number
  • количество частиц по висоте екрана
  • fill
  • #03BDD6
  • String
  • Цвет фигур попапа
  • fillOdd
  • null
  • String
  • Цвет четных частиц попапа
  • fillEven
  • null
  • String
  • Цвет не четных частиц попапа
  • strokeFill
  • null
  • String
  • Цвет границы частиц попапа
  • opacity
  • 0.8
  • Number
  • Прозрачность фона
  • speed
  • 1.8
  • Number
  • Длительность анимации частиц
  • figure
  • triangle
  • String
  • Тип частицы попапа доступно('triangle','rectangle')
  • visible
  • false
  • Boolean
  • Отображать неупорядочиные частицы при загрузке страницы
  • randomize
  • true
  • Boolean
  • Более хаотическое расположении фигур
  • closeButtonText
  • String
  • Текст закрывающей кнопки
  • onAnimationComplate
  • undefined
  • Function
  • Колбек функция авершения анимации фигур

Еще jQuery плагины для сайта

jQuery-svg-progress

Это уникальный и единственный в своем роде jQuery plugin позволяющий отображать инфографику на вашем веб ресурсе, используя его вы сможете разнообразить свой сайт одной из шести фигур, а также есть возможность добавить кастомный…

jQuery-svg-progress