יצירת אפקט כפתורים מתפרקים באמצעות Anime.js

ניצור אפקט מגניב של כפתור מתפרק באמצעות Anime.js (וספרייה הדואגת לחלקיקים).

בפוסט קצר זה נראה כיצד להשתמש בספרייה Anime.js יחד עם ספריית חלקיקים בכדי ליצור אפקט מאד נחמד של כפתורים מתפרקים. הרעיון באופן כללי הוא לפרק כפתור לחלקיקים, כלומר לגרום לו להעלם ואז להחזיר אותו למצבו הרגיל.

הקוד הדואג לחלקיקים והרעיון באופן כללי נכתבו על ידי בחור בשם Luis Manuel – מפתח Frontend מאד מוכשר שאיני מתקרב לקרסוליו ברמת יכולות Frontend.

אז לפני שנסביר כיצד להשתמש בספריית החלקיקים, ולפני שנראה כיצד ליצור כפתור מתפרק משלכם תנו מבט על מה מדובר:
rewind

אני מניח שאתם גם חושבים שהאפקט הזה מאד מגניב, אז בואו נראה כיצד לבצע זאת ואיך לבנות כפתור מתפרק משלכם…

כיצד משתמשים בספריית החלקיקים?

הדרך להשתמש בספריית החלקיקים די פשוטה. היא דורשת יצירת 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. A
canvasPadding = 0 will cause the canvas and the target element to have the same
dimensions.
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 to
anime.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 used
to 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 per
particle (as default value).
color String Target’s background-color Color used to fill the particles.
particlesAmount
Coefficient
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
Coefficient
Float 20 A coefficient to calculate the oscilation of particles while animating. A oscilationCoefficient =
0
will result in no oscilation (straight movements), while bigger values will increase the
oscilation, 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 ליצירת אפקטים? שתפו אותנו בתגובות!

רועי יוסף
רועי יוסף

מפתח וורדפרס, מאמין ביצירת הזדמנויות לעסקים קטנים, סטארטאפים נועזים ואנשים עצמאים לשנות את העולם. אוהב טיפוגרפיה, צבעים וכל מה שבינהם ומכוון לספק אתרי וורדפרס עם ביצועים גבוהים, תמיכה בכל הדפדפנים, בעלי קוד ולידי, סמנטי ונקי.

2תגובות...
  • חתול 20 בדצמבר 2018, 23:54

    מגניב לגמרי.
    סתם הערה צדדית, מיותר להשתמש ב־wp_register_script כי wp_enqueue_script יכולה לבצע גם את הרישום ולחסוך לך שורה שלמה בקוד.

השאירו תגובה

פעימות
Up!