תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

אנימציות מדליקות באמצעות CSS3 - חלק ג

מחבר:
בתאריך:

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

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

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

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

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

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

     

    ה-html

    ההטמ"ל כולל אלמנט div וכפתור:

    <div class="elem"> </div>	
    <button class="btn">לחץ לפתיחה</button>

     

    קידוד התנועה של האלמנט אל תוך הדף

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

    CSS
    ----

    @keyframes magnificent_popup {
         from{left:-288px;}
         to  {left:0px;}
    }
    
    .elem {
        display:none;
        position:fixed;
        width:288px;
        height:560px;
        z-index:101;
        top: 92px;
        left:-288px;
        overflow:visible;
        animation-name: magnificent_popup;
        animation-duration: 0.8s;
        animation-timing-function: ease-in;
    }
    .elem.active {
        display:block;
        left:0;
    }

    האלמנט שאורכו 288 פיקסלים, מתחיל ממצב של העדר הצגה (כלל elem), כשהוא מוסתר בצידו של הדף על ידי ערך שלילי של left, ואנחנו מפעילים עליו את האנימציה magnificent_popup שגורמת לו להחליק מצידו השמאלי של הדף, עד שהוא מוצג במלוא אורכו (כלל elem.active).

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

    JS
    ----

    var elem = $(".elem");
    var btn   = $(".btn");
    
     function drag(elem){
            var r = parseInt(elem.css('left'));
    
            if(r < 0){
                elem.addClass('active');
            } else {
                 elem.removeClass('active');
            }
    };
    
    btn.on("click",function(e){
            e.preventDefault();
            drag(elem);
    });

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

     

    כיצד לבצע תנועה הפוכה ביציאה?

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

    CSS
    ----

    @keyframes magnificent_popup {
         from{left:-288px;}
         to  {left:0px;}
    }
    @keyframes reverse_magnificent_popup {
         from{left:0;}
         to  {left:-288px;}
    }
    
    .elem {
        display:none;
        position:fixed;
        width:288px;
        height:560px;
        z-index:101;
         top: 92px;
        left:-288px;
        overflow:visible;
        
        animation-name: magnificent_popup;
        animation-duration: 0.8s;
        animation-timing-function: ease-in;
    }
    .elem.active {
        display:block;
        left:0;
    }
    .elem.active-out{
        animation-name: reverse_magnificent_popup;
        animation-duration: 0.8s;
        animation-timing-function: ease-out;
    }

     

    JS
    ----

    (function($){
        var elem = $(".elem");
        var btn    = $(".btn");
    
        var drag = function(elem){
            var r = parseInt(elem.css('left'));
    
            if(r < 0){
                elem.addClass('active');
            } else {
                elem.addClass('active-out');
               btn.text("לחץ לסגירה");
                window.setTimeout(function(){
            	    elem.removeClass('active-out');
            	    elem.removeClass('active');
                    btn.text("לחץ לסגירה");
            	}, 800)
            }
        };
    
        btn.on("click", function(e){
            e.preventDefault();
            drag(elem);
        });
    }(jQuery));

    חשוב שמשך התנועה יהיה מתואם בין האנימציה בקוד ה-css ובין קוד ה-javascript. בקוד שלנו, משך התנועה הוא 800 מילי-שניות.

    למדריכים נוספים בסדרת ה-CSS3

     

    אהבתם? לא אהבתם? דרגו!

    0 הצבעות, ממוצע 0 מתוך 5 כוכבים

     

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?