Motion Vault

התורה החיה של העיצוב והפיתוח: 279 דמואים בשני אזורים. תורה עונה על "מה בונים": קומפוזיציות ומקצבי עמוד, כל אחד עם מתג רוחב. מהלכים עונה על "איך זה זז": אנימציה והתנהגות בכל הטכנולוגיות. כל כרטיס נפתח לעמוד מבודד עם הדמו רץ בלייב.

בתחתית כל עמוד מהלך יש קוד להדבקה: כפתור אחד מעתיק הנחיה מלאה לסוכן קוד, עם ה-CSS, ה-HTML, ה-JS, תגי הסקריפט לפי הסדר ואופן ההמרה ל-React. הקוד עומד בפני עצמו ולא נשען על שום דבר מהמאגר. סבב סקירה מהיר: הממתינים בזה אחר זה, אישור מהמקלדת.

מתאים ל:
MV:g01GSAPממתין

גלילה צידית מוצמדת

הסקשן ננעל למסך והתוכן גולש הצידה במקום למטה. המהלך המבוקש ביותר.

GSAP · ScrollTriggerתהליך ושלביםתמונות וגלריותסקשנים ופריסהרשימות וגרידיםתמונות ומדיה
MV:g02GSAPממתין

חשיפת תמונה במסכה בגלילה

התמונה נצבעת מלמטה למעלה עם קצה מעומעם, בקצב הגלילה, קדימה ואחורה.

GSAP · ScrollTriggerתמונות וגלריותהירו ופתיחהתמונות ומדיהשכבות ומודאלים
MV:g03GSAPממתין

חור מסכה שנפתח על מדיה

המדיה מציצה דרך עיגול קטן; בגלילה העיגול מתרחב עד מסך מלא.

GSAP · ScrollTrigger · pinהירו ופתיחהתמונות וגלריותתמונות ומדיהשכבות ומודאלים
MV:g04GSAPממתין

טקסט נחשף בגלילה: שלוש רמות

שלוש עוצמות חשיפה לכותרת: מילים עולות מ-clip, מילים מתבהרות, והכותרת נמחקת מהצד.

GSAP · SplitTextטקסט וכותרותכותרות וטקסטסקשנים ופריסה
MV:g05GSAPממתין

מסך מפוצל: תמונות מתחלפות לפי טקסט

צד תמונה דביק וצד טקסט גולל; כל בלוק טקסט שמגיע מחליף את התמונה ב-crossfade.

GSAP · ScrollTrigger · stickyתמונות וגלריותתהליך ושלביםתמונות ומדיהכותרות וטקסטסקשנים ופריסה
MV:g06GSAPממתין

גלריה נגררת עם אינרציה

גריד שגוררים ביד והוא ממשיך בתנופה ונבלם ברכות בגבולות.

GSAP · Draggable · Inertiaתמונות וגלריותתמונות ומדיהרשימות וגרידים
MV:g07GSAPממתין

תמונות רודפות עכבר (Image Trail)

מניפת תמונות שרודפת אחרי הסמן במהירויות שונות: הראשונה צמודה, האחרונות משתרכות.

GSAP · tickerhover ומיקרותמונות וגלריותהירו ופתיחהסמן ועכברתמונות ומדיה
MV:g08GSAPממתין

סמן מותאם + פנס

עיגול סמן שרודף את העכבר וגדל מעל לחיצים, וכתם אור מטושטש שמאיר רקע כהה סביב הסמן.

GSAP · ticker · vanillahover ומיקרורקע ואווירהסמן ועכברסקשנים ופריסה
MV:g09GSAPממתין

זריקה אינרציאלית בהובר

מרחפים על פריט והוא נזרק בכיוון תנועת העכבר וחוזר למקומו ברכות.

GSAP · InertiaPluginhover ומיקרוסמן ועכבררשימות וגרידים
MV:g11GSAPממתין

זכוכית מגדלת על תמונה

עיגול הגדלה עוקב עכבר על תמונה, זום 1.5.

vanilla JSתמונות וגלריותhover ומיקרותמונות ומדיהסמן ועכבר
MV:g12GSAPממתין

פרלקס עומק רב-שכבתי

שכבות באותו סקשן נעות במהירויות שונות בגלילה, מהעמוקה ועד הקרובה, והכותרת נעה בכיוון ההפוך. עומק בלי אף תמונה.

GSAP · ScrollTriggerרקע ואווירההירו ופתיחהתמונות ומדיהסקשנים ופריסה
MV:g13GSAPממתין

Batch Reveal לגרידים

כרטיסי גריד נכנסים בקבוצות חכמות: מה שנגלה יחד במסך עולה יחד, עם סטאגר זעיר של 0.08 שניות.

GSAP · ScrollTrigger.batchכרטיסיםרשימות וגרידיםכרטיסים וקופסאות
MV:g14GSAPממתין

מונים בקצב הגלילה

מספרים גדולים שנספרים עם הגלילה, קדימה ואחורה, לא פעם אחת.

GSAP · ScrollTrigger · snapמספרים ונתוניםסקשנים ופריסה
MV:g15GSAPממתין

פרילודר פרימיום (עלייה)

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

GSAP · load eventהירו ופתיחהטעינה ופידבקשכבות ומודאליםעמוד שלם
MV:g15bGSAPממתין

פרילודר דלתות

שני חצאי מסך שנפתחים לצדדים כמו דלתות וחושפים את האתר. כאן הוא מוצג בתוך מסגרת כדי שאפשר יהיה לראות אותו, ובאתר אמיתי החלק הזה הוא position:fixed על כל המסך.

CSS transitions · load eventהירו ופתיחהטעינה ופידבקשכבות ומודאליםעמוד שלם
MV:g16GSAPממתין

מילים מתרוקנות בהובר

מרחפים על מילה בכותרת והיא הופכת למתאר חלול; עוזבים והיא מתמלאת חזרה.

GSAP · SplitText · text-strokeטקסט וכותרותhover ומיקרוכותרות וטקסטסמן ועכבר
MV:g17GSAPממתין

כרטיסים מתעופפים פנימה

שלושה כרטיסים טסים למקומם משני הצדדים עם סיבוב, בקצב הגלילה.

GSAP · ScrollTriggerכרטיסיםהירו ופתיחהכרטיסים וקופסאותרשימות וגרידים
MV:g18GSAPממתין

סצנת סיפור מוצמדת (Master Timeline)

הסקשן ננעל והופך לבמה: כותרת נכנסת ונמוגה, שנייה מחליפה אותה, והמדיה נפתחת מגלולה זעירה למסך כמעט מלא. גלול לאט, גם אחורה.

GSAP · pin + timelineהירו ופתיחהתמונות וגלריותסקשנים ופריסהתמונות ומדיהכותרות וטקסט
MV:g19GSAPממתין

פיזור חפצים נופלים

שמונה אלמנטים נופלים למקומם יחד, כל אחד עם סיבוב וציר סיבוב משלו.

GSAP · timelineמספרים ונתוניםרקע ואווירהסקשנים ופריסהתמונות ומדיה
MV:g20GSAPממתין

טיימליין אופקי עם קו התקדמות

גלילה צידית שקו נמתח לאורכה וכל תחנה נדלקת כשהוא מגיע אליה.

GSAP · pin + scrubתהליך ושלביםסקשנים ופריסהרשימות וגרידים
MV:g22GSAPממתין

עיגול תהליך נצבע בגלילה

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

GSAP · DrawSVG · pinתהליך ושלביםמספרים ונתוניםסקשנים ופריסה
MV:g46GSAPממתין

גרף תוצאות שנמתח בגלילה

קו גרף שמצייר את עצמו בקצב הגלילה, נקודה שרצה על הקו, ומספר שמטפס יחד איתה עד לערך הסופי. השטח מתחת לקו מתמלא בהדרגה.

GSAP · DrawSVG · MotionPathמספרים ונתוניםתהליך ושלביםסקשנים ופריסהרשימות וגרידים
MV:g23GSAPממתין

Flip: פריט קופץ לגריד וחזרה

לחיצה על כרטיס מעבירה אותו מהגריד לתצוגה מורחבת, וה-Flip מנפיש את המסע בין שני המצבים אוטומטית.

GSAP · Flipכרטיסיםתמונות וגלריותhover ומיקרוכרטיסים וקופסאותרשימות וגרידיםתמונות ומדיה
MV:g25GSAPממתין

MotionPath: אלמנט נוסע על מסלול

אייקון שנוסע לאורך מסלול SVG מפותל, כולל סיבוב אוטומטי לכיוון הנסיעה.

GSAP · MotionPathתהליך ושלביםרקע ואווירהסקשנים ופריסהתמונות ומדיה
MV:g30GSAPממתין

סקשנים ננעלים עם Snap

שלושה מסכים אופקיים שהגלילה נצמדת אליהם: עוזבים את הגלגלת והמסך מתיישר לסקשן הקרוב.

GSAP · ScrollTrigger snapתהליך ושלביםהירו ופתיחהסקשנים ופריסהעמוד שלם
MV:g31GSAPממתין

גלריה אנכית נגררת עם מונה

ערימת מדיה אנכית: הפריט המרכזי גדול, השכנים מציצים מעליו ומתחתיו. גרירה, החלקה או גלגלת מעבירים פריט, המונה מתעדכן, והכותרת מפוצלת לשני צידי הערימה.

GSAP · Observerהירו ופתיחהתמונות וגלריותתמונות ומדיהרשימות וגרידים
MV:g35GSAPממתין

טקסט ענק זורם על גל בגלילה

משפט ענק, רחב מהמסך, מוצמד למסך ונוסע לרוחבו בקצב הגלילה. כל מילה מתנדנדת על גל משלה, כך שהשורה נראית כמו סרט שמתגלגל ולא כמו טקסט שזז.

GSAP · ScrollTrigger · SplitTextטקסט וכותרותהירו ופתיחהכותרות וטקסטסקשנים ופריסה
MV:g36GSAPממתין

מעבר סקשן בקשת שמתיישרת

הגבול בין סקשן בהיר לכהה הוא קשת עגולה. ככל שגוללים אליו, הקשת מתיישרת לקו ישר. מעבר רך במקום חיתוך, בלי תמונה ובלי clip-path קופצני.

GSAP · ScrollTrigger · MorphSVGרקע ואווירהניווט ומבנהסקשנים ופריסהכותרות וטקסט
MV:g37GSAPממתין

ענן תמונות מרחפות בעומק

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

GSAP · ScrollTrigger · quickToתמונות וגלריותהירו ופתיחהרקע ואווירהתמונות ומדיהסקשנים ופריסה
MV:g38GSAPממתין

Lenis + ScrollTrigger: גלילה חלקה

תשתית ולא אפקט: Lenis מחליק את הגלילה של כל העמוד, ומחובר לטיקר של GSAP כך שכל ה-ScrollTriggers נשארים מסונכרנים. כפתור צף מכבה ומדליק כדי להרגיש את ההבדל.

Lenis · GSAP tickerניווט ומבנהרקע ואווירהעמוד שלםסקשנים ופריסה
MV:g39GSAPממתין

טקסט מתעקל על קשת בגלילה

משפט שמתחיל כשורה ישרה ומתעקל לקשת ככל שגוללים: כל תו מסתובב סביב ציר רחוק מתחת לשורה, כך שהמילים מתעגלות סביב מרכז דמיוני ולא רק זזות.

GSAP · ScrollTriggerטקסט וכותרותרקע ואווירהכותרות וטקסטסקשנים ופריסה
MV:g40GSAPממתין

סצנה אופקית שכל אלמנט בה מתעורר בתורו

סקשן שננעל למסך והתוכן גולש הצידה, אבל הפעם כל פריט בתוך המסלול מקבל טריגר משלו לפי המיקום האופקי שלו: הוא נכנס כשהוא מגיע לאזור הצפייה, ולא כשהסקשן כולו נכנס. אלמנט אחד בפנים גם מסתובב בסקראב משלו.

GSAP · ScrollTrigger · RTLתהליך ושלביםכרטיסיםניווט ומבנהסקשנים ופריסהרשימות וגרידים
MV:g42GSAPממתין

קו מצויר ביד מתחת לכותרת

קו לא מושלם, כמו שרבוט של עיפרון, שנמתח מימין לשמאל מתחת למילה כשהכותרת נכנסת למסך. שלושה סוגים: קו תחתון, עיגול סביב מילה, וחץ שמצביע.

GSAP · DrawSVGטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g43GSAPממתין

רשימת פרויקטים עם תצוגה מקדימה שעוקבת אחרי הסמן

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

GSAP · quickToתמונות וגלריותhover ומיקרוכרטיסיםרשימות וגרידיםתמונות ומדיהסמן ועכבר
MV:g45GSAPממתין

מפת סביבה: קו שנמתח עם תחנות ומרחקים

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

GSAP · DrawSVG · ScrollTriggerתהליך ושלביםמספרים ונתוניםתמונות וגלריותסקשנים ופריסהרשימות וגרידים
MV:b01התנהגויותממתין

מרקי (רצועה נעה)

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

CSS keyframes + שכפול מדודרקע ואווירהניווט ומבנהרשימות וגרידיםסקשנים ופריסה
MV:b02התנהגויותממתין

Count-Up (מספר שסופר)

מספר גדול שנספר פעם אחת כשהוא נכנס למסך, עם ease-out טבעי ושמירת סיומת.

vanilla JS · IntersectionObserverמספרים ונתוניםסקשנים ופריסה
MV:b02bהתנהגויותממתין

Hotspots על תמונה עם רשימה מסונכרנת

נקודות ממוספרות על תמונה, כל אחת פותחת כרטיס מידע בהובר; הובר על נקודה מדליק את השורה ברשימה ולהפך.

CSS + GSAP popתמונות וגלריותhover ומיקרותמונות ומדיהרשימות וגרידים
MV:b03התנהגויותממתין

CTA דביק חכם

כפתור צף שמופיע רק כשאף CTA ראשי לא נמצא על המסך, ונעלם כשיש.

vanilla JS · IntersectionObserverניווט ומבנהכפתורים ו-CTAתפריטים וניווט
MV:b10התנהגויותממתין

קווי שיער (Hairlines)

מפריד בגובה פיקסל שנמס בקצוות במקום להיחתך.

CSS gradientניווט ומבנהרקע ואווירהסקשנים ופריסה
MV:b11התנהגויותממתין

נקודת דופק (Pulse)

נקודה ירוקה עם גלי דופק. אינדיקטור חי שמושך תשומת לב בעדינות.

CSS keyframesטעינה ופידבקרקע ואווירהסקשנים ופריסה
MV:b14התנהגויותממתין

פרלקס עדין (translate3d)

הרקע נע לאט לכיוון אחד והכותרת לכיוון הנגדי, ונוצר עומק של שתי שכבות. רשת נקודות על הרקע היא מה שמאפשר לעין לראות שהוא בכלל זז.

vanilla JS · rAFרקע ואווירהסקשנים ופריסהתמונות ומדיה
MV:b15התנהגויותממתין

שלדים (Skeletons)

מצייני טעינה בצורת התוכן עם הבהוב שמאלה-ימינה, במקום ספינר.

CSS keyframesטעינה ופידבקשכבות ומודאליםכרטיסים וקופסאות
MV:b16התנהגויותממתין

Toast (הודעה קופצת)

הודעת אישור קטנה שעולה מהפינה, נשארת שלוש שניות ונעלמת.

CSS transitions · vanilla JSטעינה ופידבקשכבות ומודאליםעמוד שלם
MV:b17התנהגויותממתין

תג HUD: מה על המסך עכשיו

תגית קטנה וקבועה בפינת המסך שמראה את מספר הפריט או הסקשן שנמצא כרגע במרכז. כשהמספר מתחלף, התג קופץ קפיצה זעירה כדי שהעין תתפוס את השינוי.

GSAP · ScrollTriggerניווט ומבנהמספרים ונתוניםשכבות ומודאליםתפריטים וניווט
MV:b18התנהגויותממתין

הדר שמחליף ערכת צבע לפי הסקשן

הדר דביק שנשאר קריא על כל רקע: כשהוא עובר מעל סקשן כהה הוא הופך לבהיר, ומעל סקשן בהיר חוזר לכהה. הטריגר נמדד בגובה ההדר עצמו, לא באמצע המסך.

GSAP · ScrollTriggerניווט ומבנהתפריטים וניווטסקשנים ופריסה
MV:b19התנהגויותממתין

כרטיס וידאו שמתנגן בהובר

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

HTML video · JSתמונות וגלריותכרטיסיםhover ומיקרוכרטיסים וקופסאותתמונות ומדיהסמן ועכבר
MV:b20התנהגויותממתין

מחיר שמתגלגל בהחלפת מסלול

מתג בין מסלול חודשי לשנתי, והמחיר לא מתחלף בקפיצה: הספרה הישנה נגללת למעלה ויוצאת, החדשה נכנסת מלמטה, וכל ספרה בעיכוב קטן משלה.

GSAP · timelineמספרים ונתוניםטעינה ופידבקכפתורים ו-CTAכרטיסים וקופסאות
MV:b22התנהגויותממתין

סקשן וידאו שמתנגן רק כשרואים אותו

סרטון ברוחב מלא שמתחיל לנגן כשהסקשן נכנס למסך ונעצר כשהוא יוצא. עד אז מוצג פוסטר בלבד, והדפדפן לא מוריד את הווידאו.

IntersectionObserver · videoתמונות וגלריותהירו ופתיחהתמונות ומדיהסקשנים ופריסה
MV:b23התנהגויותממתין

תפריט מסך מלא עם כניסה מדורגת

לחיצה על הכפתור פורשת שכבה על כל המסך, הקישורים נכנסים אחד אחרי השני, והגלילה מאחור ננעלת. סגירה בכפתור, ב-Escape או בבחירת קישור.

CSS clip-path · JSניווט ומבנהתפריטים וניווטשכבות ומודאלים
MV:b24התנהגויותממתין

כפתור שהאותיות בו מתחלפות בהובר

שתי שכבות של אותו טקסט זו מעל זו. בהובר העליונה מחליקה למעלה והתחתונה עולה במקומה, אות אחרי אות, כך שהמילה מתגלגלת ולא סתם משנה צבע.

CSS transform · JS splithover ומיקרוטעינה ופידבקכפתורים ו-CTAסמן ועכבר
MV:b27התנהגויותממתין

טאבים צפים שמחליפים מדיה מלאה

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

JS · crossfadeתמונות וגלריותניווט ומבנהכרטיסיםתפריטים וניווטתמונות ומדיה
MV:b29התנהגויותממתין

רקע העמוד שמחליף צבע לפי הסקשן

כל סקשן מכריז על ערכת הצבע שלו, והרקע והטקסט של העמוד עוברים אליה. שני מצבים: בקפיצה רכה כשסקשן תופס את רוב המסך, או ברצף שצמוד לגלילה, שבו הרקע נמזג מצבע לצבע בדיוק בקצב שהגולש גולל.

IntersectionObserver · CSS vars · color-mixרקע ואווירהניווט ומבנהסקשנים ופריסהעמוד שלם
MV:b30התנהגויותממתין

אקורדיון שאלות ותשובות

רשימת שאלות שנפתחות בגובה אמיתי, בלי לקפוץ ובלי לחשב פיקסלים. לחיצה פותחת וסוגרת, וכברירת מחדל רק אחת פתוחה בכל רגע.

CSS grid-rows · JSניווט ומבנהטקסט וכותרותרשימות וגרידיםכותרות וטקסט
MV:b31התנהגויותממתין

סליידר המלצות עם גרירה, חצים ונקודות

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

CSS scroll-snap · JSכרטיסיםתמונות וגלריותניווט ומבנהכרטיסים וקופסאותרשימות וגרידיםטפסים ושדות
MV:b32התנהגויותממתין

טופס עם תוויות צפות, שגיאות ומצב שליחה

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

CSS :placeholder-shown · JSטעינה ופידבקטקסט וכותרותטפסים ושדות
MV:b33התנהגויותממתין

גלריה עם לייטבוקס

גריד תמונות שנפתח למסך מלא בלחיצה, עם מעבר בין תמונות בחצים ובמקלדת, סגירה ב-Escape או בלחיצה על הרקע, וגלילה נעולה מאחור.

JS · dialogתמונות וגלריותכרטיסיםתמונות ומדיהשכבות ומודאליםרשימות וגרידים
MV:css01CSS טהורממתין

הרמת כרטיס בהובר

הכרטיס עולה 5 פיקסלים, הצל מתעמק והמסגרת נצבעת. השילוש הקלאסי של המנוע.

CSS transitionכרטיסיםhover ומיקרוכרטיסים וקופסאותסמן ועכבר
MV:css02CSS טהורממתין

קו תחתון שנמתח (RTL-נכון)

קו שנמתח מתחת ללינק מכיוון הקריאה. הסוד: transform-origin לוגי שמתהפך נכון בעברית.

CSS scaleX + transform-originניווט ומבנהhover ומיקרוטקסט וכותרותתפריטים וניווטכותרות וטקסט
MV:css03CSS טהורממתין

מילוי כפתור מהצד

רקע הכפתור מתמלא בצבע מהצד בהובר, והטקסט מתהפך.

CSS pseudo-elementhover ומיקרוכפתורים ו-CTA
MV:css05CSS טהורממתין

כניסת Blur-In

האלמנט נכנס מטושטש ומתחדד למקומו. תחושה יוקרתית בלי אף ספרייה.

CSS @keyframes + IOתמונות וגלריותטקסט וכותרותסקשנים ופריסהכותרות וטקסט
MV:css06CSS טהורממתין

אקורדיון חלק

פתיחה וסגירה חלקות עם הטריק המודרני: grid-template-rows מ-0fr ל-1fr, בלי JS שמודד גבהים.

CSS grid-rows transitionניווט ומבנהרשימות וגרידים
MV:css07CSS טהורממתין

ספינר + שלוש נקודות

שני מצייני הטעינה הקלאסיים: טבעת מסתובבת ושלוש נקודות מדלגות.

CSS keyframesטעינה ופידבקשכבות ומודאליםסקשנים ופריסה
MV:css08CSS טהורממתין

ברק חולף על טקסט

פס אור שחולף על הכותרת בלולאה. עדין ויוקרתי.

CSS background-clipטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:css09CSS טהורממתין

רעידת שגיאה

שדה שנרעד אופקית כששולחים ערך לא תקין. פידבק שמרגישים בלי לקרוא.

CSS keyframesטעינה ופידבקטפסים ושדותכותרות וטקסט
MV:css12CSS טהורממתין

גבול גרדיאנט מסתובב

מסגרת גרדיאנט שמסתובבת סביב הכרטיס בלולאה. אפקט פרימיום מודרני.

CSS @property + conic-gradientכרטיסיםרקע ואווירהכרטיסים וקופסאותסקשנים ופריסה
MV:css13CSS טהורממתין

טקסט גרדיאנט נושם

כותרת בגרדיאנט שזז לאט הלוך ושוב. חיים בלי הסחת דעת.

CSS background-positionטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:css15CSS טהורממתין

כרטיס תלת-ממד עוקב עכבר

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

CSS 3D + JS זעירכרטיסיםhover ומיקרוכרטיסים וקופסאותסמן ועכבר
MV:css16CSS טהורממתין

זום פנימי בהובר

התמונה גדלה בתוך המסגרת החתוכה. הקלאסיקה שכל גלריה צריכה.

CSS transform scaleתמונות וגלריותhover ומיקרותמונות ומדיהכרטיסים וקופסאותסמן ועכבר
MV:css17CSS טהורממתין

פס התקדמות קריאה

פס בראש המסך שמתמלא עם התקדמות הגלילה. מומש כולו ב-CSS עם animation-timeline: scroll().

CSS scroll-driven (בלי JS!)ניווט ומבנהטעינה ופידבקעמוד שלםתפריטים וניווט
MV:css19CSS טהורממתין

מרקי אנכי (עדויות)

טור עדויות שזורם כלפי מעלה בלולאה, עם מסכת קצוות ועצירה בהובר.

CSS keyframesרקע ואווירהטקסט וכותרותכרטיסים וקופסאותרשימות וגרידים
MV:css20CSS טהורממתין

הבזק אור על כפתור

פס אור אלכסוני שחולף על הכפתור כל כמה שניות ומזכיר את קיומו.

CSS pseudo + keyframeshover ומיקרוטעינה ופידבקכפתורים ו-CTA
MV:css21CSS טהורממתין

טוגל ומתג מונפשים

מתג הפעלה וצ'קבוקס עם וי שמצויר: המיקרו-אינטראקציות שגורמות לטופס להרגיש חי.

CSS :checkedטעינה ופידבקhover ומיקרוכפתורים ו-CTAטפסים ושדות
MV:css23CSS טהורממתין

מעבר מצבים חלק (View Transitions)

החלפת תוכן בלי קפיצה: הדפדפן מצלם את המצב הישן והחדש ומנפיש ביניהם לבד. פריט שנבחר גדל למקומו החדש כי שני הצדדים חולקים אותו view-transition-name.

View Transitions APIתמונות וגלריותכרטיסיםניווט ומבנהרשימות וגרידיםעמוד שלם
MV:css24CSS טהורממתין

מרקר שנמתח מאחורי מילה

מילה שמקבלת פס צבע מאחוריה, נמתח מימין לשמאל בזמן שהיא נכנסת למסך. בלי JS: הרקע הוא גרדיאנט שגדל, והתזמון מגיע מ-animation-timeline של הגלילה.

CSS · scroll-drivenטקסט וכותרותכותרות וטקסט
MV:b34התנהגויותממתין

גריד מסונן עם מעבר חלק

שורת קטגוריות מעל גריד. לחיצה מסננת, והפריטים שנשארים מחליקים למקומם החדש במקום להיעלם ולקפוץ. הנעלמים דוהים והחדשים נכנסים.

GSAP · Flipכרטיסיםתמונות וגלריותניווט ומבנהרשימות וגרידיםכרטיסים וקופסאות
MV:b35התנהגויותממתין

ציר תהליך אנכי עם קו שמתמלא

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

GSAP · ScrollTriggerתהליך ושלביםניווט ומבנהסקשנים ופריסהרשימות וגרידים
MV:b36התנהגויותממתין

טופס רב-שלבי עם התקדמות

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

JS · CSS transitionsטעינה ופידבקתהליך ושלביםטקסט וכותרותטפסים ושדות
MV:b37התנהגויותממתין

כרטיסים שנערמים בגלילה

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

CSS sticky · GSAPכרטיסיםתהליך ושלביםכרטיסים וקופסאותרשימות וגרידים
MV:b38התנהגויותממתין

הדר שמתחבא בגלילה וחוזר

בגלילה למטה ההדר מחליק החוצה ומפנה מסך, ובגלילה קלה למעלה הוא חוזר מיד. בראש העמוד הוא שקוף ומתמלא ברקע ברגע שיוצאים מהירו. כאן הוא רץ בתוך מסגרת גלילה עצמאית, כדי שאפשר יהיה לשפוט אותו בלי ההדר של המאגר מעליו.

JS · CSS transformניווט ומבנהתפריטים וניווטעמוד שלם
MV:b39התנהגויותממתין

תפריט נפתח עם פאנל מונפש

פריט בתפריט שפותח פאנל רחב עם קישורים מקובצים. נפתח בהובר בדסקטופ ובלחיצה במגע, נסגר ב-Escape או בלחיצה בחוץ, ורק אחד פתוח בכל רגע.

JS · CSS grid-rowsניווט ומבנהתפריטים וניווטשכבות ומודאלים
MV:b40התנהגויותממתין

פוטר שנחשף מאחורי העמוד

הפוטר יושב קבוע מאחורי התוכן, והעמוד מחליק מעליו כמו וילון. בסוף הגלילה הוא נחשף במלואו בלי אנימציה ובלי JS.

CSS position:fixedניווט ומבנהרקע ואווירהתפריטים וניווטסקשנים ופריסה
MV:b41התנהגויותממתין

סקשן מוצמד שהתוכן בו מתחלף בגלילה

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

GSAP · ScrollTriggerתהליך ושלביםתמונות וגלריותכרטיסיםסקשנים ופריסהרשימות וגרידיםתמונות ומדיה
MV:b42התנהגויותממתין

מרקי שמגיב למהירות הגלילה

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

GSAP · ScrollTrigger velocityרקע ואווירהניווט ומבנהרשימות וגרידיםסקשנים ופריסה
MV:b43התנהגויותממתין

מחשבון עם סליידר וגרף חי

סליידר אחד שמזיז את כל המסך: העמודות משנות גובה, המספרים מתעדכנים, והשורה התחתונה מחושבת בזמן אמת.

input range · JSמספרים ונתוניםטעינה ופידבקטפסים ושדותרשימות וגרידים
MV:b44התנהגויותממתין

סקשן תמחור עם השוואה והדגשת חבילה

שלוש חבילות זו לצד זו, אחת מודגשת כמומלצת, ומתג שמחליף בין תצוגת כרטיסים לטבלת השוואה מלאה. הכרטיסים נכנסים בהדרגה, והמומלצת ראשונה.

CSS · GSAPמספרים ונתוניםכרטיסיםכרטיסים וקופסאותרשימות וגרידיםכפתורים ו-CTA
MV:b45התנהגויותממתין

החלפת תצוגה בין גריד לרשימה

מתג אחד שמחליף בין גריד כרטיסים לרשימה שורות, והפריטים מחליקים בין שתי הפריסות במקום לקפוץ. גם התמונות והטקסט זזים יחד.

GSAP · Flipכרטיסיםתמונות וגלריותניווט ומבנהרשימות וגרידיםכרטיסים וקופסאותתמונות ומדיה
MV:b46התנהגויותממתין

עמודות שנפתחות בהובר

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

GSAP · flex-growכרטיסיםhover ומיקרותמונות וגלריותרשימות וגרידיםכרטיסים וקופסאותתמונות ומדיה
MV:g47GSAPממתין

אלמנט שנוסע בין תחנות לאורך הגלילה

פריט אחד שעובר בין מסגרות ריקות שפזורות לאורך העמוד: משנה מקום, גודל וזווית תוך כדי גלילה, כאילו הוא מלווה את הקורא משלב לשלב.

GSAP · Flip.fit · ScrollTriggerתהליך ושלביםתמונות וגלריותהירו ופתיחהסקשנים ופריסהתמונות ומדיה
MV:lm1חתימה (LM)ממתין

שכבות סחיפה

אלמנטים צפים שנסחפים במהירויות שונות בגלילה, עם הטיה קלה. במרכז המסך כל שכבה יושבת במקום שעוצבה, ומשם היא נסחפת לשני הכיוונים. שכבה איטית מרגישה רחוקה, מהירה מרגישה קרובה.

vanilla JS · rAFרקע ואווירההירו ופתיחהסקשנים ופריסהשכבות ומודאלים
MV:lm3חתימה (LM)ממתין

הצטלבות (Converging)

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

CSS + IOכרטיסיםתהליך ושלביםסקשנים ופריסה
MV:lm4חתימה (LM)ממתין

ערימה דביקה מדורגת

כרטיסים שנערמים זה על זה בגלילה עם offset מדורג. כל כרטיס נדבק מעט נמוך מקודמו.

CSS position:stickyכרטיסיםתהליך ושלביםכרטיסים וקופסאות
MV:lm5חתימה (LM)ממתין

סולם כניסות הירו (150ms)

רכיבי ההירו נכנסים בזה אחר זה במדרגות של 150 אלפיות: לוגו, ניווט, כותרת, ליד, כפתורים.

CSS transitions + delayהירו ופתיחהכותרות וטקסטסקשנים ופריסה
MV:lm7חתימה (LM)ממתין

אוצר ההובר: לחיצה / הרמה / צמיחה

שלוש משפחות ההובר: כרטיס מדיה נלחץ פנימה (0.97), כרטיס תוכן מתרומם אלכסונית, ו-CTA צומח עם סיבוב קטן. משפחה אחת לאלמנט, לעולם לא שתיים.

CSS transitionshover ומיקרוכפתורים ו-CTAכרטיסים וקופסאותסמן ועכבר
MV:lm8חתימה (LM)ממתין

מרקי מוטה ונגרר

רצועה שזורמת בלולאה, מוטה 3 מעלות, וגם נגררת עם הגלילה. שתי תנועות מצטברות.

CSS keyframes + rAFרקע ואווירהרשימות וגרידיםסקשנים ופריסה
MV:lm9חתימה (LM)ממתין

צל מוזח קשיח + רדיוס חד-צדדי

שני מהלכי הקרפט מהעבודה החדשה: צל קשיח בצבע מותג בהיסט 45 מעלות, ורדיוס שמעוגל רק בצד אחד.

CSS (קרפט, לא תנועה)כרטיסיםhover ומיקרוכרטיסים וקופסאות
MV:b47התנהגויותממתין

סליידר השוואה לפני ואחרי

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

GSAP · Draggable · clip-pathתמונות וגלריותטעינה ופידבקתמונות ומדיהטפסים ושדות
MV:b48התנהגויותממתין

ניווט עם התקדמות לפי סקשן

תפריט עוגנים צף שבו הפריט של הסקשן הנוכחי מתמלא בהדרגה תוך כדי הגלילה בו, ומתרוקן כשעוברים הלאה. אין הבהוב של "פעיל" או "לא פעיל".

GSAP · ScrollTriggerניווט ומבנהתהליך ושלביםתפריטים וניווטסקשנים ופריסה
MV:b49התנהגויותממתין

טאבים שמתקדמים לבד עם פס זמן

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

GSAP · ScrollTriggerכרטיסיםתהליך ושלביםתמונות וגלריותתפריטים וניווטכרטיסים וקופסאותתמונות ומדיה
MV:b50התנהגויותממתין

מתג מצב כהה עם מעבר וזיכרון

כפתור שמחליף בין בהיר לכהה בגל עגול שנפתח מהכפתור עצמו. הבחירה נשמרת לביקור הבא, וברירת המחדל היא ההגדרה של המכשיר.

CSS vars · GSAPניווט ומבנהרקע ואווירהטעינה ופידבקכפתורים ו-CTAעמוד שלם
MV:b51התנהגויותממתין

באנר עוגיות עם הגדרות וזיכרון

באנר שעולה מלמטה עם שלוש אפשרויות: אישור הכל, רק ההכרחיות, או פאנל הגדרות עם מתגים לכל קטגוריה. הבחירה נשמרת, ויש כפתור קטן לשנות אותה אחר כך.

localStorage · GSAPטעינה ופידבקניווט ומבנהשכבות ומודאליםכפתורים ו-CTAעמוד שלם
MV:g48GSAPממתין

פסקה שנצבעת מילה-מילה בגלילה

פסקת מניפסט שמתחילה אפורה ונצבעת מילה אחרי מילה בקצב הגלילה, כשמילות המפתח מקבלות הדגשה צבעונית שנפתחת מאחוריהן.

GSAP · ScrollTrigger scrubטקסט וכותרותהירו ופתיחהכותרות וטקסטסקשנים ופריסה
MV:b52התנהגויותממתין

הירו שמתקפל לתפריט דביק

הירו במסך מלא שמתכווץ בגלילה עד שהוא הופך לרצועת תפריט, ואז נשאר דבוק למעלה לשארית העמוד. אותו אלמנט לכל אורך הדרך, בלי החלפה בין שני מצבים.

GSAP · ScrollTrigger · stickyהירו ופתיחהניווט ומבנהתמונות וגלריותסקשנים ופריסהתפריטים וניווט
MV:b53התנהגויותממתין

מילים שמתעבות לפי קרבת הסמן

כותרת או תפריט שבהם כל מילה מתעבה ככל שהעכבר מתקרב אליה ונרגעת כשהוא מתרחק. תנועה רציפה, בלי מצבי הובר בינאריים.

Variable font · GSAP tickerטקסט וכותרותhover ומיקרוניווט ומבנהכותרות וטקסטסמן ועכברתפריטים וניווט
MV:b54התנהגויותממתין

הובר שנכנס מהכיוון שממנו בא הסמן

שכבת הובר שלא מופיעה סתם: היא נכנסת מהצד שממנו העכבר נכנס לכרטיס, ויוצאת לצד שממנו הוא יצא. התנועה עוקבת אחרי היד ולא אחרי הקוד.

Vanilla JS · GSAPכרטיסיםhover ומיקרותמונות וגלריותכרטיסים וקופסאותרשימות וגרידיםסמן ועכבר
MV:b55התנהגויותממתין

מחוון שמחליק בין פריטי תפריט

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

GSAPניווט ומבנהhover ומיקרותפריטים וניווטכפתורים ו-CTA
MV:b56התנהגויותממתין

טולטיפ נגיש שמתהפך ליד קצה המסך

הסבר קצר שנפתח מעל המילה, עובר מתחתיה כשאין מקום למעלה, ונצמד פנימה כשהוא נוגע בקצה המסך. נפתח גם בפוקוס מקלדת ונסגר ב-Escape.

Vanilla JS · GSAPטעינה ופידבקטקסט וכותרותניווט ומבנהשכבות ומודאליםכותרות וטקסטטפסים ושדות
MV:g49GSAPממתין

וידאו שמתקדם עם הגלילה

סרטון שלא מתנגן לבד: הגלילה היא שמזיזה אותו קדימה ואחורה, פריים אחרי פריים. עוצרים והוא עוצר, גוללים אחורה והוא חוזר.

GSAP · ScrollTrigger · currentTimeתמונות וגלריותתהליך ושלביםהירו ופתיחהתמונות ומדיהסקשנים ופריסה
MV:g50GSAPממתין

וילון מעבר בין עמודים

לחיצה על קישור לא מכבה את המסך: וילון עולה, מכסה, ורק אז העמוד מתחלף. בטעינה הוא יורד חזרה, כך שהמעבר מרגיש רציף ולא כמו ניתוק.

GSAP · timelineניווט ומבנהטעינה ופידבקרקע ואווירהשכבות ומודאליםעמוד שלםתפריטים וניווט
MV:g51GSAPממתין

שתי עמודות שנעות בכיוונים הפוכים

קיר תמונות שבו עמודה אחת עולה עם הגלילה והשנייה יורדת. תנועה קטנה שהופכת גריד סטטי לרקע חי, בלי לגזול תשומת לב מהטקסט.

GSAP · ScrollTriggerתמונות וגלריותרקע ואווירהכרטיסיםתמונות ומדיהרשימות וגרידים
MV:g54GSAPממתין

גריד מפוזר שמתכנס בגלילה

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

GSAP · ScrollTrigger scrubתמונות וגלריותכרטיסיםהירו ופתיחהרשימות וגרידיםתמונות ומדיהסקשנים ופריסה
MV:g56GSAPממתין

מדיה שנפתחת לרוחב מלא בגלילה

תמונה שמתחילה ככרטיס קטן ומעוגל במרכז המסך, ונפתחת בגלילה עד שהיא ממלאת את המסך כולו. הכותרת שמעליה נמוגה בדיוק כשהמסגרת נעלמת.

GSAP · ScrollTrigger pin · clip-pathתמונות וגלריותהירו ופתיחהתמונות ומדיהסקשנים ופריסה
MV:g57GSAPממתין

גלגל תמונות שמסתובב בגלילה

תמונות מסודרות על היקף מעגל ענק שרובו מחוץ למסך. הגלילה מסובבת את הגלגל, כל תמונה עולה לראש הקשת בתורה, וכל אחת נשארת ישרה כלפי הצופה.

GSAP · ScrollTrigger scrubתמונות וגלריותכרטיסיםתהליך ושלביםתמונות ומדיהרשימות וגרידיםסקשנים ופריסה
MV:g58GSAPממתין

כותרת ענקית שרואים דרכה את המדיה

מילה אחת בגודל ענק שהאותיות שלה הן חלון: מאחוריהן נעה תמונה בקצב הגלילה. הטקסט הוא המסכה, לא הצבע.

GSAP · ScrollTrigger · background-clipטקסט וכותרותהירו ופתיחהרקע ואווירהכותרות וטקסטסקשנים ופריסה
MV:g59GSAPממתין

כרטיסים שמתקרבים מהעומק בגלילה

כרטיסים שמגיעים מרחוק, מטושטשים וקטנים, וחולפים על פני הצופה אחד אחרי השני בקצב הגלילה. מי שקרוב חד, מי שרחוק מטושטש.

GSAP · ScrollTrigger · perspectiveכרטיסיםתהליך ושלביםהירו ופתיחהכרטיסים וקופסאותרשימות וגרידיםסקשנים ופריסה
MV:g60GSAPממתין

מילה שמתחלפת בתוך משפט בגלילה

משפט אחד שנשאר על המסך, ומילה אחת בתוכו מתגלגלת ומתחלפת בקצב הגלילה. מתחתיו מתחלף גם משפט המשנה, כך שכל מצב עומד בפני עצמו.

GSAP · ScrollTrigger scrubטקסט וכותרותהירו ופתיחהתהליך ושלביםכותרות וטקסטסקשנים ופריסה
MV:g61GSAPממתין

תמונה שמתאספת מרצועות בגלילה

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

GSAP · ScrollTrigger scrubתמונות וגלריותהירו ופתיחהרקע ואווירהתמונות ומדיהסקשנים ופריסה
MV:g62GSAPממתין

לפני ואחרי שנחשף בגלילה

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

GSAP · ScrollTrigger · clip-pathתמונות וגלריותטעינה ופידבקתמונות ומדיהסקשנים ופריסה
MV:g63GSAPממתין

סקשן שמתקפל כמו דף בגלילה

הסקשן לא נגלל החוצה אלא מתקפל אחורה על ציר עליון, כמו דף שמתהפך, והסקשן הבא נחשף מתחתיו.

GSAP · ScrollTrigger · rotateXתהליך ושלביםהירו ופתיחהרקע ואווירהסקשנים ופריסהעמוד שלם
MV:g64GSAPממתין

מדיה שעוברת בין שתי שכבות של הכותרת

אותה כותרת מודפסת פעמיים, אחת מאחורי התמונה ואחת לפניה. התמונה עולה בגלילה ונכנסת בין השתיים, כך שהיא נראית מונחת בתוך הטקסט.

GSAP · ScrollTrigger · z-indexהירו ופתיחהטקסט וכותרותתמונות וגלריותכותרות וטקסטתמונות ומדיהסקשנים ופריסה
MV:g65GSAPממתין

רצועה אופקית שהפריט במרכזה גדל

רצועת כרטיסים שנעה לרוחב לפי הגלילה האנכית, וכל כרטיס גדל ומתחדד כשהוא מגיע למרכז המסך ומתכווץ כשהוא יוצא ממנו.

GSAP · ScrollTrigger · containerAnimationתמונות וגלריותכרטיסיםתהליך ושלביםרשימות וגרידיםכרטיסים וקופסאותתמונות ומדיה
MV:g66GSAPממתין

רקע שמתחלף בין סקשנים בחשיפה מסכתית

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

GSAP · ScrollTriggerרקע ואווירהתהליך ושלביםתמונות וגלריותסקשנים ופריסהתמונות ומדיהעמוד שלם
MV:g67GSAPממתין

קלפים שנפרשים כמניפה בגלילה

ערימת קלפים אחת במרכז שנפרשת בגלילה למניפה, כל קלף בזווית ובגובה משלו, ונאספת בחזרה בגלילה למעלה.

GSAP · ScrollTrigger scrubכרטיסיםתהליך ושלביםהירו ופתיחהכרטיסים וקופסאותרשימות וגרידיםסקשנים ופריסה
MV:editorialמסגרתממתין

המסגרת העריכתית (ברירת המחדל)

קונטיינר אחד של 1200, סולם רוחבים צרים שכל בלוק מתכנס אליו לפי תפקידו (1000, 760, 640, 460), וגרידים ייעודיים ברשימה סגורה. אין 12 עמודות, וזו הדוקטרינה. לחץ "הצג מסגרת" כדי לראות את הסולם על העמוד.

CSS · קונטיינר 1200 + סולם רוחביםכרטיסיםטקסט וכותרותהירו ופתיחהעמוד שלםסקשנים ופריסהכרטיסים וקופסאות
MV:fluidמסגרתממתין

המסגרת הנוזלית (Fluid Frame)

העמוד נושם עם רוחב המסך: כותרות, מרזבים וריווחים גדלים וקטנים יחד, תחומים ב-clamp. גרור את חלון הדפדפן וצפה ב-HUD.

CSS clamp + vwהירו ופתיחהניווט ומבנהסקשנים ופריסהעמוד שלם
MV:breakoutמסגרתממתין

מסגרת הפריצה (Breakout Frame)

גריד אחד לכל עמוד הקריאה עם ארבע דרגות רוחב בשמות: content (640), popout (760), feature (1000), full. כל ילד רק אומר לאיזו דרגה הוא שייך, בלי דיבים עוטפים. במובייל הפריצות נסגרות מעצמן.

CSS Grid · קווים נקוביםטקסט וכותרותתמונות וגלריותעמוד שלםתמונות ומדיה
MV:bentoמסגרתממתין

מסגרת הבנטו (Bento Frame)

העמוד בנוי מלוחות של אריחים בארבעה גדלים סגורים (1×1, 2×1, 1×2, 2×2), בתוך הקונטיינר העריכתי, עם יחידת תא אחת ומרזב אחד. גיבור אחד לכל לוח, הלוח תמיד נסגר, וכל אריח עושה דבר אחד. במובייל שתי עמודות ומפת span שנכתבת מחדש.

CSS Grid · לוחות של אריחיםכרטיסיםמספרים ונתוניםתמונות וגלריותעמוד שלםכרטיסים וקופסאות
MV:modularמסגרתממתין

המסגרת המודולרית השוויצרית (Modular Frame)

12 עמודות ו-baseline של 8 פיקסלים, שש הנחות קנוניות ברשימה סגורה, הכל מיושר לצד ההתחלה, קווי שיער כשלד, ושטח ריק שהוא חלק מהקומפוזיציה. הטיפוגרפיה היא הוויז'ואל. לחץ "הצג מסגרת" כדי לראות את העמודות ואת שכבת ה-baseline.

CSS Grid · 12 עמודות · baseline 8טקסט וכותרותתמונות וגלריותמספרים ונתוניםעמוד שלםסקשנים ופריסהתמונות ומדיה
MV:g68GSAPממתין

סקשנים שדוחפים זה את זה בגלילה

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

GSAP · ScrollTrigger scrubתהליך ושלביםהירו ופתיחהרקע ואווירהסקשנים ופריסהעמוד שלם
MV:g69GSAPממתין

חשיפת פיקסלים בגלילה

רשת ריבועים שמכסה את התמונה ונעלמת בגלילה בסדר אקראי, כמו תמונה שנטענת בחיבור איטי. התמונה מתגלה חתיכה אחרי חתיכה.

GSAP · ScrollTrigger · staggerתמונות וגלריותטעינה ופידבקהירו ופתיחהתמונות ומדיהשכבות ומודאליםסקשנים ופריסה
MV:g70GSAPממתין

כותרת שמתכווצת ומתעגנת לפינה

כותרת פרק במרכז המסך שמתכווצת בגלילה, נעה לפינה העליונה והופכת לתווית קטנה שמלווה את התוכן. בגלילה אחורה היא חוזרת להיות כותרת.

GSAP · ScrollTrigger scrubטקסט וכותרותניווט ומבנהתהליך ושלביםכותרות וטקסטתפריטים וניווטסקשנים ופריסה
MV:g71GSAPממתין

שתי תמונות שמחליפות מקומות בגלילה

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

GSAP · ScrollTrigger scrubתמונות וגלריותכרטיסיםמספרים ונתוניםתמונות ומדיהכרטיסים וקופסאות
MV:g72GSAPממתין

סקשן שמתהפך בין שתי פאות בגלילה

סקשן אחד עם שתי פאות, שמסתובב בגלילה על ציר אנכי ומגלה את הצד השני. אותו שטח מסך מספר שני דברים.

GSAP · ScrollTrigger · rotateYכרטיסיםתהליך ושלביםטקסט וכותרותכרטיסים וקופסאותסקשנים ופריסה
MV:c01קומפוזיציותממתין

חצי-חצי קלאסי

טקסט מול ויז'ואל, 50/50 או 60/40 (טקסט רחב יותר כשהוא העיקר). המבנה הבסיסי של האינטרנט.

פריסה · CSS Gridטקסט וכותרותתמונות וגלריותסקשנים ופריסהתמונות ומדיה
MV:c02קומפוזיציותממתין

חצי-חצי חופף

כמו C1, אבל שכבה אחת פולשת לשנייה: כרטיס טקסט שרוכב על קצה התמונה, או ויז'ואל שנשפך מתחת לטקסט.

פריסה · CSS Gridתמונות וגלריותטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותתמונות ומדיה
MV:c03קומפוזיציותממתין

ציר מדורג (זיגזג)

שורות C1 שמתחלפות כיוון: טקסט מימין וויז'ואל משמאל, ואז הפוך. שתיים עד ארבע שורות.

פריסה · CSS Gridתהליך ושלביםתמונות וגלריותסקשנים ופריסהרשימות וגרידים
MV:c04קומפוזיציותממתין

גריד כרטיסים

שתיים עד ארבע עמודות של פריטים שקולים. ברירת המחדל של האינטרנט, ולכן גם הבנאלית ביותר.

פריסה · CSS Gridכרטיסיםרשימות וגרידיםכרטיסים וקופסאות
MV:c05קומפוזיציותממתין

בנטו

גריד עם תאים בגדלים שונים: תא גיבור 2 על 2, השאר קטנים. כל תא עולם משלו.

פריסה · CSS Gridכרטיסיםמספרים ונתוניםתמונות וגלריותרשימות וגרידיםכרטיסים וקופסאות
MV:c06קומפוזיציותממתין

ציר אנכי ממוספר

עמוד שדרה אנכי (קו ומספרים 01 עד 04) שהתוכן נתלה עליו לסירוגין או בצד אחד.

פריסה · CSS Gridתהליך ושלביםמספרים ונתוניםסקשנים ופריסהרשימות וגרידים
MV:c07קומפוזיציותממתין

מילה ענקית ולוויינים

מילה או מספר ענק (8 עד 14vw) כמרכז הקומפוזיציה, ופריטי תוכן קטנים מרחפים סביבו או נערמים לצדו.

פריסה · CSS Gridמספרים ונתוניםטקסט וכותרותהירו ופתיחהכותרות וטקסטסקשנים ופריסה
MV:c08קומפוזיציותממתין

עריכתי, טקסט עוטף

פריסת מגזין: ויז'ואל נטוע בתוך גוש הטקסט (float) או טור טקסט צר עם הערות שוליים ויזואליות.

פריסה · CSS Gridטקסט וכותרותתמונות וגלריותכותרות וטקסטתמונות ומדיה
MV:c09קומפוזיציותממתין

שכבות צפות

ויז'ואל מרכזי אחד, ועליו או סביבו שניים עד ארבעה כרטיסים קטנים צפים: סטטיסטיקה, תג, ציטוט מיני.

פריסה · CSS Gridהירו ופתיחהתמונות וגלריותמספרים ונתוניםתמונות ומדיהכרטיסים וקופסאות
MV:c10קומפוזיציותממתין

פס רץ (Band)

רצועה צרה מקצה לקצה שחוצה את העמוד: לוגואים רצים, שורת מספרים, ציטוט יחיד, רצועת CTA.

פריסה · full-bleedרקע ואווירהמספרים ונתוניםסקשנים ופריסה
MV:c11קומפוזיציותממתין

מסך מפוצל דביק

צד אחד קבוע (sticky: כותרת, ויז'ואל או ניווט משנה) בזמן שהצד השני גולל תוכן ארוך.

פריסה · position stickyניווט ומבנהתמונות וגלריותטקסט וכותרותסקשנים ופריסהרשימות וגרידים
MV:c12קומפוזיציותממתין

מסדרון אופקי

שורת פריטים שגולשת אופקית עם peek, הפריט הבא מציץ. קרוסלה שהיא פריסה, לא וידג'ט.

פריסה · scroll-snapתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:c13קומפוזיציותממתין

פסיפס אסימטרי

פריטים על גריד, אבל עם הסטות מכוונות: גבהים שונים, offset אנכי, רוטציה עדינה של עד שתי מעלות.

פריסה · CSS Gridתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:c14קומפוזיציותממתין

מונולוג ממורכז

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

פריסה · טיפוגרפיהטקסט וכותרותרקע ואווירהכותרות וטקסטסקשנים ופריסה
MV:c15קומפוזיציותממתין

דו-קומה

קומה עליונה: פריט גיבור רחב (רוחב מלא או שני שלישים). קומה תחתונה: שורת שלושה או ארבעה פריטים קטנים.

פריסה · CSS Gridכרטיסיםתמונות וגלריותרשימות וגרידיםכרטיסים וקופסאות
MV:c16קומפוזיציותממתין

שער כפול

שני בלוקים גדולים זה לצד זה, כל אחד שער לעולם אחר: שני קהלים, שני מסלולים, לפני ואחרי.

פריסה · CSS Gridניווט ומבנהכרטיסיםסקשנים ופריסהכרטיסים וקופסאות
MV:p01מקצבי עמודממתין

מדורג קלאסי

רחב, צר, רחב, צר: סקשן עשיר (C3 או C5) ואז ממוקד (C14 או C10) וחוזר חלילה. ברירת המחדל, מקצב נשימה טבעי.

מקצב עמודניווט ומבנהעמוד שלם
MV:p02מקצבי עמודממתין

קרשנדו

הצפיפות והעוצמה עולות לקראת ה-CTA הסופי: פתיחה אוורירית, אמצע עשיר בהוכחות, סגירה אינטנסיבית.

מקצב עמודניווט ומבנהעמוד שלם
MV:p03מקצבי עמודממתין

נשימות

אחרי כל שניים או שלושה סקשני תוכן, סקשן אוויר (C14, C10 או אווירה).

מקצב עמודניווט ומבנהעמוד שלם
MV:p04מקצבי עמודממתין

סיפור-גלילה

הסקשנים נקשרים לרצף נרטיבי אחד: אלמנט חוזר (קו, מספור, דמות) מלווה את הגלילה, וכל סקשן ממשיך את קודמו. C6 כעמוד שדרה מלא.

מקצב עמודניווט ומבנהתהליך ושלביםעמוד שלם
MV:p05מקצבי עמודממתין

סנדוויץ'

פתיחה וסגירה חזקות (הירו דרמטי ו-CTA דרמטי), אמצע שקט ותכל'סי.

מקצב עמודניווט ומבנהעמוד שלם
MV:s05שפות עיצובממתין

מינימליזם עריכתי

רק מה שחייב. מרחב נשימה ענק, טיפוגרפיה חזקה, צבע אחד. השקט הוא הלוקסוס. גרסה 2 (7.9.2026): ברמת סטודיו, מול רף 30 הסעיפים.

שפת עיצוב · רמת סטודיוהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s05dשפות עיצובממתין

מינימליזם עריכתי · פרטים

כל רכיב של העור בכל מצב, בבידוד: כפתורים (3 רמות × 5 מצבים), שדות (5 מצבים), כרטיס, באדג', צ'יפים, eyebrow, מספרים, טאבים, אקורדיון, טבלת השוואה, מפרידים ורדיוסים. זה מה שהעין בודקת בזום 200%.

שפת עיצוב · רמת סטודיוכרטיסיםhover ומיקרוטעינה ופידבקכפתורים ו-CTAטפסים ושדותכרטיסים וקופסאות
MV:s01שפות עיצובממתין

סקיאומורפיזם

מחקה את העולם האמיתי: חומרים, צללים ריאליסטיים, כפתורים שנלחצים פיזית.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s02שפות עיצובממתין

נאומורפיזם

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

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s03שפות עיצובממתין

גלסמורפיזם

משטחי זכוכית חצי-שקופים מטושטשים מעל רקע צבעוני עשיר. פרימיום, שכבות, Apple.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s04שפות עיצובממתין

קליימורפיזם

תלת-ממד מנופח כמו פלסטלינה: פינות סופר-עגולות, צל פנימי כפול, צבעים חיים. ידידותי ומשחקי.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s06שפות עיצובממתין

מקסימליזם

צבעים מתנגשים, שכבות, טיפוגרפיה ענקית, תנועה בכל פינה. מקסימום זיכרון.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s07שפות עיצובממתין

ברוטליזם

גולמי בכוונה: מסגרות שחורות עבות, אפס עיגולים, צל קשיח, גריד חשוף. אנטי-מלוטש, צעיר.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s08שפות עיצובממתין

ליקוויד גלאס

הזכוכית הנוזלית של Apple: עיוות עדשה, הבזקי אור, שקיפות דינמית. עתידני, 2026.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s09שפות עיצובממתין

Soft Modern

לבנדר ולבן בשכבות, רדיוסים גדולים, צללים רכים, כרטיסים ממוספרים. ייעוץ, בריאות, טק.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s10שפות עיצובממתין

בנטו גריד

תאים בהשראה יפנית על גריד קשיח. כל תא עולם תוכן משלו, ותא-גיבור אחד בולט.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s11שפות עיצובממתין

ממפיס

צורות גיאומטריות צבעוניות, דפוסים, קווי מתאר שחורים. אנרגיה צעירה.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s12שפות עיצובממתין

רטרו שנות ה-70

פלטה תקופתית (חרדל, חלודה, זית, שמנת), טיפוגרפיה תקופתית, גרעיניות. נוסטלגיה, אופי.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s13שפות עיצובממתין

כהה יוקרתי

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

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:s14שפות עיצובממתין

חם אורגני

פשתן, טרקוטה וירוק מרווה. סריף רך לכותרות, צורות עגולות, מרקם נייר עדין ותמונות חמות. מרגיש כמו חדר טיפולים עם אור טבעי, לא כמו אפליקציה.

שפת עיצוב · CSSהירו ופתיחהכרטיסיםניווט ומבנהעמוד שלםכפתורים ו-CTAכרטיסים וקופסאותטפסים ושדות
MV:a01אנטי-פטרניםממתין

מרכוז מזויף

כותרת ממורכזת ופסקה שנראית מיושרת לימין, כי text-align:center מרכז רק בתוך קופסת ה-measure שדבוקה לצד ההתחלה.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a02אנטי-פטרניםממתין

כפתור תלוי באוויר

סקשן מיושר לימין שהכפתור שלו ממורכז, או להפך: הכפתור לא שייך לאף ציר של הסקשן.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a03אנטי-פטרניםממתין

עמוד שכולו צמוד-ימין

כל הסקשנים מיושרים לאותו צד. אין נשימה, אין טקס, הגלילה מונוטונית.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a04אנטי-פטרניםממתין

מצב "אין" שלא נקרא

צ'יפ מאפיין שלילי (אין מחסן) שמסומן רק בגבול מקווקו. בלי הצ'יפ החיובי לידו, אי אפשר לדעת שהוא שלילי.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a05אנטי-פטרניםממתין

אייקון ענק, טקסט זעיר

צ'יפ עם אייקון 28px וטקסט 12px. הטקסט נראה מנופח או מגומד, והצ'יפ לא קריא בזום 100%.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a06אנטי-פטרניםממתין

CTA סוגר על לבן ריק

סקשן הסגירה של העמוד: כותרת וכפתור על רקע לבן, בלי שום שכבה. במילות ליאב: "משעמם ברמות".

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a07אנטי-פטרניםממתין

אזהרה בקוד צבע

רשימה ממוספרת שבה הפריט "שימו לב" מקבל עיגול אפור במקום זהב. הוא נקרא כלא-פעיל, לא כאזהרה.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a08אנטי-פטרניםממתין

דקורציה מעל התוכן

כתם רקע אבסולוטי שנוסף אחרי התוכן ב-DOM, בלי z-index מפורש, ומכסה את הטקסט.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a09אנטי-פטרניםממתין

זכוכית על לבן

כרטיס גלסמורפיזם מעל רקע לבן או חלש. אין מה לטשטש, והזכוכית נעלמת.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a10אנטי-פטרניםממתין

ברוטליזם מרוכך

מסגרת שחורה עבה עם פינה מעוגלת וצל רך. לא ברוטליזם ולא עור אחר, אלא חצי-חצי שנראה כמו טעות.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a11אנטי-פטרניםממתין

hover בלי transition

כפתור שקופץ למצב ה-hover שלו בלי מעבר. נסו: העבירו עכבר על שני הכפתורים.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a12אנטי-פטרניםממתין

ריווח אותיות חיובי בעברית

טקסט רץ עברי עם letter-spacing חיובי. האותיות מתפרקות למילה, ובמיוחד המילים הקצרות.

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a13אנטי-פטרניםממתין

אותה קומפוזיציה שלוש פעמים

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

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:a14אנטי-פטרניםממתין

טקסט על הנקודה הבהירה

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

אנטי-פטרן · ככה לא / ככה כןניווט ומבנהכרטיסיםטקסט וכותרותסקשנים ופריסהכרטיסים וקופסאותכפתורים ו-CTA
MV:ar01ארכיטיפיםממתין

דף נחיתה ממומן

עמוד אחד, מטרה אחת: ליד. נבנה כקרשנדו, מהצהרה אוורירית דרך הוכחות אל סגירה צפופה.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar02ארכיטיפיםממתין

וואן-פייג'ר לעסק שירות

עמוד אחד שמחליף אתר: מי, מה, איך, הוכחה, קשר. תפריט עוגנים ולא עמודים.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar03ארכיטיפיםממתין

עמוד בית לאתר תדמית

עמוד הבית של אתר רב-עמודי: מציג את הרוחב, לא את העומק. כל סקשן פותח דלת לעמוד פנימי.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar04ארכיטיפיםממתין

עמוד שירות פנימי

עמוד של שירות אחד באתר רב-עמודי: למי, מה כלול, איך, שאלות, פעולה. ענייני באמצע, חזק בקצוות.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar05ארכיטיפיםממתין

עמוד מחירים שקוף

המחירים הם התוכן: כמה מוצרים, לכל אחד שלוש חבילות, והקורא בוחר ומשאיר פרטים. הדגם של /start.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar06ארכיטיפיםממתין

אודות כסיפור

עמוד אודות שמספר סיפור בפרקים לאורך עמוד שדרה, במקום פסקה ותמונה.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar07ארכיטיפיםממתין

פורטפוליו ועבודות

העבודות הן הטקסט. הירו קטן, סינון, גלריית מזונרי, מקרה בוחן אחד מודגש, וסגירה.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar08ארכיטיפיםממתין

עמוד בית לחנות

חנות: מבצע גיבור, קטגוריות, מוצרים נבחרים, למה לקנות כאן, קולקציה, ביקורות, ניוזלטר.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar09ארכיטיפיםממתין

עמוד מוצר

גלריה מול קופסת קנייה, ואז פרטים, מפרט, מוצרים דומים וביקורות. הכל משרת את כפתור ההוספה לסל.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar10ארכיטיפיםממתין

דף תודה

אחרי הטופס: אישור ברור, מה קורה עכשיו, ופעולה אחת נוספת (וואטסאפ). קצר.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar11ארכיטיפיםממתין

קורס או וובינר

דף מכירה לקורס: וידאו, מה תדעו, סילבוס, מי מלמד, לוח מחיר אחד, שאלות, הרשמה.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:ar12ארכיטיפיםממתין

מאמר בבלוג

עמוד קריאה: כותרת ומטא, תמונה, גוף במידת measure עם כותרות ביניים וציטוט, ומאמרים קשורים.

ארכיטיפ עמוד · שלדניווט ומבנההירו ופתיחהתהליך ושלביםעמוד שלםסקשנים ופריסה
MV:css25CSS טהורממתין

בנטו עם כוריאוגרפיית הובר

גריד בנטו שכל כרטיס בו מגיב להובר בשלוש שכבות בבת אחת: הטקסט עולה, האייקון מתכווץ, וקישור נחשף מלמטה. תנועה אחת שמרגישה כמו שלוש.

CSS · gridכרטיסיםhover ומיקרוכרטיסים וקופסאותרשימות וגרידיםכפתורים ו-CTA
MV:css26CSS טהורממתין

קיר אריחים נסחף בפרספקטיבה

קיר אינסופי של אריחים בפרספקטיבה קלה שנסחף אנכית בלי סוף, כל עמודה בקצב אחר. הובר עוצר את העמודה ומרים אריח.

CSS · keyframesרקע ואווירהתמונות וגלריותהירו ופתיחהסקשנים ופריסהתמונות ומדיה
MV:css27CSS טהורממתין

לוויינים במסלול סביב מרכז

אלמנט מרכזי ושני מסלולים סביבו, שבכל אחד אייקונים מקיפים אותו במהירות וכיוון שונים. האייקונים נשארים זקופים כי הם מסתובבים נגד המסלול.

CSS · keyframesרקע ואווירהתמונות וגלריותסקשנים ופריסהתמונות ומדיה
MV:css28CSS טהורממתין

אדוות רקע מאחורי אלמנט

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

CSS · keyframesרקע ואווירההירו ופתיחהסקשנים ופריסהכפתורים ו-CTA
MV:css30CSS טהורממתין

מילים שמתבהרות מהערפל

כותרת שנכנסת מילה אחרי מילה, כל מילה מטושטשת ומעט למטה ומתבהרת למקומה. פיצול למילים בלבד, אף פעם לא לאותיות בעברית.

CSS · IntersectionObserverטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:css31CSS טהורממתין

זוהר צפוני ברקע (בלי WebGL)

שלושה כתמי צבע מטושטשים שנעים אחד על השני במסלולים מנוגדים ויוצרים רקע גלי רך, כמו זוהר צפוני. אפס JS, אפס WebGL, עובד בכל מכשיר.

CSS · keyframesרקע ואווירההירו ופתיחהסקשנים ופריסהכותרות וטקסט
MV:css32CSS טהורממתין

קרן אור שזורמת בין שני אלמנטים

קו SVG מחבר שני כרטיסים, ופולס של אור זורם עליו שוב ושוב ומראה שהם מדברים. דיאגרמה שמרגישה חיה.

CSS · SVGתהליך ושלביםרקע ואווירהסקשנים ופריסהכרטיסים וקופסאות
MV:b57התנהגויותממתין

גריד Masonry עם כניסה מונפשת

פריטים בגבהים שונים נארזים בעמודות בלי חורים, נכנסים מלמטה בסטאגר, ומסתדרים מחדש בחלקות כשהחלון משתנה. RTL: העמודה הראשונה מימין.

vanilla JS · CSSתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:b58התנהגויותממתין

דוק אייקונים שמתנפחים ליד הסמן

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

vanilla JS · CSSניווט ומבנהhover ומיקרותפריטים וניווטסמן ועכבר
MV:b59התנהגויותממתין

רשימה חיה שפריטים נכנסים אליה

פריט חדש נכנס לראש הרשימה בקפיצה קטנה, והקודמים נדחפים למטה בחלקות במקום לקפוץ. הרשימה מרגישה כמו פיד חי.

vanilla JS · FLIPטעינה ופידבקכרטיסיםרשימות וגרידיםכרטיסים וקופסאות
MV:b60התנהגויותממתין

וידאו שנפתח מתמונת ההירו

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

vanilla JS · FLIPהירו ופתיחהתמונות וגלריותתמונות ומדיהשכבות ומודאליםכפתורים ו-CTA
MV:b61התנהגויותממתין

משיכה מגנטית לעבר הסמן

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

vanilla JShover ומיקרוכפתורים ו-CTAסמן ועכבר
MV:b62התנהגויותממתין

קרוסלת עומק תלת-ממדית

כרטיסים על מסילה תלת-ממדית: הפעיל קדימה ובגודל מלא, השאר נסוגים לעומק ומתכהים. גרירה, חיצים, מקלדת ואוטו-פליי שנעצר במגע.

GSAP · pointerתמונות וגלריותכרטיסיםתמונות ומדיהרשימות וגרידיםכפתורים ו-CTA
MV:g74GSAPממתין

משקל הפונט זורם בגלילה

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

GSAP · ScrollTriggerטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g76GSAPממתין

סמן-תווית שמשתנה לפי האלמנט

עיגול קטן שעוקב אחרי הסמן, ומעל תמונות וקישורים הוא גדל ומקבל מילה: "צפייה", "פתיחה", "גרירה". הסמן הופך להנחיה.

GSAP · quickTohover ומיקרותמונות וגלריותכרטיסיםסמן ועכברתמונות ומדיהרשימות וגרידים
MV:g77GSAPממתין

כותרת מקו מתאר למילוי בגלילה

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

GSAP · ScrollTriggerטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g78GSAPממתין

חזרה למעלה עם טבעת התקדמות

כפתור עגול בפינה שמופיע אחרי מסך אחד, וטבעת סביבו מתמלאת לפי כמה מהעמוד כבר נקרא. לחיצה גוללת חלק למעלה.

GSAP · ScrollTriggerניווט ומבנהטעינה ופידבקכפתורים ו-CTAעמוד שלם
MV:g79GSAPממתין

מוצר מוצמד עם קריאות שנדלקות בגלילה

תמונת מוצר או מסך נשארת במקום, ובזמן הגלילה נדלקות סביבה קריאות (callouts) אחת אחרי השנייה: נקודה, קו קצר ותיאור. סיור מודרך במוצר בלי לחיצות.

GSAP · ScrollTrigger · pinתמונות וגלריותתהליך ושלביםכרטיסיםתמונות ומדיהסקשנים ופריסהרשימות וגרידים
MV:g81GSAPממתין

פרלקס עכבר בהירו

שכבות ההירו (רקע, תמונה, כותרת, תג צף) זזות בעדינות בכיוון הסמן, כל אחת בעומק אחר. תחושת תלת-ממד בלי שום ספרייה תלת-ממדית.

GSAP · quickToהירו ופתיחהתמונות וגלריותhover ומיקרוסקשנים ופריסהתמונות ומדיהסמן ועכבר
MV:g82GSAPממתין

הטיה לפי מהירות הגלילה

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

GSAP · ScrollTrigger velocityתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:g83GSAPממתין

תג טקסט מעגלי שמסתובב

טקסט שרץ על מעגל סביב חץ או לוגו, מסתובב לאט כל הזמן ומאיץ עם הגלילה. תג של סטודיו, "גלול למטה", "פתוח להצעות".

GSAP · timelineרקע ואווירההירו ופתיחהכפתורים ו-CTAכותרות וטקסט
MV:g84GSAPממתין

סקשן יוצא מפוקוס כשהבא נכנס

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

GSAP · ScrollTriggerהירו ופתיחהתהליך ושלביםסקשנים ופריסהעמוד שלם
MV:g85GSAPממתין

זרקור על כרטיסים אחרי הסמן

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

GSAP · quickSetterכרטיסיםhover ומיקרוכרטיסים וקופסאותרשימות וגרידיםסמן ועכבר
MV:g86GSAPממתין

אייקוני קו שמציירים את עצמם בכניסה

אייקוני קו בסקשן היתרונות נכנסים כשהקו מצייר את עצמו מהתחלה לסוף, בסטאגר, והטקסט עולה מתחתיו. במקום אייקון שקופץ, אייקון שנולד.

GSAP · DrawSVGתהליך ושלביםטעינה ופידבקרשימות וגרידיםתמונות ומדיה
MV:g87GSAPממתין

מחיקת צבע שחושפת טקסט

פס צבע עובר על השורה מימין לשמאל, ומאחוריו הטקסט כבר שם. כמו מברשת שמגלה במקום מכסה. שורה אחרי שורה.

GSAP · ScrollTriggerטקסט וכותרותכותרות וטקסט
MV:g88GSAPממתין

מילה שמתחלפת בהירו בלולאה

משפט הירו קבוע ומילה אחת בו מתחלפת כל שתי שניות: יוצאת למעלה, הבאה נכנסת מלמטה, והרוחב של השורה מתכוונן חלק. ארבע חלופות בלולאה.

GSAP · timelineטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g89GSAPממתין

מעבר דרך הכותרת (Zoom Through)

כותרת ענקית היא חור במסך אטום. בגלילה החור גדל עד שהצופה עובר דרך האותיות אל הסצנה שמאחור. פתיחה קולנועית לעמוד.

GSAP · ScrollTrigger · SVG maskהירו ופתיחהטקסט וכותרותתמונות וגלריותכותרות וטקסטסקשנים ופריסהתמונות ומדיה
MV:g90GSAPממתין

שכבות מוצר שמתפרקות ומתחברות

מוצר שמוצג כערימת שכבות באיזומטריה. בגלילה השכבות מתרחקות זו מזו, כל אחת מקבלת תווית, ובסוף חוזרות ומתחברות. תרשים מפורק (exploded view) חי.

GSAP · ScrollTrigger · 3Dתמונות וגלריותתהליך ושלביםתמונות ומדיהסקשנים ופריסהרשימות וגרידים
MV:g91GSAPממתין

טקסט שנוסע במנהרה לעומק

שורות טקסט מונחות זו אחרי זו בעומק. הגלילה מסיעה את הצופה קדימה: כל שורה גדלה, חולפת על פניו ונעלמת, והבאה מגיעה מהרחוק. מניפסט שנקרא כמו מסע.

GSAP · ScrollTrigger · 3Dטקסט וכותרותהירו ופתיחהכותרות וטקסטסקשנים ופריסה
MV:g92GSAPממתין

חפיסה שמתהפכת קלף אחר קלף

ערימת קלפים מוצמדת למסך. כל גלילה הופכת את הקלף העליון על צירו האופקי, חושפת את הבא, והקלף ההפוך נעלם מאחור. עדויות או יתרונות בקצב של קריאה.

GSAP · ScrollTrigger · 3Dכרטיסיםטקסט וכותרותכרטיסים וקופסאותסקשנים ופריסה
MV:g94GSAPממתין

מצלמה שנוסעת על תמונה בגלילה

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

GSAP · ScrollTrigger · pinתמונות וגלריותתהליך ושלביםתמונות ומדיהסקשנים ופריסה
MV:g95GSAPממתין

קובייה שמסתובבת פאה-פאה בגלילה

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

GSAP · ScrollTrigger · 3Dכרטיסיםטקסט וכותרותכרטיסים וקופסאותסקשנים ופריסה
MV:g96GSAPממתין

סקשן שמתרומם מהשולחן

כרטיסים שוכבים שטוחים בפרספקטיבה, כמו על שולחן, ובזמן שהם נכנסים למסך הם מתרוממים לזקוף, אחד אחרי השני. כניסה עם עומק במקום עוד fade-up.

GSAP · ScrollTrigger · 3Dכרטיסיםכרטיסים וקופסאותרשימות וגרידים
MV:g97GSAPממתין

קו סריקה שהופך שלד לצבע

מסך מוצר מופיע כשלד אפור עם קווי מתאר. קו סריקה יורד עם הגלילה, ומתחתיו הכל מקבל צבע וחיים. "לפני ואחרי" שהגלילה עצמה מציירת.

GSAP · ScrollTrigger · clip-pathתמונות וגלריותהירו ופתיחהתמונות ומדיהסקשנים ופריסה
MV:g98GSAPממתין

אריחים שמתהפכים בגל בגלילה

גריד אריחים שכולם מראים את הצד הכהה. ככל שגוללים, גל של היפוכים עובר עליהם באלכסון וחושף תמונה או צבע בכל אריח. פסיפס שנבנה מול העיניים.

GSAP · ScrollTrigger · 3Dתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:g99GSAPממתין

גליל טקסט תלת-ממדי

שורות טקסט מודבקות על גליל שמסתובב סביב ציר אופקי עם הגלילה. השורה הקדמית קריאה ומלאה, האחרות מתעקלות למעלה ולמטה ודוהות. רולודקס של שירותים.

GSAP · ScrollTrigger · 3Dטקסט וכותרותניווט ומבנהכותרות וטקסטרשימות וגרידים
MV:g100GSAPממתין

לוח שלטים מתהפך (Split-flap)

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

GSAP · ScrollTrigger · 3Dטקסט וכותרותתהליך ושלביםכותרות וטקסטסקשנים ופריסה
MV:g101GSAPממתין

עדשת רנטגן שנוסעת בגלילה

שתי גרסאות של אותה תמונה זו על זו (חוץ ופנים, לפני ואחרי, שרטוט ומוצר), ועדשה עגולה שנוסעת על פניהן עם הגלילה וחושפת את השכבה התחתונה רק בתוכה.

GSAP · ScrollTrigger · clip-pathתמונות וגלריותתהליך ושלביםתמונות ומדיהסקשנים ופריסה
MV:g102GSAPממתין

תריסים: פסים שעולים בין סקשנים

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

GSAP · ScrollTriggerהירו ופתיחהתהליך ושלביםסקשנים ופריסהעמוד שלם
MV:g103GSAPממתין

מספר פרק ענק שמתחלף בגלילה

ספרה ענקית ודהויה יושבת ברקע ומחליפה ערך כשעוברים פרק: הישנה נדחפת למעלה ויוצאת, החדשה נכנסת מלמטה. הגולש תמיד יודע איפה הוא.

GSAP · ScrollTriggerטקסט וכותרותניווט ומבנהתהליך ושלביםכותרות וטקסטסקשנים ופריסהעמוד שלם
MV:g104GSAPממתין

מוצר שמחליף צבע בגלילה

מוצר אחד מוצמד, ובכל סקשן שנכנס הוא מחליף גוון: שכבת הצבע מעליו מתחלפת במעבר חלק, השם והמחיר מתעדכנים. דף מוצר עם ווריאנטים בלי לחיצה אחת.

GSAP · ScrollTriggerתמונות וגלריותכרטיסיםתמונות ומדיהסקשנים ופריסה
MV:g105GSAPממתין

מרקי שמתקבע לכותרת

רצועת מילים שרצה בלי סוף, וככל שגוללים היא מאטה, נעצרת, ונגררת עד שמילה אחת נוחתת בדיוק במרכז המסך. תנועה שהופכת לאמירה.

GSAP · ScrollTriggerטקסט וכותרותהירו ופתיחהכותרות וטקסטסקשנים ופריסה
MV:g106GSAPממתין

חלונות אל תמונה קבועה

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

GSAP · ScrollTriggerתמונות וגלריותרקע ואווירהתמונות ומדיהסקשנים ופריסה
MV:g107GSAPממתין

שנה דביקה שמתחלפת בציר זמן

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

GSAP · ScrollTriggerתהליך ושלביםמספרים ונתוניםכותרות וטקסטרשימות וגרידים
MV:g108GSAPממתין

שורות כותרת שנפתחות ומגלות תמונה

כותרת של שתי שורות צמודות. בגלילה השורות מתרחקות זו מזו, ובמרווח שנפתח ביניהן מתגלה תמונה שגדלה עד לרוחב מלא. הטקסט הופך למסגרת.

GSAP · ScrollTriggerהירו ופתיחהטקסט וכותרותתמונות וגלריותכותרות וטקסטתמונות ומדיהסקשנים ופריסה
MV:g109GSAPממתין

כותרת שמתפרקת לעומקים

מילות הכותרת נראות שורה רגילה, אבל בגלילה כל מילה נעה בקצב אחר, כאילו היא יושבת בעומק אחר. פרלקס בתוך משפט אחד.

GSAP · ScrollTriggerטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g110GSAPממתין

טקסט שנכתב עם הגלילה

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

GSAP · ScrollTriggerטקסט וכותרותכותרות וטקסט
MV:g111GSAPממתין

מסך טלפון מוצמד עם מסכים שמתחלפים

מסגרת טלפון נשארת במקום, ובזמן שהטקסט גולל לצידה המסכים בתוכה מתחלפים: כל פיצ'ר מקבל מסך משלו שנכנס מלמטה. עמוד אפליקציה קלאסי.

GSAP · ScrollTrigger · pinתמונות וגלריותתהליך ושלביםתמונות ומדיהסקשנים ופריסה
MV:g112GSAPממתין

מפלס שעולה: מילוי גלי בגלילה

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

GSAP · ScrollTrigger · SVGמספרים ונתוניםרקע ואווירהכרטיסים וקופסאותכותרות וטקסט
MV:g115GSAPממתין

מחשב נייד שנפתח בגלילה

מחשב נייד סגור שהמכסה שלו נפתח ככל שגוללים, והמסך נדלק ומראה את המוצר. המחשב מתרומם קלות לזווית צפייה.

GSAP · ScrollTrigger · 3Dתמונות וגלריותהירו ופתיחהתמונות ומדיהסקשנים ופריסה
MV:g116GSAPממתין

יחס שמשתנה בגלילה

שני משטחים צבעוניים שמייצגים יחס: לפני ואחרי, אנחנו מול השוק, שתי אפשרויות. בגלילה הגבול ביניהם זז והמספרים משתנים יחד איתו.

GSAP · ScrollTrigger · clip-pathמספרים ונתוניםסקשנים ופריסהכותרות וטקסט
MV:g117GSAPממתין

גלגלות סלוט שמתייצבות בגלילה

שלושה מספרים או מילים על גלגלות אנכיות שמסתובבות מהר כשהסקשן נכנס, ומתייצבות אחת אחרי השנייה על הערך הנכון. "במספרים" עם דרמה.

GSAP · ScrollTriggerמספרים ונתוניםכותרות וטקסטרשימות וגרידים
MV:g118GSAPממתין

אלכסון צבע שמסתובב מאחורי העמוד

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

GSAP · ScrollTriggerרקע ואווירהסקשנים ופריסהעמוד שלם
MV:g119GSAPממתין

אייקון שמתגלגל לאייקון הבא

אייקון אחד גדול ודביק שמשנה צורה בכל שלב בתהליך: עיגול הופך לחץ, חץ לווי, ווי לכוכב. הצורה מספרת את השלב במקום להחליף תמונה.

GSAP · ScrollTrigger · MorphSVGתהליך ושלביםתמונות ומדיהרשימות וגרידים
MV:g120GSAPממתין

רשימה שהפריט במרכז שלה גדל

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

GSAP · ScrollTriggerטקסט וכותרותניווט ומבנהרשימות וגרידיםכותרות וטקסט
MV:g121GSAPממתין

יציאה מזום: מתמונה אחת לפסיפס שלם

מתחילים צמוד לתמונה אחת שממלאת את המסך, והגלילה מרחיקה את המצלמה עד שמתגלה פסיפס של עשרים תמונות שהיא רק אחת מהן. "זה חלק ממשהו גדול".

GSAP · ScrollTrigger · pinתמונות וגלריותהירו ופתיחהתמונות ומדיהרשימות וגרידיםסקשנים ופריסה
MV:g123GSAPממתין

מסוע אופקי שנע עם הגלילה

שתי שורות של תמונות או לוגואים שנעות אופקית בכיוונים מנוגדים, לא בלולאה אלא בקשר ישיר לגלילה: גוללים למטה, השורה העליונה נוסעת ימינה והתחתונה שמאלה. עוצרים, הכל עוצר.

GSAP · ScrollTriggerתמונות וגלריותרקע ואווירהתמונות ומדיהרשימות וגרידים
MV:g124GSAPממתין

טבלת השוואה שמתמלאת בגלילה

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

GSAP · ScrollTrigger · DrawSVGכרטיסיםמספרים ונתוניםרשימות וגרידיםכרטיסים וקופסאות
MV:g125GSAPממתין

כרטיס זכוכית שמטה ומבריק בגלילה

כרטיס (חברות, אשראי, כרטיס מוצר) שמטה בתלת-ממד ככל שגוללים, ופס אור עובר עליו באלכסון בדיוק ברגע ההטיה. כמו להחזיק אותו ביד מול החלון.

GSAP · ScrollTrigger · 3Dכרטיסיםתמונות וגלריותכרטיסים וקופסאות
MV:g126GSAPממתין

גרף קו שנמשך עם נקודה בקצה

גרף צמיחה שהקו שלו נמשך משמאל לימין בקצב הגלילה, נקודה זוהרת רוכבת על הקצה, והערך מעליה מתעדכן. סיפור צמיחה בלי טבלה.

GSAP · ScrollTrigger · DrawSVGמספרים ונתוניםכרטיסים וקופסאותכותרות וטקסט
MV:g127GSAPממתין

מעבר לכהה בגלילה: עיגול שגדל ומחליף ערכה

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

GSAP · ScrollTrigger · clip-pathהירו ופתיחהרקע ואווירהסקשנים ופריסהכפתורים ו-CTA
MV:g128GSAPממתין

מגירה שנפתחת מתחת לסקשן

הסקשן העליון נשאר במקום, והבא נשלף מתחתיו הצידה כמו מגירה, עד שהוא תופס את המסך והעליון נדחק החוצה. מעבר צדדי במקום עוד גלילה למטה.

GSAP · ScrollTrigger · pinהירו ופתיחהתהליך ושלביםסקשנים ופריסהעמוד שלם
MV:g129GSAPממתין

מדרגות כרטיסים שנבנות בגלילה

כרטיסים שעולים מלמטה ומתייצבים כגרם מדרגות בפרספקטיבה: כל כרטיס גבוה יותר ורחוק יותר מהקודם. תהליך שנראה כמו טיפוס.

GSAP · ScrollTrigger · 3Dכרטיסיםתהליך ושלביםכרטיסים וקופסאותרשימות וגרידים
MV:g130GSAPממתין

צמצם מצלמה שנפתח בגלילה

תמונת הירו חבויה מאחורי צמצם מתומן שנפתח מהמרכז ככל שגוללים, כמו עדשת מצלמה, עד שהיא ממלאת את המסך. פתיחה לצלמים ולסטודיו.

GSAP · ScrollTrigger · clip-pathהירו ופתיחהתמונות וגלריותתמונות ומדיהסקשנים ופריסה
MV:g131GSAPממתין

כותרת שמתמלאת בנוזל

כותרת ענקית שהאותיות שלה הן מכל: נוזל צבעוני עולה בתוכן עם הגלילה, עם קו גל על פני השטח, עד שכל המילה צבועה.

GSAP · ScrollTrigger · background-clipטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g132GSAPממתין

סרגל מדידה שנע עם הגלילה

סרגל אופקי עם שנתות ומספרים שנע עם הגלילה תחת מחוון קבוע, כמו סרט מדידה. המספר שמתחת למחוון גדל: שנים, קילומטרים, לקוחות.

GSAP · ScrollTriggerמספרים ונתוניםתהליך ושלביםכותרות וטקסטסקשנים ופריסה
MV:g134GSAPממתין

מעבר דרך הסקשן אל הבא

הסקשן הנוכחי גדל לעבר הצופה ונעלם מעבר למצלמה, והסקשן הבא מתגלה מאחוריו קטן וגדל למקומו. תחושה של לעבור דרך דלת.

GSAP · ScrollTriggerהירו ופתיחהתהליך ושלביםסקשנים ופריסהעמוד שלם
MV:g135GSAPממתין

קו מפריד שמתכופף עם הגלילה

קו דק בין סקשנים שמתכופף כלפי מטה כשגוללים מהר ומתיישר חזרה כמו מיתר כשעוצרים. מפריד שמרגיש חי.

GSAP · ScrollTrigger velocity · SVGרקע ואווירהסקשנים ופריסה
MV:g136GSAPממתין

שתי תמונות שמתמזגות לאחת

תמונה של "לפני" שמתפוגגת לתוך תמונה של "אחרי" תוך כדי זום עדין, בקצב הגלילה. בלי קו מחלק, בלי גרירה: דיסולב שהגלילה שולטת בו.

GSAP · ScrollTriggerתמונות וגלריותתמונות ומדיה
MV:g137GSAPממתין

מרכאות שנפתחות סביב הציטוט

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

GSAP · ScrollTriggerטקסט וכותרותכותרות וטקסט
MV:g138GSAPממתין

זרקור שנוסע על גריד בגלילה

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

GSAP · ScrollTriggerתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:g139GSAPממתין

כותרת שנמחקת בקו ומוחלפת

כותרת ישנה שקו נמתח עליה ומוחק אותה, ומתחתיה עולה הכותרת החדשה בצבע. "לא עוד X. מעכשיו Y" שהגלילה מבצעת.

GSAP · ScrollTriggerטקסט וכותרותהירו ופתיחהכותרות וטקסט
MV:g140GSAPממתין

טבעות יעד שמתמלאות בגלילה

שלוש טבעות מקוננות, כל אחת מייצגת יעד אחר, שמתמלאות בקצב שונה ככל שגוללים, עם מקרא שהמספרים בו רצים. שלושה נתונים בתמונה אחת.

GSAP · ScrollTrigger · SVGמספרים ונתוניםכרטיסים וקופסאותכותרות וטקסט
MV:g141GSAPממתין

שיחת וואטסאפ שמתנהלת בגלילה

בועות צ'אט שמופיעות אחת אחרי השנייה ככל שגוללים, עם "מקליד..." לפני כל תשובה. הסיפור של הליד מהפנייה ועד הפגישה, בפורמט שכולם מכירים.

GSAP · ScrollTriggerטקסט וכותרותתהליך ושלביםרשימות וגרידיםכרטיסים וקופסאות
MV:g142GSAPממתין

קבלה שמודפסת בגלילה

פירוט מחיר שמודפס כמו קבלה: הנייר יוצא מהמדפסת שורה אחרי שורה ככל שגוללים, עד לשורת הסיכום והתלישה. תמחור שקוף עם קריצה.

GSAP · ScrollTrigger · clip-pathמספרים ונתוניםכרטיסיםכרטיסים וקופסאותרשימות וגרידים
MV:g143GSAPממתין

פסים אופקיים שנפתחים בגלילה

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

GSAP · ScrollTriggerתמונות וגלריותכרטיסיםרשימות וגרידיםתמונות ומדיה
MV:g144GSAPממתין

תמונה שנקרעת לשניים וחושפת טקסט

תמונת הירו נקרעת לאורך קו משונן לשני חצאים שנפרדים לצדדים, ובפער נחשפת כותרת. קריעה של נייר, בקצב הגלילה.

GSAP · ScrollTrigger · clip-pathהירו ופתיחהתמונות וגלריותתמונות ומדיהסקשנים ופריסה
MV:g145GSAPממתין

מילים שנופלות מהשורה

משפט שהמילים שלו מתנתקות ונופלות אחת אחת, כל אחת בסיבוב ובכיוון קצת אחר, כשגוללים דרכו. מה שנשאר בשורה הוא המסר.

GSAP · ScrollTriggerטקסט וכותרותכותרות וטקסט
MV:g146GSAPממתין

מד מהירות שהמחט שלו זזה בגלילה

מד עגול כמו בלוח מכונית: המחט מטפסת מהאפס לערך ככל שגוללים, הקשת נצבעת מאחוריה והמספר במרכז רץ. ביצועים, ציון, מהירות טעינה.

GSAP · ScrollTrigger · SVGמספרים ונתוניםכרטיסים וקופסאותכותרות וטקסט
MV:g148GSAPממתין

כתם דיו שמתפשט וחושף

כתם דיו לא סימטרי שגדל מנקודה עד שהוא מכסה את המסך, וכל מה שבתוכו הוא הסצנה הבאה. חשיפה אורגנית במקום עיגול או פס.

GSAP · ScrollTrigger · SVG maskהירו ופתיחהרקע ואווירהסקשנים ופריסהעמוד שלם
MV:b63התנהגויותממתין

שאלות נפוצות כשיחה

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

CSS grid-rows · JSטקסט וכותרותניווט ומבנהרשימות וגרידיםכותרות וטקסט
MV:b64התנהגויותממתין

תגיות שמצביעות על המסר המרכזי

משפט מרכזי בתוך עיגול, וסביבו תגיות של שירותים או יכולות. לכל תגית חץ קטן כמו סמן של משתמש, שמחושב כך שיכוון תמיד אל מרכז העיגול. בכניסה העיגול גדל והתגיות יוצאות ממנו החוצה, ואחר כך הן מתנדנדות קלות.

vanilla JS · IntersectionObserver · CSSטקסט וכותרותכרטיסיםכותרות וטקסטרשימות וגרידים
MV:lm10חתימה (LM)ממתין

לוגואים שמקבלים את צבע הרקע

כל לוגו בקובץ שלו, בכל צבע, משמש כמסכה, והצבע שנשפך דרכה הוא צבע הטקסט של הסקשן. אותה רצועת לקוחות יושבת על רקע בהיר, כהה או בצבע המותג, ומתהפכת לבד בלי קובץ נוסף ובלי פילטר.

CSS mask-image (קרפט, לא תנועה)תמונות וגלריותרקע ואווירהתמונות ומדיהרשימות וגרידים
MV:g149GSAPממתין

שתי תמונות שנפרשות לצדדים וחושפות את הפרויקט

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

GSAP · ScrollTrigger scrubתמונות וגלריותכרטיסיםתמונות ומדיהסקשנים ופריסה