Between two sections💥 OV 2-4

Section Transitions

מעבר מעניין בין סקשן A לסקשן B. הם לא דורשים כלום מהתוכן, ולכן הם ניטרליים ויכולים לחזור באותו אתר גם שמונה פעמים: Push Under עובד גם על באנר בגובה 100px. מתאימים יותר לאתרים חוויתיים; באתר לרואה חשבון הם כנראה לא קשורים.

Cover Hero

[attribute]section transitionWhile scrolling

ה-hero שוקע למטה בגלילה והרקע של הסקשן עולה מלמטה כמו מסך. אטריביוט על הסקשן, עובד בכל צבע.

לאיזה תוכן: כל hero שיש סקשן מתחתיו / לא דורש כלום מהתוכן

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

פתח דמו

Push Under

<Component />section transitionWhile scrollingsticky-basedירידת דור במובייל

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

לאיזה תוכן: שני סקשנים ברקע בצבע שונה (באותו צבע זה לא עובד יפה) / לא דורש כלום מהתוכן, גם באנר של 100px

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

פתח דמו

Shape World

<Component />section transitionWhile scrollingsticky-basedירידת דור במובייל

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

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

השאלה: יש צורה שמזהה את העסק, ותמונה שאפשר להמשיך עליה את העמוד?

פתח דמו

סקשן שנפתח כמו עין

mister_potatosection transitionWhile scrollingsticky-basedירידת דור במובייל

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

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

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

פתח דמו

Uncover

[attribute]section transitionWhile scrollingsticky-basedירידת דור במובייל

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

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

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

פתח דמו

Colour Shift

[attribute]section transitionScroll into view

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

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

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

פתח דמו

Shader Cross

<Component />section transitionWhile scrollingsticky-basedירידת דור במובייל

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

לאיזה תוכן: שני סקשנים עם תמונת רקע מלאה / מעט מלל על כל תמונה / לא לשני סקשנים לבנים

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

פתח דמו

Section Clip

[attribute]section transitionWhile scrollingsticky-basedירידת דור במובייל

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

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

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

פתח דמו

Section Transitions

Cover Hero

Push Under

Shape World

סקשן שנפתח כמו עין

Uncover

Colour Shift

Shader Cross

Section Clip

ספרו לנו על הפרויקט