→ ZAKAI.COM
IDEAS
DESIGN
TECHNOLOGY
PEOPLE
MOTION
FOR A
BRIGHTER WEB
<script>
document.addEventListener('DOMContentLoaded', () => {
const reveals = document.querySelectorAll('.liora-text-reveal');
if (!reveals.length) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
reveals.forEach(el => el.classList.add('is-visible'));
return;
}
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
});
}, {
threshold: 0.35,
rootMargin: '0px 0px -18% 0px'
});
reveals.forEach(el => observer.observe(el));
});
</script>
/* ========================================
LIORA MOTION LIBRARY
01.002 - Soft Mask Reveal Horizontal
======================================== */
.liora-reveal-horizontal {
--reveal-duration: 2.6s;
--reveal-delay: 0.35s;
--reveal-distance: 115%;
--reveal-blur: 12px;
--reveal-stretch: 1.10;
--reveal-ease: cubic-bezier(0.22, 0.65, 0.25, 1);
overflow: hidden;
padding-inline: 0.15em;
}
.liora-reveal-horizontal .elementor-heading-title {
display: block;
opacity: 0;
filter: blur(var(--reveal-blur));
transition:
transform var(--reveal-duration) var(--reveal-ease),
filter 2.1s ease-out,
opacity 1s ease-out;
transition-delay: var(--reveal-delay);
will-change: transform, opacity, filter;
}
/* FROM LEFT */
.liora-reveal-horizontal.from-left .elementor-heading-title {
transform:
translateX(calc(var(--reveal-distance) * -1))
scaleX(var(--reveal-stretch));
transform-origin: left center;
}
/* FROM RIGHT */
.liora-reveal-horizontal.from-right .elementor-heading-title {
transform:
translateX(var(--reveal-distance))
scaleX(var(--reveal-stretch));
transform-origin: right center;
}
/* REVEALED */
.liora-reveal-horizontal.is-visible .elementor-heading-title {
transform: translateX(0) scaleX(1);
opacity: 1;
filter: blur(0);
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
.liora-reveal-horizontal .elementor-heading-title {
transform: none;
opacity: 1;
filter: none;
transition: none;
}
}
01.002 - </br>
Soft Mask Reveal Horizontal
</br>כניסה משמאל
וכניסה מימין
כניסה משמאל:
liora-text-reveal-horizontal from-left
כניסה מימין:
liora-text-reveal-horizontal from-right
כלומר לא צריך שני קודים שונים. רק מחליפים from-left ב־from-right.
EXPLORE / LEARN / REUSE / CREATE
.Costomize to fit your vision
כניסה משמאל:
liora-text-reveal liora-reveal-horizontal from-leftכניסה מימין:
liora-text-reveal liora-reveal-horizontal from-rightאפשר לשים את שתי האפשרויות באותו עמוד דמו בדיוק כפי שעשית.
כל השליטה נמצאת בראש ה־CSS:
--reveal-duration: 2.6s;--reveal-delay: 0.35s;--reveal-distance: 115%;--reveal-blur: 12px;--reveal-stretch: 1.10;--reveal-duration – מהירות האנימציה. 3.2s = איטית יותר, 2s = מהירה יותר.
--reveal-delay – כמה זמן לחכות לפני שהאנימציה מתחילה. 0s = מיד.
--reveal-distance – המרחק שממנו הטקסט נכנס. 150% = כניסה מרחוק יותר.
--reveal-blur – עוצמת הטשטוש בתחילת האנימציה. 0px = ללא Blur, 20px = Blur חזק יותר.
--reveal-stretch – המתיחה האופקית בתחילת האנימציה. 1 = ללא מתיחה, 1.15 = מתיחה חזקה יותר.
שינוי כיוון לא דורש שינוי בקוד. פשוט מחליפים ב־CSS Classes של Elementor:
from-left
from-rightמהירות
אצלנו האנימציה קשורה לגלילה, ולכן ה"מהירות" נשלטת בעיקר על ידי scrub.
כרגע:
scrub: 1.8
תגובה מהירה יותר:
scrub: 0.8
תגובה רכה ואיטית יותר:
scrub: 3
צבע הנקודות:
.lab-scroll-demo__dot {
background: #ff5a1f;
box-shadow:
0 0 12px rgba(255,90,31,.75),
0 0 30px rgba(255,90,31,.35);
}
צבע הקווים:
.lab-scroll-demo__line {
border-color: rgba(221,165,50,.32);
}
צבע הטקסט:
.lab-scroll-demo__text span {
color: #241b19;
}
גודל
לגובה אזור האנימציה:
.lab-scroll-demo {
height: 500px;
}
לדוגמה קטן יותר:
height: 380px;
גדול יותר:
height: 650px;
ולגודל הטקסט:
.lab-scroll-demo__text span {
font-size: clamp(38px, 5vw, 78px);
}