אז מה זה באמת Particles.js?

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

על מה אני מדבר? הנה כמה דוגמאות:

1. הטמעת הסקריפטים

אז יאאלה, כדי להטמיע את הסקריפטים של Particles.js נוריד את התוסף מכאן:
https://github.com/ingeniousweb/ParticleJs-WP-Plugin/archive/master.zip
לאחר ההתקנה יופיע לנו בניהול Particle Background שלשם נוסיף את הקוד json שנוריד:

2. יצירת Particles

ניצור את ה Particle מכאן: http://vincentgarreau.com/particles.js/
נשחק עם ההגרות של ה particle ואז ונוריד את הקובץ json:

הקוד אמור להראות ככה:

{
"particles": {
"number": {
"value": 400,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#f59cea"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "bottom",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
}

3. הצגת ה Particles

נקח את הקוד הארוך שבסעיף 2 ונכניס אותו בין הקוד הבא:

particlesJS('particles-js',
   ....
);

כאשר ה particles-js הוא ה ID שאיתנו נשתמש כדי להציג את החלקיקים.
עכשיו יש כמה מקומות שאפשר להציג את החלקיקים, בתוך section מסויים, כרקע לכל האתר, או בסליידרים\עמודות וכו'..

  • הוספה לאיזור (בבילדרים בעיקר, סטייל Elementor \ Visual Composer וחבריו)
    נוסיף באלמנטור את ה ID הנ"ל: particles-js.
    לא לשכוח לתת תוכן\מרווח לאיזור שיתפוס גובה, אחרת לא יראו
  • הוספה לרקע באתר

נוסיף תחת עיצוב > ערוך > header.php את הקוד הבא בידיוק מתחת ל body

<div id="particles-js"></div>

ואז תחת עיצוב > התאמה אישית > CSS מותאם (או בקובץ CSS שלכם (תמיד מומלץ CSS בתבנית בת בקובץ חיצוני)) נרשום את הCSS הבא כדי להציג את החלקיקים לרקע האתר:

/* -- particles js -- */
/* note under the body there is a div with class of #particles-js and those are the styling */

#particles-js canvas {
display: block;
vertical-align: bottom;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
top: 0;
left: 0
}

4. סיכום - למה זה טוב ומתי להשתמש?

Particles.js בא להציל את המצב במקרים שרוצים לתת ויזואל מיוחד ו"מורכב" בתחומים מסויימים, נותן דינאמיות וחיים לדף, ויכול להתאים יופי בתחומים כמו אלקטרוניקה \ מדעים \ מחשבים \ תכנות. כרקע או כ – hero sliders. יחד עם זאת לא הייתי משלב את זה לרקעים באתרים עם הרבה תוכן, הדינאמיות שלה תפריע לקריאה, וגם יש גם קצת ירידה קלה בביצועים בגלילה בדפדפנים מסויימים, ולכן הוא עדיף כ HERO סליידר ודפי נחיתה ודפי אינטרנט עם תוכן ייחודי וקצר.