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

איך זה בנוי

שני פסים absolute בתוך ה-pane של הפאזל, ואחרי המסילה סקשן רגיל. בלי סקריפט משלו, הכול data-to על pieces. ה-CSS ב-eye-open.css ליד הדף.

החיתוך

אין כאן mask. כל פס הוא חצי pane עם overflow: hidden, ובתוכו עותק של הלוגו ממורכז בגובה 100cqh, פי 2 מהפס. בעליון הוא צמוד למעלה ובתחתון למטה, אז כל פס מראה חצי אחר, והחצאים נפגשים באמצע.

פער המהירויות

הפס נע 100% מהגובה שלו, שהם 50% מה-pane. הלוגו נע 20% מהגובה שלו נגד הפס, אז בפועל הוא זז רק 30%. קצה הפס עובר על האותיות ואוכל אותן, וזו התנועה שנראית כמו מסכה. באותו ease היחס נשמר בכל רגע. בלי התנועה הנגדית הלוגו נדבק לפס, וזו סתם דלת שנפתחת.

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

הקושי באפקט כזה הוא הזרימה: לא אפקט של מסך מלא שנגמר, ואז גלילה רגילה לחלל אחר. לכן ל-pane ולסקשן הבא אותו רקע (--eye-ground), והסקשן הבא עולה מעל סוף המסילה (margin-top: -30vh) בזמן שה-pane עוד עומד, בדיוק כשהפס כמעט נפתח. בלי padding עליון (pt-0), כדי שלא תהיה גלילה ריקה בין הפתיחה לתוכן.

מה לשמור

• הלוגו בצבע הרקע שמתחת: הפס שנפתח נבלע באותיות.
• הפסים בצבע של הסקשן שמעל, וכך הלוגו יושב על הדף בלי קצה נראה.
• בלי מלל בתוך ה-pane: רקע שנפתח ואז מלל שכבר עומד שם שוברים את הרצף, והקורא לא מבין מה קרה.
• padding-block: 0 על ה-pane: cqh נמדד מתוך ה-padding, ובלי זה החצאים לא נפגשים.
• חפיפה של 1px באמצע (bottom: calc(50% - 1px)), כדי שלא יראו קו בין הפסים.
• data-puzzle-mobile חובה: בלעדיו אין בטלפון תנועה, והפסים נשארים על התוכן. ב-reduced motion אין תנועה, לכן שם ה-pane מוסתר והסקשן הבא מגיע ישר.
• קו בהיר דק בקצה הפס: הקצה נופל על חצי פיקסל והדפדפן מערבב אותו עם מה שמתחתיו. עוד לא פתור. גם הפן מטפל באותו דבר, ב-wholePixels.
• בפן הפתיחה היא clip-path: polygon אחד. כאן שני פסים, כי הפרסר של הפאזל לא מקבל ערך עם רווחים.

<div className="eye-open">
  <section data-puzzle-track="" data-puzzle-mobile="">
    <div data-puzzle-pane="">
      <div data-puzzle-piece="" data-to="y:-100% ease:power4.inOut" className="eye-open__half eye-open__half--top">
        <div data-puzzle-piece="" data-to="y:20% ease:power4.inOut" className="eye-open__logo-box"><img src="/logo.svg" alt="Today Web" /></div>
      </div>
      <div data-puzzle-piece="" data-to="y:100% ease:power4.inOut" className="eye-open__half eye-open__half--bottom">
        <div data-puzzle-piece="" data-to="y:-20% ease:power4.inOut" aria-hidden="true" className="eye-open__logo-box"><img src="/logo.svg" alt="" /></div>
      </div>
    </div>
  </section>
  <section className="eye-open__next uk-section pt-0">...</section>
</div>