אפקט טקסט זז טרנדי עם אלמנטור

בסרטון הזה נראה איך ליצור אפקט של טקסט זז טרנדי עם אלמנטור,

הנה הקודים שהוזכרו בסרטון,

הקוד עבור שימוש בקרוסלת המלצות,

				
					.swiper-wrapper {
    transition-timing-function: linear;
}
				
			

הקוד לטקסט זז (ללא שימוש בקרוסלה)

				
					.my-text{
    animation-name: r-text;
    animation-duration: 7.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes r-text{
    0%{
        transform: translatex(0%);
    }
    100%{
        transform: translatex(100%);
    }
}
				
			

בשביל שהטקסט יזוז מימין לשמאל

				
					.my-text{
    animation-name: r-text;
    animation-duration: 7.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes r-text{
    0%{
        transform: translatex(100%);
    }
    100%{
        transform: translatex(0%);
    }
}
				
			

12 Responses

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

  2. היי הצלחתי, תודה על המדריך!
    רציתי לשאול למה זה תמיד נעצר ומתחיל מחדש? ולא ממשיך בלופ אינסופי? יש קוד שיכול לעזור לזה? תודה (:

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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