אתר ההדרכה לתלמידות

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

קוד לתזוזה לאורך ולרוחב של אלמנטים

קוד לתזוזה לרוחב של תמונת רקע

קוד לתזוזת תמונת רקע מימין לשמאל:

				
					selector{
    animation: scroll 2000s ease infinite;
}
 
@keyframes scroll{
    from{
        background-position: 10000vw;
    }
}

קוד לתזוזת תמונת רקע משמאל לימין:

				
					selector{
    animation: scroll2 2000s ease infinite;
}
 
@keyframes scroll2{
    from{
        background-position: -10000vw;
    }
}

קוד לתזוזה לאורך של תמונת רקע

בחרי את האזור או העמודה בה ממוקמת תמונת הרקע, עברי למתקדם>CSS מותאם והדביקי את הקוד.
קוד לתזוזת תמונת רקע מלמטה ללמעלה:

				
					selector {
    animation: scroll 2000s ease infinite;
}

@keyframes scroll{
    from{
        background-position: 0 10000vh;
    }
}

קוד לתזוזת תמונת רקע מלמעלה ללמטה:

				
					selector {
    animation: scroll 2000s ease infinite;
}

@keyframes scroll{
    from{
        background-position: 0 -10000vh;
    }
}
מקור הקוד: חגית קרמר, תר אלופות

קוד לתזוזה לרוחב של כותרת

בחרי את הכותרת, עברי למתקדם>CSS מותאם והדביקי את הקוד.
(לבחירתך, ניתן לשכפל את הכותרת כמה פעמים כדי שתמלא את כל רוחב המסך).

קוד לתזוזת כותרת מימין לשמאל:

				
					selector .elementor-heading-title{
   animation: slide 10s linear 0s infinite !important;
}
 
@keyframes slide{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100%{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

קוד לתזוזת כותרת משמאל לימין:

				
					selector .elementor-heading-title{
   animation: slide 10s linear 0s infinite !important;
}
 
@keyframes slide{
    0%{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
מקור הקוד: חגית קרמר, תר אלופות

קוד לתזוזה לאורך של כותרת

בחרי את הכותרת, עברי למתקדם>CSS מותאם והדביקי את הקוד.
(לבחירתך, ניתן לשכפל את הכותרת כמה פעמים כדי שתמלא את כל גובה האיזור).

קוד לתזוזת כותרת מלמטה ללמעלה:

				
					selector .elementor-heading-title{
   animation: move-element 10s infinite linear !important;
}
 
@keyframes move-element{
    0%{
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
    100%{
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
} }
}

קוד לתזוזת כותרת מלמעלה ללמטה:

				
					selector .elementor-heading-title{
   animation: move-element 10s infinite linear !important;
}
 
@keyframes move-element{
    0%{
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
    100%{
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
} }
}
בחזרה לכל המדריכים

מדריכים נוספים

מה עושים אם הפונטים שהטמעתי אינם מוצגים באתר?

שיריון כרטיסים באמצעות תוסף (יותר אמיתי, קצת פחות נאה)

הצגת לוח שנה עם אירועים (שהגולש יכול לבחור ולהזמין כרטיס)

שיריון כרטיסים "בכאילו" באמצעות טופס של אלמנטור (הכי קל!)