→ ZAKAI.COM 

ZAKAI LAB
ANIMATION LIBRARY

IDEAS
DESIGN
TECHNOLOGY
PEOPLE

MOTION
FOR A
BRIGHTER WEB

01
.001

Mask Text Reveal-
חשיפת טקסט מלמעטה

AI flows. Ideas connect.
Scroll
GSAP
Backgrounds

01.001
- Mask Text Reveal |
חשיפת טקסט מלמטה

JS / GSAP 
				
					/* ========================================
   LIORA MOTION LIBRARY
   01 - TEXT REVEAL ENGINE
   Handles: 01.001+
   ======================================== */
<script>
document.addEventListener('DOMContentLoaded', () => {

   const reveals = document.querySelectorAll(
	'.liora-text-reveal, .liora-text-reveal-down'
);

    if (!reveals.length) return;

    // Respect reduced-motion preference
    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');

            // Play only once
            observer.unobserve(entry.target);
        });

    }, {
        threshold: 0.35,
        rootMargin: '0px 0px -18% 0px'
    });

    reveals.forEach(el => observer.observe(el));

});
</script>
CSS 
				
					/* ========================================
   LIORA MOTION LIBRARY
   01.002 - Soft Mask Reveal Down
   ======================================== */

.liora-text-reveal-down {
	--reveal-duration: 2.6s;
	--reveal-delay: 0.35s;
	--reveal-ease: cubic-bezier(0.22, 0.65, 0.25, 1);

	overflow: hidden;
	padding-top: 0.15em;
}

.liora-text-reveal-down .elementor-heading-title {
	display: block;

	transform:
		translateY(-125%)
		scaleY(1.12);

	transform-origin: 50% 0%;

	opacity: 0;
	filter: blur(12px);

	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;
}


/* REVEALED STATE
======================================== */

.liora-text-reveal-down.is-visible .elementor-heading-title {
	transform:
		translateY(0)
		scaleY(1);

	opacity: 1;
	filter: blur(0);
}


/* ACCESSIBILITY
======================================== */

@media (prefers-reduced-motion: reduce) {

	.liora-text-reveal-down .elementor-heading-title {
		transform: none;
		opacity: 1;
		filter: none;
		transition: none;
	}

}
HTM 
				
					ב־Elementor 
תני לכותרת את ה־Class:

liora-text-reveal-down

ורישמואת הכותרת שלכם. אני רשמתי-
01.001
- Mask Text Reveal |
חשיפת טקסט מלמטה

מה אפשר לשנות.. ואיך ⚙️

EXPLORE / LEARN / REUSE / CREATE

.Costomize to fit your vision

כל ההתאמות נעשות ב־CSS, בחלק העליון של הקוד:

–reveal-duration: 2.6s;
–reveal-delay: 0.35s;
–reveal-ease: cubic-bezier(0.22, 0.65, 0.25, 1);

ובאתר עצמו

על Widget הכותרת ב־Elementor:

Advanced → CSS Classes

להכניס:

liora-text-reveal-down
וזה הכול. אין צורך להוסיף HTML לכותרת ואין צורך להוסיף Script נוסף.

 

מהירות האנימציה

 
--reveal-duration: 2.6s;
 

מספר גבוה יותר = אנימציה איטית יותר.


מספר נמוך יותר = אנימציה מהירה יותר.

לדוגמה:

--reveal-duration: 3.2s;

יהיה איטי יותר.

 

השהיה לפני תחילת האנימציה

 
--reveal-delay: 0.35s;
 

0s = מתחילה מיד.
0.7s = מחכה 0.7 שניות לפני שמתחילה.

 

עומק התנועה

חפשי:

 
translateY(-125%)
 

-125% הוא המרחק שממנו הטקסט יורד.

למשל:

 
translateY(-160%)
 

יגרום לטקסט להתחיל גבוה יותר.

 

עוצמת הטשטוש

חפשי:

 
filter: blur(12px);
 

אפשר לשנות למשל ל:

 
filter: blur(6px);
 

לטשטוש עדין יותר, או:

 
filter: blur(18px);
 

לטשטוש דרמטי יותר.

 

עוצמת המתיחה של הטקסט

חפשי:

 
scaleY(1.12)
 

1 = ללא מתיחה.
1.12 = המתיחה הנוכחית.
1.2 = מתיחה מורגשת יותר.

הערה חשובה  🚩  

באתר עצמו

על Widget הכותרת ב־Elementor:

Advanced → CSS Classes

להכניס:

liora-text-reveal-down

וזה הכול. אין צורך להוסיף HTML לכותרת ואין צורך להוסיף Script נוסף.
מתלבט? בוא/י לדבר איתי בווטסאפ?