HTML:
HTML-код кнопок, написан ниже, рядом с примерами.
CSS:
CSS для всех примеров одинаковый
|
1 2 3 4 5 6 7 8 9 |
particle { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; background-repeat: no-repeat; background-size: contain; } |
JS:
JS для всех примеров одинаковый
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
function pop (e) { let amount = 30; switch (e.target.dataset.type) { case 'shadow': case 'line': amount = 60; break; } if (e.clientX === 0 && e.clientY === 0) { const bbox = e.target.getBoundingClientRect(); const x = bbox.left + bbox.width / 2; const y = bbox.top + bbox.height / 2; for (let i = 0; i < 30; i++) { createParticle(x, y, e.target.dataset.type); } } else { for (let i = 0; i < amount; i++) { createParticle(e.clientX, e.clientY, e.target.dataset.type); } } } function createParticle (x, y, type) { const particle = document.createElement('particle'); document.body.appendChild(particle); let width = Math.floor(Math.random() * 30 + 8); let height = width; let destinationX = (Math.random() - 0.5) * 300; let destinationY = (Math.random() - 0.5) * 300; let rotation = Math.random() * 520; let delay = Math.random() * 200; switch (type) { case 'square': particle.style.background = `hsl(${Math.random() * 50 + 200}, 70%, 60%)`; // Цвет квадратов particle.style.border = '1px solid white'; // Бордюр квадратов break; case 'symbol': particle.innerHTML = ['⚜','☃','❤','❄','❆','★','☻'][Math.floor(Math.random() * 7)]; // Символы particle.style.color = `hsl(${Math.random() * 50 + 200}, 70%, 60%)`; // Цвет символов particle.style.fontSize = `${Math.random() * 24 + 10}px`; // Размер символов width = height = 'auto'; break; case 'logo': particle.style.backgroundImage = 'url(https://atuin.ru/images/favicon.png)'; // Ссылка на картинку break; case 'shadow': var color = `hsl(${Math.random() * 50 + 200}, 70%, 50%)`; // Цвет particle.style.boxShadow = `0 0 ${Math.floor(Math.random() * 10 + 10)}px ${color}`; // Тень particle.style.background = color; particle.style.borderRadius = '50%'; // Радиус width = height = Math.random() * 5 + 4; // Размеры break; case 'line': particle.style.background = `hsl(${Math.random() * 50 + 200}, 70%, 50%)`; // Цвет линий height = 1; // Размер rotation += 1000; delay = Math.random() * 1000; break; } particle.style.width = `${width}px`; particle.style.height = `${height}px`; const animation = particle.animate([ { transform: `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(0deg)`, opacity: 1 }, { transform: `translate(-50%, -50%) translate(${x + destinationX}px, ${y + destinationY}px) rotate(${rotation}deg)`, opacity: 0 } ], { duration: Math.random() * 1000 + 5000, // Продолжительность всех эффектов easing: 'cubic-bezier(0, .9, .57, 1)', delay: delay }); animation.onfinish = removeParticle; } function removeParticle (e) { e.srcElement.effect.target.remove(); } if (document.body.animate) { document.querySelectorAll('button').forEach(button => button.addEventListener('click', pop)); } |
Примеры:
Оформление самих кнопок в вышестоящих кодах нет, они взяты из темы: Оформление кнопок на CSS
Разлетающиеся квадраты:
Пример:
HTML:
<button data-type="square">Кнопка</button>
JS:
За квадраты отвечают строки:
- 33 - цвет фона квадртатов
- 34 - цвет бордюра квадртатов
Разлетающиеся символы:
Пример:
HTML:
<button data-type="symbol">Кнопка</button>
JS:
За символы отвечают строки:
- 37 - сами символы
- 38 - их цвет
- 39 - их размер
Разлетающиеся картинки:
Пример:
HTML:
<button data-type="logo">Кнопка</button>
JS:
Ссылка на картинку дана в строке 43
Разлетающиеся точки с тенью:
Пример:
HTML:
<button data-type="shadow">Кнопка</button>
JS:
За точки отвечают строки:
- 46 - задает их цвет
- 50 - их размер
Разлетающиеся линии:
Пример:
HTML:
<button data-type="line">Кнопка</button>
JS:
Строка 53 задает цвет линий, а 54 их ширину
За основу взят скрипт, найденный на codepen.io у пользователя Louis Hoebregts
Здравствуйте. Проснулся и сразу сюдыы. В woocomerce оформил кнопки так https://atuin.ru/blog/oformlenie-knopok-na-css/
Добавить хочу теперь РАЗЛЕТАЮЩИЕСЯ ЧАСТИЦЫ ПРИ НАЖАТИИ НА КНОПКУ. Как только пока не пойму, чтобы в код файлов WooComerce не лезть. Я совмещал добавляя data-type="square", по тут не просто кнопки. Подскажите пожалуйста как быть.
Напишите в ВК или ТГ
Нужно результат посмотреть и т.д.
Спасибо огромное) Сэкономили кучу времени!
А можно подобную анимацию реализовать при нажатии на картинку?
Можно, почему нет, просто привязать data-type нужно не к кнопке, а к картинке.