דיונים - עיצוב ובניית אתרים |

אפקטים מיוחדים לאתר. הדרכה >>>

עיצוב ובניית אתרים

אפקטים מיוחדים לאתר. הדרכה >>>

פורסם ע"י סטודיו פי מאה פלוס אומנות ועיצוב on 30/10/2022 ב12:46 pm

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

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

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

האפקט הוא קוד פשוט ב- 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 והנה לנו כוכב יפה

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

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

number > value

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

size > value

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

opacity < value

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

color > value

מגניב, נכון?

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

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

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

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

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

7- ולסיום,

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

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

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

אני רואה שהתמונות לא עלו, אם תרצי לראות את ההדרכה עם התמונות שלב אחרי שלב

כנסי למאמר המפורט, תהני!

טליה שוורץ הגיבה לפני 2 שנים 2 חברות · 3 תגובות
3 תגובות

טליה שוורץ
מנהלת קדם
מובילה
31/10/2022 ב12:29 pm

היי יקרה, תודה על השיתוף! נראה מקסים

מוזמנת לעלות פה בקהילה עוד שיתופים 🙂 מחכות!

ואת יכולה לצרף את הקבצים כתמונות בסוף (לא לעשות COPY PASTE אלא להשתמש באייקון של התמונה מצורף צילום מסך
- סטודיו פי מאה פלוס
  אומנות ועיצוב
  חברה
  31/10/2022 ב12:31 pm
  
  רציתי לצרף תמונות לפי סדר המאמר, ולא כל התמונות לקראת סופו
  
  יש אופציה כזאת?
  - טליה שוורץ
    מנהלת קדם
    מובילה
    31/10/2022 ב12:33 pm
    
    בתוך הפורום לא, אנחנו בכוונה שמים את התמונות תמיד בסוף.
    
    בתוך מאמרים (תוכן מקצועי) כן. אם מעניין אותך לכתוב מסודר ממש מדריכים מקצועיים אפשר לפנות לאחראית התוכן [email protected]