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


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

  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 אומר שזה ימשיך כל הזמן, אפשר לשנות את זה מספר ואז האנימציה תפעל את מספר הפעמים ותפסיק,

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

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

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

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

תוספים לאלמנטור
אלמנטור

תוספים מומלצים לאלמנטור

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

לוח בקרה של וורדפרס
אלמנטור

איךלעצב את לוח הבקרה עם אלמנטור

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

מעניין?

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