הפעם נדבר קצת על הבניה מאחורי הקלעים.

הרבה שאלו איך יצרתי אפקט כוכבים זזים באתר הכל להשכרה.

אז הכנתי לכם הדרכה פשוטה כולל לינקים, שאתם, בוני האתרים, תוכלו ליצור אותם לבד.

האפקט הוא קוד פשוט ב- JAVA SCRIPT  שלא מכביד על האתר.

אז קדימה,

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

1- פותחים עמוד באלמנטור

בוחרים ויג'ט HTML וגוררים אותו לעמוד.

2- תעתיקו את הקוד 

ותכתבו אותו בתוך ה-HTML

<style>
.particles-js-canvas-el {
width:100%;
height:100%;
position: absolute;
z-index: 0;
top:0;
}

</style>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

3- תפתחו תגית

<script> ותסגרו אותה </script>

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

4- תכנסו לאתר המגניב

פה, יש בו ספרייה מדהימה של אפקטים.

נעבור על ההגדרות בשביל לבחור אפקט כוכבים.

דבר ראשון נבחר למעלה באופציה בצורה SNOW

ואז נלך לצורות SHAPE וב-TYPE נבחר צורת כוכב

בצלעות נבחר מספר 5 והנה לנו כוכב יפה

ועכשיו נשחק עוד קצת בהגדרות שיהיה מעניין.

לבחירת כמות הכוכבים:

לבחירת גודל הכוכבים:

לבחירת שקיפות הכוכבים:

לבחירת צבע הכוכבים:

מגניב, נכון?

יאלה, בואו תכניסו את הקוד לאלמנטור שתוכל לראות איך נראה באתר שלכם.

5- אחרי שבחרתם את הצורה, צבע , כמות וכו' תלחצו על CODEPEN

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

6- תבחרו אותו ותעתיקו אותו

לתוך ויג'ט HTML שפתחתם באלמנטור בין התגיות של SCRIPT

7- ולסיום,

תלכו לאזור / קונטיינר איפה שנמצא הויג'ט HTML

וב- מתקדם תכתבו ב-CSS את המזהה particles-js

עכשיו נשאר לכם רק לשמור את העמוד ולהנות מהאפקט המגניב.

אהבתם? תשאירו תגובה למטה, נשמח לקבל משוב 🙂