חיפוש ]

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

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

 

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

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

NameTypeDefaultDescription
canvasPaddingInteger150Padding 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.
durationInteger1000Duration (ms) to perform the animations of target element and particles.
easingString or FunctioneaseInOutCubicEasing function to perform the animation of target element. It will be passed directly to
anime.js.
typeStringcircleType of particle. Could be any of the following values: circle, rectangle, triangle
styleStringfillStyle of particle. Could be any of the following values: fill, stroke.
directionStringleftDirection 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.
sizeFloat or FunctionRandom from 1 to 4Size (px) for particles.
speedFloat or FunctionRandom from -2 to 2Pixels per frame that a particle will be moved. It could be a function to set it randomly per
particle (as default value).
colorStringTarget’s background-colorColor used to fill the particles.
particlesAmount
Coefficient
Float3A 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
Float20A 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.
beginFunctionundefinedExecute a function at the beginning of the animation.
completeFunctionundefinedExecute a function at the end of the animation.

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

לסיכום

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

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

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

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

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

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

    • רועי יוסף 22 דצמבר 2018, 7:17

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

  • ליעוז אסא 21 יוני 2019, 20:39

    וואוו זה ממש מדהים!

  • מרין בר שלוה 27 אוקטובר 2019, 1:01

    היי יש דרך שזה יהיה בהובר ולא בלחיצה?
    והאם יש אפשרות שהחלקים שמתעופפים יהיו מטבעות זהב? תודה

    • רועי יוסף 30 אוקטובר 2019, 21:16

      🙂

      לצערי זה מעבר לסקופ של המדריך – לא ניתן לעשות זאת עם מטבעות זהב בדרך המתוארת בפוסט זה…

      • מרין 5 ינואר 2020, 11:18

        תודה

  • איש נחמד 19 יוני 2021, 23:08

    וואוו רועי!
    חבל שאין אצלך באתר אפשרות ליצור 'מועדפים', זה אחד הפוסטים הטובים…!

תגובה חדשה

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