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

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

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

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

האפקט הוא קוד פשוט ב- 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 זה מרוח והופך לפסים במקום עיגולים
לא מוצאת איפה משנים את זה?
 
וואו- אין מילים!
תדוה על ההיכרות עם הכלי המופלא הזה.
 

הפרק היומי

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


תהילים פרק קנ

א הַלְלוּיָהּ הַלְלוּ אֵל בְּקָדְשׁוֹ הַלְלוּהוּ בִּרְקִיעַ עֻזּוֹ:ב הַלְלוּהוּ בִגְבוּרֹתָיו הַלְלוּהוּ כְּרֹב גֻּדְלוֹ:ג הַלְלוּהוּ בְּתֵקַע שׁוֹפָר הַלְלוּהוּ בְּנֵבֶל וְכִנּוֹר:ד הַלְלוּהוּ בְתֹף וּמָחוֹל הַלְלוּהוּ בְּמִנִּים וְעוּגָב:ה הַלְלוּהוּ בְצִלְצְלֵי שָׁמַע הַלְלוּהוּ בְּצִלְצְלֵי תְרוּעָה:ו כֹּל הַנְּשָׁמָה תְּהַלֵּל יָהּ הַלְלוּיָהּ:
נקרא  25  פעמים

ספירת העומר

לוח מודעות

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

שתף את המאמר

למעלה