ראשימדינותהטיולים שליטיולים ותרמילאותאודות
YosefusFlavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
אינסטגרם

©2026 Yosefus Flavius WebDeveloper

יצירת מצביע (Cursor) מותאם אישית עם SVG ואנימציה – בצורה חכמה
  1. בית
  2. /
  3. פיתוח Full Stack

יצירת מצביע (Cursor) מותאם אישית עם SVG ואנימציה – בצורה חכמה

14 באוגוסט 2024•1 דקות קריאה

רוצים לייצר חוויית משתמש ייחודית? גיא משתף איך לבנות מצביע (cursor) מותאם אישית בעזרת SVG פשוט, כולל הוספת אנימציה, והכי חשוב – איך לשמור על UX חכם ולא להפוך את האתר לקרנבל ויזואלי.

יצירת cursor (מצביען?!) מותאם אישית קוים לדמותו. * הזהרה מראש - יש להשתמש בכוח עצום זה שאני מעניק לכם בתבונה ולא להעמיס על המשתמש מבחינה ויזואלית, בסוף בדרך כלל אנחנו מנסים להניע את המשתמש לפעולה, ולא להרגיז אותו. 😌 🤐 בשיטוט אגבי מצאתי שיש דרך קלילה לייצר cursor משלנו בעזרת קובץ svg פשוט, והקוד לדוגמא הוא: cursor: url("cursor.svg") 32 32 , auto; 🤗 ומה אם נרצה להוסיף איזה אנימציה קטנה? ניתן להוסיף לsvg עצמו אנימציה בסגנון הזה: <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite" /> כמוכן ניתן להעלים לגמריי את הcursor וליצור מאפס ממש בעזרת js דברים יותר מתוחכמים. כמו שכתבתי בעבר חשוב מאוד להשתמש באנימציות, תלת מימד, ואפקטים מיוחדים בתבונה. לכולנו יש נטיה קלה להשתמש בכל מה שאנחנו יודעים. אבל תחשבו על פרה עם רעמה, זימים, חדק, וקרן מהמצח וזנב של שועל. יופי! ככה בדיוק יראה האתר שלכם.

לינקדאין

שתף את המאמר

שתפו:
Yosefus Flavius

נכתב על ידי

Yosefus Flavius

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

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

כתבות דומות

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
פיתוח Full Stack/פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

בפוסט הזה נלמד על שימוש ב־mix-blend-mode ב־CSS, טכניקת עיצוב מגניבה שמאפשרת לשלב את התוכן של האלמנט עם הרקע והאב בצורה מרהיבה ומיוחדת.

27 באפריל 2025
איך להוסיף גלילה חלקה ב-CSS
פיתוח Full Stack/פרונט אנד

איך להוסיף גלילה חלקה ב-CSS

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

27 באפריל 2025
האם כדאי להשתמש בספריות UI ב-React? מלחמת בני אור בבני חושך 2.0
פיתוח Full Stack/פרונט אנד

האם כדאי להשתמש בספריות UI ב-React? מלחמת בני אור בבני חושך 2.0

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

27 באפריל 2025