Эффект конфетти для кнопок / Эффекты / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 77.1 Kb

Уникальный ID: 2751

Количество символов:

Посмотрели: 4052 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-2751-20

Скачали бесплатно: 121 раз

Прокомментировали: 0 раз

Рейтинг: 3.5 / 5 - 6 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: эффект, Effect, эффект при клике, Bootstrap, эффект для кнопок, button effect, Snippet

Поделился: -=StalkerRUS=-

Добавлено: 2018-03-21 в 15:54

Метка: 1521636888

⇄ ⇅

<div class="row">
 <div class="col-md-12 col-xs-12 col-sm-12 text-center mt">
 <h1>Эффект конфетти для кнопок</h1>
 </div>
</div>

<div class="row mt">
 <div class="col-md-4 col-xs-12 col-sm-4 text-center pd">
 <button id="bottom-btn" class="btn">Happy Birthday</button>
 </div>
 <div class="col-md-4 col-xs-12 col-sm-4 text-center pd">
 <button id="btn" class="btn">Magic Button</button>
 </div>
 <div class="col-md-4 col-xs-12 col-sm-4 text-center pd">
 <button id="top-btn" class="btn">Celebration</button>
 </div>
 </div>

<div class="row mt">
 <div class="col-md-4 col-xs-12 col-sm-4 text-center pd">
 <button id="text-btn" class="btn">Custom Text</button>
 </div>
 <div class="col-md-4 col-xs-12 col-sm-4 text-center pd">
 <button id="image-btn" class="btn">Custom Image</button>
 </div>
 <div class="col-md-4 col-xs-12 col-sm-4 text-center pd">
 <button id="svg-btn" class="btn">Custom SVG</button>
 </div>
 </div>

<div class="row mt">
 <div class="col-md-12 col-xs-12 col-sm-12 text-center pd">
 <button id="multiple-btn" class="btn">Multiple Custom</button>
 </div>
 </div>

</div>

new confettiKit({
 confettiCount: 40,
 angle: 90,
 startVelocity: 50,
 colors: randomColor({hue: 'blue',count: 18}),
 elements: {
 'confetti': {
 direction: 'down',
 rotation: true,
 },
 'star': {
 count: 10,
 direction: 'down',
 rotation: true,
 },
 'ribbon': {
 count: 5,
 direction: 'down',
 rotation: true,
 },
 'custom': [{
 count: 1,
 width: 50,
 textSize: 15,
 content: '//bootstraptema.ru/snippets/effect/2018/confettikit/shar.png',
 contentType: 'image',
 direction: 'up',
 rotation: false,
 }]
 },
 position: 'bottomLeftRight',
 });
 });

//magic button
 document.querySelector('#btn').addEventListener('click', function (e) {

new confettiKit({
 confettiCount: 40,
 angle: 90,
 startVelocity: 50,
 elements: {
 'confetti': {
 direction: 'down',
 rotation: true,
 },
 'star': {
 count: 10,
 direction: 'down',
 rotation: true,
 },
 'ribbon': {
 count: 5,
 direction: 'down',
 rotation: true,
 },
 },
 x: e.clientX,
 y: e.clientY
 });
 });

//Celebration
 document.querySelector('#top-btn').addEventListener('click', function (e) {

new confettiKit({
 colors:randomColor({hue:'pink',count: 18}),
 confettiCount: 40,
 angle: 90,
 startVelocity: 50,
 elements: {
 'confetti': {
 direction: 'down',
 rotation: true,
 },
 'star': {
 count: 10,
 direction: 'down',
 rotation: true,
 },
 'ribbon': {
 count: 5,
 direction: 'down',
 rotation: true,
 },
 },
 position: 'topLeftRight',
 });
 });

//Custom Text
 document.querySelector('#text-btn').addEventListener('click', function (e) {
 new confettiKit({
 confettiCount: 40,
 angle: 90,
 startVelocity: 50,
 elements: {
 'confetti': {
 direction: 'down',
 rotation: true,
 },
 'star': {
 count: 10,
 direction: 'down',
 rotation: true,
 },
 'ribbon': {
 count: 5,
 direction: 'down',
 rotation: true,
 },
 'custom': [{
 count: 10,
 width: 25,
 textSize: 15,
 content: 'BootstrapTema',
 contentType: 'text',
 direction: 'down',
 rotation: true,
 }]
 },
 x: e.clientX,
 y: e.clientY
 });
 });

//Custom Image
 document.querySelector('#image-btn').addEventListener('click', function (e) {
 new confettiKit({
 confettiCount: 40,
 angle: 90,
 startVelocity: 50,
 elements: {
 'confetti': {
 direction: 'down',
 rotation: true,
 },
 'star': {
 count: 10,
 direction: 'down',
 rotation: true,
 },
 'ribbon': {
 count: 5,
 direction: 'down',
 rotation: true,
 },
 'custom': [{
 count: 50,
 width: 25,
 textSize: 15,
 content: '//bootstraptema.ru/snippets/effect/2018/confettikit/FlowerClipart.png',
 contentType: 'image',
 direction: 'down',
 rotation: true,
 }]
 },
 x: e.clientX,
 y: e.clientY
 });
 });

//multiple Custom 
 document.querySelector('#multiple-btn').addEventListener('click', function (e) {
 new confettiKit({
 confettiCount: 40,
 angle: 90,
 startVelocity: 50,
 elements: {
 'confetti': {
 direction: 'down',
 rotation: true,
 },
 'star': {
 count: 0,
 direction: 'down',
 rotation: true,
 },
 'ribbon': {
 count: 0,
 direction: 'down',
 rotation: true,
 },
 'custom': [
 {
 count: 10,
 width: 25,
 textSize:15,
 content: 'Confetti',
 contentType: 'text',
 direction: 'down',
 rotation: true,
 },
 {
 count: 10,
 width: 25,
 content: svgSource,
 contentType: 'svg',
 direction: 'down',
 rotation: true,
 },
 {
 count: 10,
 width: 25,
 textSize:15,
 content: '//bootstraptema.ru/snippets/effect/2018/confettikit/FlowerClipart.png',
 contentType: 'image',
 direction: 'down',
 rotation: true,
 },
 ]
 },
 x: e.clientX,
 y: e.clientY
 });
 });
 </script>

BootstrapTema

Эффект конфетти для кнопок

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0