קורס Front End למתכנתים שיעור אנימציות ב CSS ו JavaScript

דיונים מקורסים
#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/css-javascript-animations
#2

היי, אין לי מושג מאיפה הוספת את הלינק.
איך השגת את הלינק הזה איפה הוא מופיע?
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

#3

הי,

אפשר לחפש כאן כל ספריית JavsScript ולקבל כזה לינק אליה:

#5

אוקיי עכשיו יותר מובן אבל איך יודעים בדיוק איזה גירסה את מתאימה לצורך שלי?
אם אני משתמש בגירסה 3.7.2 כמו שהצגת אז הקישור עובד
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
אבל אם אני משתמש בגירסה יותר מתקדמת לדוגמא 4.1.1 האנימציה לא תגיב
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

#6

הי סליחה פספתי את ההודעה

לגבי הגירסאות - המספר השמאלי ביותר נקרא Major Version. במקרה שלנו אני השתמשתי בגירסה 3 ואתה ניסית את גירסה 4. הרבה פעמים שינוי ב Major Version מגיע עם שינוי API כלומר יכול להיות שפקודות מסוימות שעבדו ב-3 יפסיקו לעבוד ב-4 או שישנו קצת את שם הפקודה או הפרמטרים שלה.

למשל בדוגמה של animate.css הם שינו את שם הקלאס במעבר מגירסה 3 ל-4 ובגירסה 4 כל הקלאסים מתחילים במילה animate ואחריה פעמיים קו תחתי ואז שם הקלאס לדוגמה:

<h1 class="animate__animated animate__bounce">An animated element</h1>

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

#7

היי ינון,

אני עובד על התרגיל “ריבוע האדום” ו- משימת הבונוס שימוש בספרית velocity . עכשיו אני מנסה לגרום לריבועים (כרגע רק 3 ריבועים) לנוע באופן קבוע על המסך באמצעות פונקציית seInterval .
מצרף קוד:

const width = document.body.clientWidth-100;

const height = document.body.clientHeight-100;

function motionOfBox(boxes){

   

 let x,y;

 

 for(box of boxes){

   

    x =  Math.floor(Math.random()*width);

    y = Math.floor(Math.random()*height);

    // Velocity(box,'jello',{duration: 1500, easing: "spring" });

    Velocity(box,{left:x,top:y},{duration:4000});

 }

}

setInterval(motionOfBox(boxes),500);

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

#8

הי @avraam_b

הבעיה בשורה:

setInterval(motionOfBox(boxes),500);

הפונקציה setInterval צריכה לקבל פונקציה בתור פרמטר ראשון. יכול לראות מה הדבר שאתה העברת בתור פרמטר ראשון? יש לך רעיון איך להעביר פונקציה במקומו?

#10

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

#11

הי יינון,

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

לייק 1
#12

הי

הרצתי עכשיו אצלי והכל עבד. יכול להדביק את הקוד html שכתוב אצלך ב demo2.html ?

#13

ינון בוקר טוב
בהמשך לבקשתך במייל רצ" לינק לקובץ ה HTML
http://www.seenet.co.il/files_updates/demo2.html
גל

#14

אני רואה שעברת לגירסה חדשה יותר של animate.css בקוד שלך. דפדף פה למעלה להודעה מספר 3 שם התיחסתי לנושא הגירסאות וגם פירסמתי גירסה של הקוד שמתאימה ל animate.css גירסה 4