איך ליצור אייקון עם אנימציה

wordpress-מדריך וורדפרס


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

  1. יש אפשרות לעשות את זה עם תוסף לאלמנטור, אני חושב שהמוצלח ביותר הואDynamic Animations for Elementor, התוסף הזה נותן המון אפשרויות אנימציה.
  2. אם הוספת קצת קוד css,  אם אתם רק רוצים אנימציה פשוטה זה מומלץ יותר במקום להכביד על האתר עם עוד תוספים.

אז הנה הקוד, עם קצת הסבר,

selector { -webkit-animation: scrolling 3s ease infinite;

-moz-animation: scrolling 3s ease infinite;

-o-animation: scrolling 3s ease infinite;

animation: scrolling 3s ease infinite;

}

@keyframes scrolling { 0% { transform: translate(0); }

50% { transform: translate(0,40px); }

100% { transform: translate(0); } }

פשוט תגררו ווידג'ט של אייקון, תעתיקו את הקוד הזה, ותכניסו במתקדם-css מותאם (אם אין לכם פרו, אז בהתאמה אישית – ccs מותאם, ותצטרכו לעשות id,

והנה קצת הסבר על הקוד,

ה 3s מסמל את מהירות האנימציהאפשר לשנות את המספר ליותר מהר או פחות (צריך לשנות את המספר בכל ארבע השורות)

ה-infinite אומר שזה ימשיך כל הזמן, אפשר לשנות את זה מספר ואז האנימציה תפעל את מספר הפעמים ותפסיק,

המספרים עם האחוזים זה בעצם איפה האנימציה תתחיל ותסיים

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

רוני רביץ

רוני רביץ

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

תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר.

רוצים להצטרף לניוזלטר שלנו?

עוד מאמרים שאולי יעניינו אתכם

מעניין?

הרשמו לניוזלטר השבועי שלנו