שאלה באנגולר - הוזזת אלמנט במסלול מוגדר

שלוות נפש · 16/6/22

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

נחמד לעזור · 16/6/22

אתם רוצים ליצור אנימציה פשוטה על טקסט?

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

תכתבו בגוגל (באנגלית כמובן) את סוג האנימציה שאתם רוצים + CSS ותקבלו דוגמאות קוד לרוב.
אתם יכולים לנסות לכתוב גם כאן בצורה מפורטת יותר את האנימציה אותה אתם צריכים.

שלוות נפש · 21/6/22

נכתב ע"י נחמד לעזור:
אתם רוצים ליצור אנימציה פשוטה על טקסט?

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

תכתבו בגוגל (באנגלית כמובן) את סוג האנימציה שאתם רוצים + CSS ותקבלו דוגמאות קוד לרוב.
אתם יכולים לנסות לכתוב גם כאן בצורה מפורטת יותר את האנימציה אותה אתם צריכים.

ניסיתי לחפש ולא מצאתי משהו (אולי כי אני לא כל כך יודעת להגדיר את סוג האינמציה..)
האינמציה שאני רוצה:
יש לי מילה שנמצאת בגובה מסוים ואני רוצה שטיפול מהגובה הזה לתחתית העמוד או הפוך נמצאת בתחתית העמוד ומטפסת למיקום מסוים שאני יגדיר לה
ואני רוצה שיראו תמסלול לא שתקפוץ מנקודה אחת לאחרת
אשמח אם מישהו יוכל להגדיר לי איך זה נקרא? או לתת קישור
ממש יעזור
תודה רבה!!

נטורל · 21/6/22

נכתב ע"י שלוות נפש:
ניסיתי לחפש ולא מצאתי משהו (אולי כי אני לא כל כך יודעת להגדיר את סוג האינמציה..)
האינמציה שאני רוצה:
יש לי מילה שנמצאת בגובה מסוים ואני רוצה שטיפול מהגובה הזה לתחתית העמוד או הפוך נמצאת בתחתית העמוד ומטפסת למיקום מסוים שאני יגדיר לה
ואני רוצה שיראו תמסלול לא שתקפוץ מנקודה אחת לאחרת
אשמח אם מישהו יוכל להגדיר לי איך זה נקרא? או לתת קישור
ממש יעזור
תודה רבה!!

תראו את הדוגמה הזאת

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

תנסו להבין את הקוד, זה קל.

נחמד לעזור · 21/6/22

HTML:

<html>
<div class="object">
 טקסט לדוגמא
</div>
    
    <style>
    .object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}
    </style>
</html>

שלוות נפש · 21/6/22

נכתב ע"י נחמד לעזור:

HTML:

<html>
<div class="object">
 טקסט לדוגמא
</div>
   
    <style>
    .object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}
    </style>
</html>

וואי תודה
בדיוק מה שאני צריכה

רק כמה שאלות על הקוד:
1. כל מה שבתוך התגית STYLE אני יכולה לרשום ב CSS? ( מה מומלץ??)
2. ואיפה ההגדרה של נקודת ההתחלה והסיום
ואני גם רוצה שיפסיק - יגיע לנקודת הסיום ויעצור

רוב · 21/6/22

נכתב ע"י שלוות נפש:
וואי תודה
בדיוק מה שאני צריכה
רק כמה שאלות על הקוד:
1. כל מה שבתוך התגית STYLE אני יכולה לרשום ב CSS? ( מה מומלץ??)
2. ואיפה ההגדרה של נקודת ההתחלה והסיום
ואני גם רוצה שיפסיק - יגיע לנקודת הסיום ויעצור

בתגית ה style זה ה CSS, אפשר לכתוב אותו בקובץ נפרד
נקודת ההתחלה בקוד הנ"ל היא 0 על ציר ה- Y

נכתב ע"י נחמד לעזור:
0%, 100% { transform: translateY(0); }

בקוד הספציפי הזה האלמנט ירד למטה ויעלה חזרה למעלה.
כדי להפעיל אנימציה חד צדדית:

CSS:

@keyframes MoveUpDown {
 0% {
transform: translateY(0);
}
100% {
transform: translateY(-1000px);
}

שלוות נפש · 21/6/22

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

רוב · 21/6/22

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

אפשר להוסיף את המאפיין animation-delay לעיצוב של האובייקט.
בשביל כמה אלמנטים משתמשים ב nth-child ולכל אחד נותנים את ה delay המתאים.

שלוות נפש · 22/6/22

נכתב ע"י רוב:
אפשר להוסיף את המאפיין animation-delay לעיצוב של האובייקט.
בשביל כמה אלמנטים משתמשים ב nth-child ולכל אחד נותנים את ה delay המתאים.

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

רוב · 22/6/22

נכתב ע"י שלוות נפש:
אין אפשרות לעשות את זה במשהו כמו FOR ?
יש לי מערך של מילים וכל מילה אמורה להיות מוצגת עם הבדלים של כמה סנטימטרים מהמילה הקודמת
חבל לי לעשות על כל איבר עיצוב בנפרד
יש דרך ב CSS שהמיקום יהיה i שגדל - שיהיה קשר נגיד בין ה i במערך שמתקדם לבין המיקום?
מקווה שהייתי מובנת..
תודה רבה

ב CSS זה בלתי אפשרי, ב SCSS כן.
אפשר ב- TS או עם Jquery.

שלוות נפש · 22/6/22

נכתב ע"י רוב:
ב CSS זה בלתי אפשרי, ב SCSS כן.
אפשר ב- TS או עם Jquery.

איך ב SCSS?

רוב · 22/6/22

נכתב ע"י שלוות נפש:
איך ב SCSS?

Is there a way to use the "n" value in :nth-child(n)?

I want to create a fold effect. Fiddle There are 4 blue cards, so I created 4 classes to set the location. I want to make it smarter, in case there would be more than 4 cards. In CSS, I tried this....

stackoverflow.com

לא התעמקתי. רק מלמעלה, בתקווה שזה באמת מתאים

שלוות נפש · 22/6/22

נכתב ע"י רוב:
Is there a way to use the "n" value in :nth-child(n)?

I want to create a fold effect. Fiddle There are 4 blue cards, so I created 4 classes to set the location. I want to make it smarter, in case there would be more than 4 cards. In CSS, I tried this....

stackoverflow.com

לא התעמקתי. רק מלמעלה, בתקווה שזה באמת מתאים