Cara Mudah Membuat Efek Partikel Pada Button
Sabtu, 13 Juli 2019
Tambah Komentar
Setelah sekian lamanya fakum, dikarenakan terlalu sibuk dan ditambah dengan minimnya ide, itulah yang menjadi alasan mengapa saya tidak update beberapa bulan belakangan ini. Namun setelah saya pikir-pikir, akhirnya kini saya memutuskan untuk memilih aktif kembali dalam dunia blogger ini, kenapa? Karena saya ingin terus berbagi ilmu dan info menarik kepada siapapun yang membaca tulisan diblog ini, walau sedikit mudah-mudahan bermanfaat.
Nah Pada kesempatan kali ini saya akan coba berbagi sebuah tutorial lagi yaitu, tentang cara membuat efek partikel pada button (Tombol). Disini saya memakai komponen javascript nya dari anime.js
Anda semua sudah tahu pasti dong ya, apa itu anime.js dan apa saja keunggulannya?
Ya benar sekali, Anime.js adalah salah satu daftar animasi tercepat dan bekerja sangat lancar, dengan DOM. Salah satu ke unggulannya adalah, Anime.js mendukung disemua jenis browser web seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer 10+. Fitur utama dari anime.js yaitu, Transformasi CSS yang berguna untuk menghidupkan Transisi pada CSS, Animasi SVG untuk garis, dan garis waktu untuk menyinkronkan beberapa instance. Satu hal yang membuat anime.js menarik bagi pengembang yaitu sangat ringan.
Nah, lalu bagaimana langkah dan cara membuat efek partikel ini?
Caranya cukup mudah, Anda hanya perlu menyimak dan pastikan dibaca sampai tuntas agar tidak ada yang terlewat.
Untuk memulai cara pembuatannya, disini kita memerlukan beberapa komponen, seperti:
1.Css
2.Html
3.Javascript (anime.js+particles.js)
Untuk script nya bisa Anda unduh melalui link yang sudah saya sediakan diakhir tutorial ini.
Ok mari kita lanjutkan, untuk tahap awal disini kita coba buat file html terlebih dahulu dan berinama index.html.
Contoh:
Setelah itu kita buat file Css nya.
Contoh:
Jika sudah, Silahkan simpan/save file tersebut dan beri nama base.css atau terserah Anda mau diberi nama apa saja silahkan. Masih pada bagian Css, kali ini kita coba buat Css untuk particle nya.
Contoh:
Lalu simpan kembali dan beri nama particles.css. Langkah selanjutnya yaitu, buat javascript particles.js.
Contoh:
Untuk anime.min.js bisa Anda unduh atau cari di google.
Nah, apabila semuanya sudah selesai, sekarang waktunya Anda gabungkan menjadi satu seperti contoh pada langkah yang pertama. Dan coba akses dengan browser masing-masing, lihat bagaimana hasilnya. Apakah berjalan dengan lancar atau tidak. Jika tidak, kemungkinan besar Anda tidak sepenuhnya mengikuti cara yang sudah saya berikan diatas atau ada yang kurang.
Bilamana Anda ingin melihat hasil dari tutori ini, silahkan kunjungi link dibawah.
Live Demo
Dan untuk Anda yang tidak ingin pusing, Anda bisa mengunduhnya.
Itulah sedikit pembahasan singkat pada hari ini, Cara Mudah Membuat Efek Partikel Pada Button. Semoga bermanfaat, terimakasih.
Anda semua sudah tahu pasti dong ya, apa itu anime.js dan apa saja keunggulannya?
Ya benar sekali, Anime.js adalah salah satu daftar animasi tercepat dan bekerja sangat lancar, dengan DOM. Salah satu ke unggulannya adalah, Anime.js mendukung disemua jenis browser web seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer 10+. Fitur utama dari anime.js yaitu, Transformasi CSS yang berguna untuk menghidupkan Transisi pada CSS, Animasi SVG untuk garis, dan garis waktu untuk menyinkronkan beberapa instance. Satu hal yang membuat anime.js menarik bagi pengembang yaitu sangat ringan.
Nah, lalu bagaimana langkah dan cara membuat efek partikel ini?
Caranya cukup mudah, Anda hanya perlu menyimak dan pastikan dibaca sampai tuntas agar tidak ada yang terlewat.
Untuk memulai cara pembuatannya, disini kita memerlukan beberapa komponen, seperti:
1.Css
2.Html
3.Javascript (anime.js+particles.js)
Untuk script nya bisa Anda unduh melalui link yang sudah saya sediakan diakhir tutorial ini.
Ok mari kita lanjutkan, untuk tahap awal disini kita coba buat file html terlebih dahulu dan berinama index.html.
Contoh:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efek Partikel Pada Button | Seotechman</title>
<meta name="description" content="A little library that can be used for bursting particles effects on buttons and other elements." />
<meta name="keywords" content="bursting, exploding, particles, buttons, canvas, animation, javascript" />
<meta name="author" content="Seotechman.com" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/particles.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="demo-1">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<svg id="icon-github" viewBox="0 0 33 33">
<title>github</title>
<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
</svg>
<svg id="icon-rewind" viewBox="0 0 36 20">
<title>rewind</title>
<path d="M16.315.061c.543 0 .984.44.984.984v17.217c0 .543-.44.983-.984.983L.328 10.391s-.738-.738 0-1.476C1.066 8.178 16.315.061 16.315.061zM35.006.061c.543 0 .984.44.984.984v17.217c0 .543-.44.984-.984.984L19.019 10.39s-.738-.738 0-1.475C19.757 8.178 35.006.06 35.006.06z"/>
</svg>
</svg>
<main>
<header class="codrops-header">
<div class="codrops-header__inner">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--drop" href="https://www.seotechman.com" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Particle Effects for Buttons</h1>
<span class="info">Playful particle animations for buttons</span>
</div>
</header>
</div>
<div class="grid">
<div class="grid__item theme-1">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Send</button>
</div>
<div class="grid__item theme-2">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Upload</button>
</div>
<div class="grid__item theme-3">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Delete</button>
</div>
<div class="grid__item theme-4">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Submit</button>
</div>
<div class="grid__item theme-5">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">refresh</button>
</div>
<div class="grid__item theme-6">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Bookmark</button>
</div>
<div class="grid__item theme-7">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Subscribe</button>
</div>
<div class="grid__item theme-8">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Logout</button>
</div>
<div class="grid__item theme-9">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Add to cart</button>
</div>
<div class="grid__item theme-10">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Pause</button>
</div>
<div class="grid__item theme-11">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Register</button>
</div>
<div class="grid__item theme-12">
<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
<button class="particles-button">Export</button>
</div>
</div>
</main>
<script src='js/anime.min.js'></script>
<script src='js/particles.js'></script>
</body>
</html>
Setelah itu kita buat file Css nya.
Contoh:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,900|IBM+Plex+Mono:500i');
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
--color-text: #fff;
--color-bg: #000000;
--color-link: #f4bf3f;
--color-link-hover: #fff;
--color-info: #6355b7;
--color-scroll: #000000;
font-family: "Montserrat", Helvetica, Arial, sans-serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #fff;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Page Loader */
.js .loading::before {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
.js .loading::after {
content: '';
position: fixed;
z-index: 100000;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
pointer-events: none;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 2em;
height: 2em;
margin: 0 auto;
fill: currentColor;
}
main {
position: relative;
margin: 0 auto;
}
/* Header */
.codrops-header {
position: relative;
z-index: 100;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: 10vw;
background-image: linear-gradient(110deg,#1e089b,#4702a0);
font-size: 75%;
}
.codrops-header__inner {
display: flex;
max-width: 500px;
flex-direction: column;
align-items: flex-start;
}
.codrops-header__title {
font-size: 1.5rem;
line-height: 1;
font-weight: 600;
margin: 0;
padding: 0.5rem 0;
font-family: 'IBM Plex Mono', monospace;
font-weight: 500;
background: linear-gradient(90deg, #f7c53d 0%,#9302a0 50%, #6dbaa3 100%);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.info {
margin: 1rem 0;
color: var(--color-info);
}
.github {
display: block;
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.codrops-icon {
display: inline-block;
margin: 0.15em;
padding: 0.25em;
}
.grid__item {
position: relative;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
align-items: center;
justify-items: center;
overflow: hidden;
padding: 4rem 1.5rem;
height: 100vw;
width: 100vw;
background: var(--color-item-bg);
}
.grid__item-title {
font-size: 0.85rem;
color: var(--color-item-title);
align-self: flex-start;
margin: 0;
}
.action {
position: absolute;
top: 0;
right: 0;
background: none;
margin: 2rem;
color: var(--color-action);
border: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
.action:focus {
outline: none;
}
.theme-1 {
--color-item-bg: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
--color-action: #121019;
--color-button-bg: #121019;
--color-button-text: #fff;
--button-padding: 1.5rem 3rem;
--radius-button: 5px;
--border-button: 0;
}
.theme-2 {
--color-item-bg: linear-gradient(120deg,#7f54e6,#3F51B5);
--color-action: #f3f3f3;
--color-button-bg: #f3f3f3;
--color-button-text: #3c2e9e;
--button-padding: 1.8rem 4rem;
--radius-button: 5px;
--border-button: 0;
}
.theme-3 {
--color-item-bg: linear-gradient(120deg,#152bc3,#5366d8);
--color-action: #0e19a2;
--color-button-bg: #0e19a2;
--color-button-text: #fff;
--button-padding: 2rem 4rem;
--radius-button: 0;
--border-button: 0;
}
.theme-4 {
--color-item-bg: linear-gradient(120deg,#ecef3a,#ec6b9b);
--color-action: #e85577;
--color-button-bg: #transparent;
--color-button-text: #e85577;
--button-padding: 1.5rem 3rem;
--radius-button: 15px;
--border-button: 4px solid #e85577;
}
.theme-5 {
--color-item-bg: linear-gradient(120deg,#baedff,#07a2da);
--color-action: #003ff1;
--color-button-bg: #003ff1;
--color-button-text: #fff;
--button-padding: 1rem 2rem;
--radius-button: 5px;
--border-button: 0;
}
.theme-6 {
--color-item-bg: linear-gradient(120deg,#9C27B0,#090772);
--color-action: #f7d337;
--color-button-bg: #f7d337;
--color-button-text: #000000;
--button-padding: 1.5rem 3rem;
--radius-button: 40px;
--border-button: 0;
}
.theme-7 {
--color-item-bg: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
--color-action: #e2405b;
--color-button-bg: #e2405b;
--color-button-text: #e9e9e9;
--button-padding: 1.8rem 4.5rem;
--radius-button: 0;
--border-button: 0;
}
.theme-8 {
--color-item-bg: linear-gradient(120deg, #84fab0, #8fd3f4);
--color-action: blue;
--color-button-bg: linear-gradient(to top, #22b9d2 0%, #5389ec 100%);
--color-button-text: #fff;
--button-padding: 2rem 4rem;
--radius-button: 10px;
--border-button: 0;
}
.theme-9 {
--color-item-bg: linear-gradient(120deg, #d299c2 0%, #fef9d7 100%);
--color-action: #c13a3a;
--color-button-bg: #c13a3a;
--color-button-text: #ffffff;
--button-padding: 1.5rem 3rem;
--radius-button: 10px;
--border-button: 0;
}
.theme-10 {
--color-item-bg: linear-gradient(120deg, #fddb92 0%, #d1fdff 100%);
--color-action: #b1b1b1;
--color-button-bg: #b1b1b1;
--color-button-text: #fff;
--button-padding: 1.5rem 3rem;
--radius-button: 0;
--border-button: 0;
}
.theme-11 {
--color-item-bg: linear-gradient(120deg, #fff1eb 0%, #ace0f9 100%);
--color-action: #1b81ea;
--color-button-bg: #fff;
--color-button-text: #1b81ea;
--button-padding: 2rem 4.5rem;
--radius-button: 7px;
--border-button: 0;
}
.theme-12 {
--color-item-bg: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
--color-action: #ff4d73;
--color-button-bg: #ff4d73;
--color-button-text: #fff;
--button-padding: 1.5rem 7rem;
--radius-button: 40px;
--border-button: 0;
}
@media screen and (min-width: 50em) {
.codrops-header {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
min-height: 100vh;
}
.codrops-header__title {
font-size: 3rem;
}
.codrops-header::after {
content: 'Scroll';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin-bottom: 1rem;
color: var(--color-scroll);
}
.github {
position: absolute;
top: 0;
left: 0;
margin: 2rem;
}
.grid {
display: grid;
grid-gap: 22px;
grid-template-columns: repeat(2,calc(50vmax - 11px));
}
.grid__item {
height: 50vmax;
width: 100%;
padding: 1.5rem;
}
.codrops-header {
font-size: 100%;
padding: 0 0 2rem 0;
border: 22px solid black;
}
}
Jika sudah, Silahkan simpan/save file tersebut dan beri nama base.css atau terserah Anda mau diberi nama apa saja silahkan. Masih pada bagian Css, kali ini kita coba buat Css untuk particle nya.
Contoh:
.particles {
position: relative;
grid-area: 1 / 1 / 2 / 2;
}
.particles-canvas {
position: absolute;
pointer-events: none;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
.particles-wrapper {
position: relative;
display: inline-block;
overflow: hidden;
will-change: transform;
}
.particles-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
border-radius: 5px;
border-radius: var(--radius-button);
background: var(--color-button-bg);
color: var(--color-button-text);
border: 0;
border: var(--border-button);
margin: 0;
padding: 1.5rem 3rem;
padding: var(--button-padding);
will-change: transform;
}
.particles-button:focus {
outline: none;
}
.no-js .particles-button {
grid-area: 1 / 1 / 2 / 2;
}
Lalu simpan kembali dan beri nama particles.css. Langkah selanjutnya yaitu, buat javascript particles.js.
Contoh:
/* eslint-disable */
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('animejs')) :
typeof define === 'function' && define.amd ? define(['animejs'], factory) :
(global.Particles = factory(global.anime));
}(this, (function(anime) {
'use strict';
/* eslint-enable */
function Particles(element, options) {
this.el = getElement(element);
this.options = extend({color: getCSSValue(this.el, 'background-color')}, this.defaults, options);
this.init();
}
Particles.prototype = {
defaults: {
type: 'circle',
style: 'fill',
canvasPadding: 150,
duration: 1000,
easing: 'easeInOutCubic',
direction: 'left',
size: function() { return Math.floor((Math.random() * 3) + 1); },
speed: function() { return rand(4); },
particlesAmountCoefficient: 3,
oscillationCoefficient: 20
},
init: function () {
this.particles = [];
this.frame = null;
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.className = 'particles-canvas';
this.canvas.style = 'display:none;';
this.wrapper = document.createElement('div');
this.wrapper.className = 'particles-wrapper';
this.el.parentNode.insertBefore(this.wrapper, this.el);
this.wrapper.appendChild(this.el);
this.parentWrapper = document.createElement('div');
this.parentWrapper.className = 'particles';
this.wrapper.parentNode.insertBefore(this.parentWrapper, this.wrapper);
this.parentWrapper.appendChild(this.wrapper);
this.parentWrapper.appendChild(this.canvas);
},
loop: function () {
this.updateParticles();
this.renderParticles();
if (this.isAnimating()) {
this.frame = requestAnimationFrame(this.loop.bind(this));
}
},
updateParticles: function () {
var p;
for (var i = 0; i < this.particles.length; i++) {
p = this.particles[i];
if (p.life > p.death) {
this.particles.splice(i, 1);
} else {
p.x += p.speed;
p.y = this.o.oscillationCoefficient * Math.sin(p.counter * p.increase);
p.life++;
p.counter += this.disintegrating ? 1 : -1;
}
}
if (!this.particles.length) {
this.pause();
this.canvas.style.display = 'none';
if (is.fnc(this.o.complete)) {
this.o.complete();
}
}
},
renderParticles: function () {
this.ctx.clearRect(0, 0, this.width, this.height);
var p;
for (var i = 0; i < this.particles.length; i++) {
p = this.particles[i];
if (p.life < p.death) {
this.ctx.translate(p.startX, p.startY);
this.ctx.rotate(p.angle * Math.PI / 180);
this.ctx.globalAlpha = this.disintegrating ? 1 - p.life / p.death : p.life / p.death;
this.ctx.fillStyle = this.ctx.strokeStyle = p.color;
this.ctx.beginPath();
if ( this.o.type === 'circle' ) {
this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
}
else if ( this.o.type === 'triangle' ) {
this.ctx.moveTo(p.x, p.y);
this.ctx.lineTo(p.x+p.size, p.y+p.size);
this.ctx.lineTo(p.x+p.size, p.y-p.size);
}
else if ( this.o.type === 'rectangle' ){
this.ctx.rect(p.x, p.y, p.size, p.size);
}
if ( this.o.style === 'fill' ) {
this.ctx.fill();
}
else if ( this.o.style === 'stroke' ) {
this.ctx.closePath();
this.ctx.stroke();
}
this.ctx.globalAlpha = 1;
this.ctx.rotate(-p.angle * Math.PI / 180);
this.ctx.translate(-p.startX, -p.startY);
}
}
},
play: function () {
this.frame = requestAnimationFrame(this.loop.bind(this));
},
pause: function () {
cancelAnimationFrame(this.frame);
this.frame = null;
},
addParticle: function (options) {
var frames = this.o.duration * 60 / 1000;
var speed = is.fnc(this.o.speed) ? this.o.speed() : this.o.speed;
var color = is.fnc(this.o.color) ? this.o.color() : this.o.color;
this.particles.push({
startX: options.x,
startY: options.y,
x: this.disintegrating ? 0 : speed * -frames,
y: 0,
color: color,
angle: rand(360),
counter: this.disintegrating ? 0 : frames,
increase: Math.PI * 2 / 100,
life: 0,
death: this.disintegrating ? (frames - 20) + Math.random() * 40 : frames,
speed: speed,
size: is.fnc(this.o.size) ? this.o.size() : this.o.size
});
},
addParticles: function (rect, progress) {
var progressDiff = this.disintegrating ? progress - this.lastProgress : this.lastProgress - progress;
this.lastProgress = progress;
var x = this.options.canvasPadding;
var y = this.options.canvasPadding;
var progressValue = (this.isHorizontal() ? rect.width : rect.height) * progress + progressDiff * (this.disintegrating ? 100 : 220);
if (this.isHorizontal()) {
x += this.o.direction === 'left' ? progressValue : rect.width - progressValue;
} else {
y += this.o.direction === 'top' ? progressValue : rect.height - progressValue;
}
var i = Math.floor(this.o.particlesAmountCoefficient * (progressDiff * 100 + 1));
if (i > 0) {
while (i--) {
this.addParticle({
x: x + (this.isHorizontal() ? 0 : rect.width * Math.random()),
y: y + (this.isHorizontal() ? rect.height * Math.random() : 0)
});
}
}
if (!this.isAnimating()) {
this.canvas.style.display = 'block';
this.play();
}
},
addTransforms: function (value) {
var translateProperty = this.isHorizontal() ? 'translateX' : 'translateY';
var translateValue = this.o.direction === 'left' || this.o.direction === 'top' ? value : -value;
this.wrapper.style[transformString] = translateProperty + '('+ translateValue +'%)';
this.el.style[transformString] = translateProperty + '('+ -translateValue +'%)';
},
disintegrate: function (options) {
if (!this.isAnimating()) {
this.disintegrating = true;
this.lastProgress = 0;
this.setup(options);
var _ = this;
this.animate(function(anim) {
var value = anim.animatables[0].target.value;
_.addTransforms(value);
if (_.o.duration) {
_.addParticles(_.rect, value / 100, true);
}
});
}
},
integrate: function (options) {
if (!this.isAnimating()) {
this.disintegrating = false;
this.lastProgress = 1;
this.setup(options);
var _ = this;
this.animate(function(anim) {
var value = anim.animatables[0].target.value;
setTimeout(function() {
_.addTransforms(value);
}, _.o.duration);
if (_.o.duration) {
_.addParticles(_.rect, value / 100, true);
}
});
}
},
setup: function (options) {
this.o = extend({}, this.options, options);
this.wrapper.style.visibility = 'visible';
if (this.o.duration) {
this.rect = this.el.getBoundingClientRect();
this.width = this.canvas.width = this.o.width || this.rect.width + this.o.canvasPadding * 2;
this.height = this.canvas.height = this.o.height || this.rect.height + this.o.canvasPadding * 2;
}
},
animate: function (update) {
var _ = this;
anime({
targets: {value: _.disintegrating ? 0 : 101},
value: _.disintegrating ? 101 : 0,
duration: _.o.duration,
easing: _.o.easing,
begin: _.o.begin,
update: update,
complete: function() {
if (_.disintegrating) {
_.wrapper.style.visibility = 'hidden';
}
}
});
},
isAnimating: function () {
return !!this.frame;
},
isHorizontal: function () {
return this.o.direction === 'left' || this.o.direction === 'right';
}
};
// Utils
var is = {
arr: function (a) { return Array.isArray(a); },
str: function (a) { return typeof a === 'string'; },
fnc: function (a) { return typeof a === 'function'; }
};
function stringToHyphens(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
function getCSSValue(el, prop) {
if (prop in el.style) {
return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
}
}
var t = 'transform';
var transformString = (getCSSValue(document.body, t) ? t : '-webkit-' + t);
function extendSingle(target, source) {
for (var key in source)
target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key];
return target;
}
function extend(target) {
if (!target) target = {};
for (var i = 1; i < arguments.length; i++)
extendSingle(target, arguments[i]);
return target;
}
function rand(value) {
return Math.random() * value - value / 2;
}
function getElement(element) {
return is.str(element) ? document.querySelector(element) : element;
}
return Particles;
})));
Untuk anime.min.js bisa Anda unduh atau cari di google.
Nah, apabila semuanya sudah selesai, sekarang waktunya Anda gabungkan menjadi satu seperti contoh pada langkah yang pertama. Dan coba akses dengan browser masing-masing, lihat bagaimana hasilnya. Apakah berjalan dengan lancar atau tidak. Jika tidak, kemungkinan besar Anda tidak sepenuhnya mengikuti cara yang sudah saya berikan diatas atau ada yang kurang.
Bilamana Anda ingin melihat hasil dari tutori ini, silahkan kunjungi link dibawah.
Live Demo
Dan untuk Anda yang tidak ingin pusing, Anda bisa mengunduhnya.
Itulah sedikit pembahasan singkat pada hari ini, Cara Mudah Membuat Efek Partikel Pada Button. Semoga bermanfaat, terimakasih.
Belum ada Komentar untuk "Cara Mudah Membuat Efek Partikel Pada Button"
Posting Komentar