תרגולילה #7 – אנימציות ב-CSS והשקת סדנאות הספיישל
אפקטי CSS
סדנאות הספיישל כבר כאן ומספר המקומות מוגבל!
מוזמנים לסיים את 2025 עם שתי סדנאות זום מדהימות שיהפכו כל אתר שלכם לייחודי, ואתכם לבוני אתרים שאי אפשר להתחרות בהם
ימי שני וחמישי, 10:00-13:00 – מתחילים ב- 24.11
כפתור מתרחב עם סלייד:
צבע הכפתור והטקסט מגדירים באלמנטור, את צבע הרקע במעבר עכבר מגדירים בקוד. יש לשים על הכפתור את הקלאס .slide-btn
יש לשים את הקוד ב-custom css של הכפתור או באלמנטור ניהול קודים תחת body end.
/*משך זמן אנימציה*/
.slide-btn .elementor-button-content-wrapper, .slide-btn .elementor-button::before{
transition: all 0.3s;
}
/*הגדלת הרווח בין טקסט לאייקון במעבר עכבר*/
.slide-btn .elementor-button:hover .elementor-button-content-wrapper{
gap: 2em !important;
}
/*הגדרות כפתור, לא לשנות*/
.slide-btn .elementor-button {
position: relative;
overflow: hidden;
}
/*רקע במעבר עכבר*/
.slide-btn .elementor-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--e-global-color-secondary); /* צבע רקע */
transform: translateX(100%);/*רקע מגיע מימין, לשינוי כיוון שנו למינוס 100%*/
z-index: 0;
}
/*תזוזת הרקע במעבר עכבר למקום*/
.slide-btn .elementor-button:hover::before {
transform: translateX(0);
}
/*מיקום אייקון וטקסט מעל רקע*/
.slide-btn .elementor-button-text, .slide-btn .elementor-button-icon{
position: relative;
z-index: 1;
}כפתור עם טקסט כפול:
את כלל הגדרות העיצוב מגדירים באלמנטור, ומוסיפים לכפתור את הקלאס .spin-btn
בקוד מגדירים את הטקסט שעולה במעבר עכבר + המיקום שלו. כל השאר מהגדרות סגנון באלמנטור כרגיל.
יש לשים את הקוד ב-custom css של הכפתור או באלמנטור ניהול קודים תחת body end.
/*הגדרות כפתור, לא געת*/
.spin-btn .elementor-button{
position: relative;
overflow: hidden;
}
/*הגדרות טקסט עולה במעבר עכבר*/
.spin-btn .elementor-button::before {
content: "רחף עליי"; /*תוכן טקסט עולה*/
position: absolute;
top: 4vw; /*הסתרת הטקסט במצב רגיל*/
right: 2vw; /*שוליים מימין לטקסט במעבר עכבר*/
}
/*משך זמן האנימציה*/
.spin-btn .elementor-button-text, .spin-btn .elementor-button-icon, .spin-btn .elementor-button::before{
transition: all 0.3s;
}
/*עליית טקסט מקור במעבר עכבר למעלה*/
.spin-btn .elementor-button:hover .elementor-button-text{
transform: translateY(-4vw);
}
/*סיבוב האייקון במעבר עכבר*/
.spin-btn .elementor-button:hover .elementor-button-icon{
transform: rotate(45deg)
}
/*יישור עליון של טקסט במעבר עכבר*/
.spin-btn .elementor-button:hover::before{
top:1vw;
}
/*הגדרות טאבלט*/
@media(max-width:1025px){
/*הגדרות טקסט עולה במעבר עכבר*/
.spin-btn .elementor-button::before {
top: 6vw; /*הסתרת הטקסט במצב רגיל*/
right: 3vw; /*שוליים מימין לטקסט במעבר עכבר*/
}
/*עליית טקסט מקור במעבר עכבר למעלה*/
.spin-btn .elementor-button:hover .elementor-button-text{
transform: translateY(-4vw);
}
/*יישור עליון של טקסט במעבר עכבר*/
.spin-btn .elementor-button:hover::before{
top:1.5vw;
}
}
/*הגדרות מובייל*/
@media(max-width:757px){
/*הגדרות טקסט עולה במעבר עכבר*/
.spin-btn .elementor-button::before {
top: 40px; /*הסתרת הטקסט במצב רגיל*/
right: 25px; /*שוליים מימין לטקסט במעבר עכבר*/
}
/*עליית טקסט מקור במעבר עכבר למעלה*/
.spin-btn .elementor-button:hover .elementor-button-text{
transform: translateY(-40px);
}
/*יישור עליון של טקסט במעבר עכבר*/
.spin-btn .elementor-button:hover::before{
top:12px;
}
}תיבת אייקון עם אייקון מסתובב במעבר עכבר:
יש לשים על תיבת האייקון את הקלאס .spin-box
מגדירים בקוד את צבע הרקע של האייקון + צבע הרקע של התיבה במעבר עכבר + צבע התיאור במעבר עכבר. כל השאר מהגדרות סגנון באלמנטור כרגיל.
יש לשים את הקוד ב-custom css של הכפתור או באלמנטור ניהול קודים תחת body end.
/*משך זמן האנימציה*/
.spin-box, .spin-box .elementor-icon-box-icon svg, .spin-box .elementor-icon-box-icon{
transition: all 0.5s;
}
/*צבע הרקע של תיבה במעבר עכבר*/
.spin-box:hover{
background: var(--e-global-color-secondary);
}
/*צבע התיאור במעבר עכבר*/
.spin-box:hover .elementor-icon-box-description{
color: var(--e-global-color-text) !important;
}
/*הגדרות האייקון*/
.spin-box .elementor-icon-box-icon{
background: var(--e-global-color-text); /*צבע הרקע*/
padding: 1vw; /*שוליים פנימיים*/
margin-top: -4vw; /*שוליים חיצוניים למשוך למעלה*/
display: flex;
align-items: center;
justify-content: center;
align-self: center;
/*יישור למרכז*/
}
/*סיבוב וגדילת האייקון במעבר עכבר*/
.spin-box:hover .elementor-icon-box-icon{
transform: rotate(90deg) scale(1.05);
}
/*השארת האייקון עצמו לא מסובב במעבר עכבר*/
.spin-box:hover .elementor-icon-box-icon svg{
transform: rotate(-90deg);
}
/*הגדרות מובייל*/
@media(max-width:767px){
.spin-box .elementor-icon-box-icon{
padding:10px;
margin-top:0px; /*ביטול המשיכה למעלה*/
margin-right:-35px; /*הזזת האייקון ימינה*/
}
}תיבת אייקון עם תיאור נחשף במעבר עכבר:
יש לשים את הקלאס .card על תיבת האייקון.
מגדירים בקוד את גובה הפסקה במעבר עכבר + צבע הכותרת והאייקון במעבר עכבר. כל השאר מהגדרות הסגנון של אלמנטור כרגיל.
יש לשים את הקוד ב-custom css של הכפתור או באלמנטור ניהול קודים תחת body end.
יש לשים את הקוד ב-custom css של הכפתור או באלמנטור ניהול קודים תחת body end.
.card, .card .elementor-icon-box-icon svg, .card .elementor-icon-box-title {
transition: all 0.5s !important; /*משך זמן האנימציה*/
}
.card .elementor-icon-box-description{
clip-path: inset(0% 0% 100% 100%); /*אפקט חיתוך הפסקה*/
transition: all 0.7s; /*משך זמן האפקט*/
min-width: 28vw; /*רוחב הפסקה לאפקט חלק יותר*/
height: 0; /*מצב התחלתי פסקה בגובה 0*/
max-width: 100% !important;
}
.card:hover .elementor-icon-box-description{
display: flex;
clip-path: inset(0% 0% 0% 0%); /*ביטול הסתרת פסקה במעבר עכבר*/
height: 5vw; /*גובה פסקה במעבר עכבר*/
}
.card:hover .elementor-icon-box-title {
color: var(--e-global-color-secondary) !important; /*צבע כותרת במעבר עכבר*/
}
.card:hover .elementor-icon-box-icon svg {
fill: var(--e-global-color-secondary) !important; /*צבע אייקון במעבר עכבר*/
}
.icon-plus{
font-size: 2vw; /*גודל הפלוס*/
margin-right:1vw; /*ריווח בין כותרת לפלוס*/
display: inline-block;
}
/*הגדרות טאבלט*/
@media(max-width:1025px){
.card .elementor-icon-box-description{
clip-path: inset(0% 0% 100% 0%);
min-width: 100%; /*רוחב מלא פסקה*/
height: 0; /*מצב התחלתי פסקה בגובה 0*/}
.icon-plus{
font-size:3vw; /*גודל פלוס*/
margin-right:1vw; /*ריווח בין כותרת לפלוס*/
}
.card .elementor-icon-box-title{
margin-top:0vw;
/*שוליים עליוניים חיצוניים כותרת*/
margin-bottom: -5vw !important; /*שוליים תחתונים חיצוניים כותרת, לבטל ריווח מיותר*/
}
.card:hover .elementor-icon-box-title{
margin-bottom: 2vw !important; /*ריווח בין כותרת לפסקה מצב פתוח*/
}
.card:hover .elementor-icon-box-description{
height: 10vw; /*גובה פסקה במעבר עכבר*/
}
}
/*הגדרות מובייל*/
@media(max-width:767px){
.icon-plus{
font-size:20px; /*גודל פלוס*/
margin-right:10px; /*ריווח בין כותרת לפלוס*/
}
.card .elementor-icon-box-title{
margin-top:0px;
/*שוליים עליוניים חיצוניים כותרת*/
margin-bottom: -12px !important; /*שוליים תחתונים חיצוניים כותרת, לבטל ריווח מיותר*/
}
.card:hover .elementor-icon-box-title{
margin-bottom: 10px !important; /*ריווח בין כותרת לפסקה מצב פתוח*/
}
.card .elementor-icon-box-description{
max-width: 100% !important; /*רוחב פסקה מלא*/
}
.card:hover .elementor-icon-box-description{
height: auto; /*גובה פסקה במעבר עכבר*/
}
}
קרוסלת תמונות אנכית:
שמים על הקרוסלה את הקלאס .vertical-carusel
מגדירים באלמנטור את מספר התמונות (שקופיות) ומבטלים בניווט את הנקודות (עימוד), בוחרים בחצים ״בחוץ״ ולא בפנים. בקוד נגדיר את זווית הקרוסלה, גודל התמונה ומיקום החצים. צבעוניות החצים ושאר ההגדרות נבצע בהגדרות הסגנון של אלמנטור כרגיל.
/*עיצוב פעיל רק בדסקטופ*/
@media(min-width:1025px){
.vertical-carusel{
transform: rotate(100deg); /*סיבוב הקרוסלה*/
position:absolute;
top:25vw; /*שוליים מלמעלה*/
right:-20vw; /*שוליים שליליים ימנה*/
}
.vertical-carusel img{
transform: rotate(-90deg); /*סיבוב תמונה פנימית*/
object-fit: cover;
height: 15vw; /*גובה תמונה*/
width: 15vw; /*רוחב תמונה*/
}
/*הגדרות חוץ ימין*/
.vertical-carusel .elementor-swiper-button-next{
position: absolute;
top:-4vw !important; /*שוליים מימין*/
right:47vw !important; /*שוליים מלמעלה*/
transform: rotate(-100deg) !important; /*סיבוב החץ*/
}
/*הגדרות חץ שמאל*/
.vertical-carusel .elementor-swiper-button-prev{
position: absolute;
top:18vw !important; /*שוליים מימין*/
left:40vw !important; /*שוליים מלמעלה*/
transform: rotate(-100deg) !important; /*סיבוב החץ*/
}
}[safe_code_display]
