Menu-Photo

close

קטגוריות

איך ליצור אנימציית גלילה למטה (scroll down)

בטח יצא לכם לראות את הרבה אנימציות של גלילה למטה (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 תגובות

    1. ראשית יש לך אחלה טיפים ומדריכים מעולים
      עוקב אחרי המדריכים שלך באדיקות.

      ואם אפשר שאלה קצרה!!!

      אני מנסה לשנות צבע של אלמנט אייקון באלמנטור ע"י css מותאם.
      כשאני מגדיר ל-class שהגדרתי לו color הוא לא מגיב.
      רק כשאני מגדיר color ל-elementor-icon הוא נותן לי לשנות, אבל זה משנה את כל האייקונים שבאתר, האם יש דרך לעקוף את זה

      1. לשים את המילה selector לפני תחילת ההגדרה
        זה גורם לכך שיחול רק על האלמנט הנוכחי

כתיבת תגובה

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

מאמרים נוספים

פעם בשבוע, אני שולח ניוזלטר
עם כל המאמרים החדשים באתר

מתאים לך?