הצצה לאתר רקעים לברכות + טריק CSS: מה קורה כשמתחילים אנימציה לפני הזמן?

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

למה שאבנה אתר רקעים לברכות בכלל?

למה? כי יש לי את היכולת לעשות את זה (אני מעצב בנשמה ואוהב לתכנת לכיף שלי) וגם אני אוהב לשמח ולרגש אנשים. אז למה לא בעצם?!

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

רקע לברכה שאפשר לעשות לבד
רקע לברכה שאפשר לעשות לבד

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

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

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

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

(למפתחים מביניכם, זה הקוד שרץ ברקע):

.swiper-slide {
    &:before {
        background: none;
        content: "";
        width: 4em;
        height: 4em;
        display: inline-block;
        border-radius: 4em;
        top: 50%;
        position: absolute;
        left: 50%;
        transform-origin: center;
        margin: -2em;
        border: 0.2em solid $yellow;
        border-top-color: transparent;
        border-left-color: transparent;
        opacity: 1;
        animation: homeSliderSpinner 600ms infinite linear;
    }
    @keyframes homeSliderSpinner {
        0% {
            transform: translateY(0em) rotate(360deg) scale(1);
        }
        100% {
            transform: translateY(0em) rotate(0deg) scale(1);
        }
    }
}

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

אז מה עשיתי?

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

כלומר, הספינר הראשון יתחיל להסתובב מיד, השני יתחיל 400ms אחריו, השלישי יתחיל 800ms אחרי הראשון, הרביעי 1200ms וכן הלאה.

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

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

הספינרים מתחילים לפעול אחד אחרי השני וזה נראה מוזר
הספינרים מתחילים לפעול אחד אחרי השני וזה נראה מוזר

(זה הקוד שרץ):

.swiper-slide {
    &:before {
        background: none;
        content: "";
        width: 4em;
        height: 4em;
        display: inline-block;
        border-radius: 4em;
        top: 50%;
        position: absolute;
        left: 50%;
        transform-origin: center;
        margin: -2em;
        border: 0.2em solid $yellow;
        border-top-color: transparent;
        border-left-color: transparent;
        opacity: 1;
        animation: homeSliderSpinner 600ms infinite linear;
    }
    @keyframes homeSliderSpinner {
        0% {
            transform: translateY(0em) rotate(360deg) scale(1);
        }
        100% {
            transform: translateY(0em) rotate(0deg) scale(1);
        }
    }
    $initial_wait: 0ms;
    $delay_between_each: 400ms;
    @for $i from 0 through 40 {
        &:nth-child(#{$i}) {
            &:before {
                animation-delay: $initial_wait + $delay_between_each * $i;
            }
        }
    }
}

אז חשבתי לעצמי… המממ….. מה אפשר לעשות עם זה?

אז ניסיתי משהו. ניחוש פרוע.

במקום 400ms, הקלדתי תוספת של מינוס, לפני המספר: -400ms. כלומר, מינוס הדיליי.

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

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

אני חושב שזה טריק ממש מגניב, במיוחד לחובבי ה־CSS מביניכם.


להראות לכם איך דף הבית יצא בסוף? בכיף! הוא מופיע באתר הברכות ואתם מוזמנים:

בואו להכין ברכה מעוצבת בכמה קליקים

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

(אם אין לכם, אבל אתם סתם רוצים לראות דברים יפים, גם אפשר).

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

דברים מגניבים, דברים שאני כותב, קוד ופיתוח אתרים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסט בהפתעה?