בפוסט קצר זה נראה כיצד להשתמש בספרייה Anime.js יחד עם ספריית חלקיקים בכדי ליצור אפקט מאד נחמד של כפתורים מתפרקים. הרעיון באופן כללי הוא לפרק כפתור לחלקיקים, כלומר לגרום לו להעלם ואז להחזיר אותו למצבו הרגיל.
הקוד הדואג לחלקיקים והרעיון באופן כללי נכתבו על ידי בחור בשם Luis Manuel – מפתח Frontend מאד מוכשר שאיני מתקרב לקרסוליו ברמת יכולות Frontend.
אז לפני שנסביר כיצד להשתמש בספריית החלקיקים, ולפני שנראה כיצד ליצור כפתור מתפרק משלכם תנו מבט על מה מדובר:
אני מניח שאתם גם חושבים שהאפקט הזה מאד מגניב, אז בואו נראה כיצד לבצע זאת ואיך לבנות כפתור מתפרק משלכם…
כיצד משתמשים בספריית החלקיקים?
הדרך להשתמש בספריית החלקיקים די פשוטה. היא דורשת יצירת Instance חדש של חלקיקים על מנת שנוכל לפרק את הכפתור, ולאחר מכן קריאה למתודת הפירוק הנקראית disintegrate. שתי פעולות אלו מתבצעות באופן הבא:
// Initialize a new instance of Particles to disintegrate/integrate the button
var particles = new Particles('.button');
// Disintegrate the button into particles
particles.disintegrate();
// particles.integrate(); // would do the opposite
כפי שאתם רואים בהערות, בכדי להחזיר כפתור למצבו הרגיל נשתמש במתודה בשם integrate.
יצירת כפתור מתפרק משלכם
בכדי ליצור כפתור מתפרק, יש לטעון את שתי שתי הספרייות הנחוצות (anime.js & particles.js) הנמצאות בקישור זה. anime.js היא זו שדואגת להעלמות הכפתור ולאנימצית החלקיקים והספרייה השנייה אחראית ליצירת החלקיקים.
אנו מבצעים enqueue לקבצים בדיוק כמו שאנו מוסיפים כל קובץ JS או CSS לאתר וורדפרס באופן הבא:
function bursting_btns_effect() {
wp_register_script('anime-js', get_template_directory_uri() . '/js/anime.min.js', array('jquery'));
wp_enqueue_script('anime-js');
wp_register_script('particles-js', get_template_directory_uri() . '/js/particles.js', array('anime-js'));
wp_enqueue_script('particles-js');
}
add_action( 'wp_enqueue_scripts', 'bursting_btns_effect' );
אם אינכם משתמשים בוורדפרס פשוט קראו לשתי הספריות בסדר הנכון כבדוגמה הבאה:
<script src="anime.min.js"></script>
<script src="particles.js"></script>
הוסיפו את ה HTML הבא היכן שאתם מעוניינים להציג את הכפתור:
<div class="flex__item theme-vars">
<button class="particles-button">שליחה</button>
</div>
עצבו מעט את הכפתור באמצעות CSS:
.theme-vars {
--color-item-bg: #0e83cd;
--color-action: #121019;
--color-button-bg: #121019;
--color-button-text: #fff;
--button-padding: 1.5rem 3rem;
--radius-button: 5px;
--border-button: 0;
}
.flex__item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vw;
width: 100vw;
background: var(--color-item-bg);
}
.particles {
position: relative;
}
.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;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
color: var(--color-button-text);
border-radius: var(--radius-button);
background: var(--color-button-bg);
border: 0;
border: var(--border-button);
margin: 0;
padding: var(--button-padding);
will-change: transform;
}
.particles-button:focus {
outline: none;
}
למרות שאין צורך מיוחד במקרה זה, ניתן לראות כי השתמשנו (בשביל הכיף) ב CSS Variables עבור הגדרות העיצוב הבסיסיות של הכפתור. על כל מקרה שחקו עם הגדרות ה CSS מכיוון ודוגמה זו מציגה כפתור על רקע הנמתח לאורך ורוחב המסך.
הוספת Instance חדש ויצירת אובייקט חלקיקים
כעת נוסיף אובייקט חלקיקים (שורות 2-13) אשר לו מספר תכונות אותן ניתן לשנות בהתאם לדרך בה תרצו שייראו אותם חלקיקים.
ניתן לראות כי בשורות 15-20 אנו יוצרים Instance חדש כפי שהראינו קודם לכן וקוראים למתודת הפירוק בלחיצה על הכפתור. ניתן כמובן לבצע שינויים כראות עיניכם לתכונות החלקיקים:
(function () {
const arrOpts = [
{
type: 'triangle',
easing: 'easeOutQuart',
size: 6,
particlesAmountCoefficient: 4,
oscillationCoefficient: 2,
color: function () {
return Math.random() < 0.5 ? '#222222' : '#ffffff';
}
}
];
const bttn = document.querySelector('button.particles-button');
let particlesOpts = arrOpts[0];
const particles = new Particles(bttn, particlesOpts);
bttn.addEventListener('click', () => {
particles.disintegrate();
});
})();
שימו לב כי קוד זה נטען לאחר שתי הספריות אותן טענו קודם לכן. כמו כן, בשורה 10 ניתן לקבוע את צבע החלקיקים…
זהו סיימנו, הנה התוצאה:
תכונות אובייקט החלקיקים
הטבלה הבאה מתארת את כל התכונות האפשריות לאובייקט החלקיקים:
Name | Type | Default | Description |
---|---|---|---|
canvasPadding | Integer | 150 | Padding for the generated canvas that will be positioned right behind the target element. AcanvasPadding = 0 will cause the canvas and the target element to have the samedimensions. |
duration | Integer | 1000 | Duration (ms ) to perform the animations of target element and particles. |
easing | String or Function | easeInOutCubic | Easing function to perform the animation of target element. It will be passed directly toanime.js . |
type | String | circle | Type of particle. Could be any of the following values: circle , rectangle , triangle |
style | String | fill | Style of particle. Could be any of the following values: fill , stroke . |
direction | String | left | Direction to start disintegrating the element. Could be any of the following values: left ,right top , bottom . The opposite direction will be usedto perform the integrate operation. |
size | Float or Function | Random from 1 to 4 | Size (px ) for particles. |
speed | Float or Function | Random from -2 to 2 | Pixels per frame that a particle will be moved. It could be a function to set it randomly perparticle (as default value). |
color | String | Target’s background-color | Color used to fill the particles. |
particlesAmount | Float | 3 | A coefficient to calculate the amount of particles to animate. A particlesAmountCoefficient = 0 will result in 0 particles, while bigger values will increase the amount of particles. |
oscillation | Float | 20 | A coefficient to calculate the oscilation of particles while animating. A oscilationCoefficient = will result in no oscilation (straight movements), while bigger values will increase theoscilation, resulting in a kind of randomness. |
begin | Function | undefined | Execute a function at the beginning of the animation. |
complete | Function | undefined | Execute a function at the end of the animation. |
ראו את ההסברים ושחקו עם הפרמטרים כרצונכם בכדי להבין מה הם עושים.
לסיכום
שימוש ב Anime.js היא דרך מאד שימושית להוסיף אינטראקטיביות ועניין לאתר שלכם. בהקשר של פוסט זה, מתבטא ביצירת כפתורים מתפרקים. אני מאמין שעוד תראו לא מעט פוסטים בסגנון הזה בסאבי בלוג היוצאים ממהקשר הישיר לוורדפרס.
וכפי שציינתי בתחילת המדריך, רוב העבודה הקשה שאתם רואים בפוסט זה נעשתה על ידי Luis Manuel ו Mary Lou מ Codrops. מכירים עוד דרכים להשתמש ב Anime.js ליצירת אפקטים? שתפו אותנו בתגובות!
מגניב לגמרי.
סתם הערה צדדית, מיותר להשתמש ב־wp_register_script כי wp_enqueue_script יכולה לבצע גם את הרישום ולחסוך לך שורה שלמה בקוד.
במקרה הזה אתה צודק, אך ישנם מצבים בהם יש לבצע רישום בנפרד…
וואוו זה ממש מדהים!
היי יש דרך שזה יהיה בהובר ולא בלחיצה?
והאם יש אפשרות שהחלקים שמתעופפים יהיו מטבעות זהב? תודה
🙂
לצערי זה מעבר לסקופ של המדריך – לא ניתן לעשות זאת עם מטבעות זהב בדרך המתוארת בפוסט זה…
תודה
וואוו רועי!
חבל שאין אצלך באתר אפשרות ליצור 'מועדפים', זה אחד הפוסטים הטובים…!
תודה, עובד על הוספת אפשרות כזו…. 🙂