בטח יצא לכם לראות את הרבה אנימציות של גלילה למטה (scroll down) הנה איך לעשות אנימציה פשוטה של חץ עולה ויורד.
דבר ראשון נגרור ווידג’ט מסוג אייקון, ונבחר אייקון של חץ (אפשר כמובן להעלות אייקון שלכם).
לאחר נוסיף קצת css (בלשונית מתקדם – css מותאם).
selector{
animation: my-scrolimg 3s ease infinite;
}
@keyframes my-scrolimg{
0%{
transform:translate(0);
}
50%{
transform:translate(0,40px);
}
100%{
transform:translate(0);
}
}
והנה התוצאה,
על מנת לשנות את המהירות, אפשר לשנות את ה-3s
לשנות את טווח התזוזה אפשר לשנות את ה- 40px
הנה עוד דוגמא,
selector{
animation: my-bounce 3s ease infinite;
}
@keyframes my-bounce {
0%, 100%, 20%, 50%, 80% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
הנה עוד אנימציית גלילה נפוצה.
בשביל זה, נגרור ווידג’ט מסוג html ושם נכניס את הקוד הבא.
<div class="mouse"></div>
<style>
.mouse {
width: 50px;
height: 90px;
border: 3px solid #333;
border-radius: 60px;
position: relative;
}
.mouse:before {
content: '';
width: 12px;
height: 12px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
border-radius: 50%;
opacity: 1;
animation: my-wheel 2s ease infinite;
}
@keyframes my-wheel{
0%{
opacity: 1;
top:10px;
}
100%{
opacity: 0;
top:60px;
}
}
</style>
אפשרות נוספת היא להשתמש עם לוטי,
כאן תוכלו למצוא המון אנימציות גלילה של לוטי.
עוד מאמרים בנושא,
4 תגובות
יש מצב לעשות אנמציה שיזוז מצד לצד ולא למעלה ולמטה?
ראשית יש לך אחלה טיפים ומדריכים מעולים
עוקב אחרי המדריכים שלך באדיקות.
ואם אפשר שאלה קצרה!!!
אני מנסה לשנות צבע של אלמנט אייקון באלמנטור ע”י css מותאם.
כשאני מגדיר ל-class שהגדרתי לו color הוא לא מגיב.
רק כשאני מגדיר color ל-elementor-icon הוא נותן לי לשנות, אבל זה משנה את כל האייקונים שבאתר, האם יש דרך לעקוף את זה
לשים את המילה selector לפני תחילת ההגדרה
זה גורם לכך שיחול רק על האלמנט הנוכחי
במקום translate תגדיר left