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

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

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

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

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

אז קדימה,

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



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

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



%D7%95%D7%99%D7%92%D7%98-HTML-151x300.png






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



%D7%91%D7%97%D7%99%D7%A8%D7%AA-%D7%A6%D7%95%D7%A8%D7%94-238x300.png




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



%D7%91%D7%97%D7%99%D7%A8%D7%AA-%D7%9B%D7%95%D7%9B%D7%91-245x300.png




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

%D7%9B%D7%95%D7%9B%D7%91-%D7%97%D7%9E%D7%A9-%D7%A6%D7%9C%D7%A2%D7%95%D7%AA-207x300.jpg




%D7%9B%D7%95%D7%9B%D7%91%D7%99%D7%9D-300x284.jpg




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

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

%D7%9B%D7%9E%D7%95%D7%AA-244x300.png




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

%D7%92%D7%95%D7%93%D7%9C-246x300.png




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

%D7%A9%D7%A7%D7%99%D7%A4%D7%95%D7%AA-233x300.png




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

%D7%A6%D7%91%D7%A2-247x300.png




מגניב, נכון?​

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



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

CODEPEN-181x300.jpg




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

%D7%A7%D7%95%D7%93-%D7%92%D7%90%D7%91%D7%94-300x89.png


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

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



7- ולסיום,

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

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

%D7%A7%D7%95%D7%93-134x300.png




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



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

לעוד מאמרים מעניינים כנסו לאתר שלי https://p100plus.co.il/

רוצים גם חורף חם ועסק פורח, זה הזמן לסגור שיחת אפיון חינמית.

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

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

תגובות

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

לוח לימודים

מסלולי לימוד שאפשר לההצטרף
אליהם ממש עכשיו:

18.11

י"ז חשוון


וובינר מרתק!

המדריך (הלא שלם) לסטוריטלינג

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

הכניסה חופשית!


19.11

י"ח חשוון


פתיחת

קורס בינה מלאכותית - חדשנות ב AI

קורס מקוצר


19.11

י"ח חשוון


אירוע שיתופים ייחודי

בוטים מספרים על עצמם

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

הכניסה חופשית!


25.11

כ"ד


פתיחת

קורס פרסום קופי+

מלגות גבוהות!


27.11

כ"ו חשוון


פתיחת

קורס פיתוח בוטים ואוטומציות עסקיות

מלגות גבוהות!


27.11

כ"ו חשוון


פתיחת

קורס עיצוב גרפי ודיגיטל - בסילבוס חדש ומטורף!

מלגות גבוהות!


27.11

כ"ו חשוון


נפתחה ההרשמה!

קורס צילום חוץ, אירועים וסטודיו - עם בינה מלאכותית!

מלגות גבוהות!


הפרק היומי

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


תהילים פרק קכו

א שִׁיר הַמַּעֲלוֹת בְּשׁוּב יי אֶת שִׁיבַת צִיּוֹן הָיִינוּ כְּחֹלְמִים:ב אָז יִמָּלֵא שְׂחוֹק פִּינוּ וּלְשׁוֹנֵנוּ רִנָּה אָז יֹאמְרוּ בַגּוֹיִם הִגְדִּיל יי לַעֲשׂוֹת עִם אֵלֶּה:ג הִגְדִּיל יי לַעֲשׂוֹת עִמָּנוּ הָיִינוּ שְׂמֵחִים:ד שׁוּבָה יי אֶת (שבותנו) שְׁבִיתֵנוּ כַּאֲפִיקִים בַּנֶּגֶב:ה הַזֹּרְעִים בְּדִמְעָה בְּרִנָּה יִקְצֹרוּ:ו הָלוֹךְ יֵלֵךְ וּבָכֹה נֹשֵׂא מֶשֶׁךְ הַזָּרַע בֹּא יָבוֹא בְרִנָּה נֹשֵׂא אֲלֻמֹּתָיו:
נקרא  37  פעמים

אתגר AI

הצבע הירוק • אתגר 23

לוח מודעות

More from סטודיו פי מאה פלוס

שתף את המאמר

למעלה