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

בפוסט קצר זה נראה כיצד להשתמש בספרייה 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 ניתן לקבוע את צבע החלקיקים…

זהו סיימנו, הנה התוצאה:

תכונות אובייקט החלקיקים

הטבלה הבאה מתארת את כל התכונות האפשריות לאובייקט החלקיקים:

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

לסיכום

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

וכפי שציינתי בתחילת המדריך, רוב העבודה הקשה שאתם רואים בפוסט זה נעשתה על ידי Luis Manuel ו Mary Lou מ Codrops. מכירים עוד דרכים להשתמש ב Anime.js ליצירת אפקטים? שתפו אותנו בתגובות!