ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

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

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

יצירת מצביע (Cursor) מותאם אישית עם SVG ואנימציה – בצורה חכמה  - מדריך מקיף עם טיפים ומידע שימושי

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

  1. בית
  2. >
  3. Full Stack
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 דברים יותר מתוחכמים. כמו שכתבתי בעבר חשוב מאוד להשתמש באנימציות, תלת מימד, ואפקטים מיוחדים בתבונה. לכולנו יש נטיה קלה להשתמש בכל מה שאנחנו יודעים. אבל תחשבו על פרה עם רעמה, זימים, חדק, וקרן מהמצח וזנב של שועל. יופי! ככה בדיוק יראה האתר שלכם.

לינקדאין
linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

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

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

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

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

@apply ב־Tailwind מאפשר לאחד מספר קלאסים לקלאס אחד, אבל יש לזה יתרונות וחסרונות. למדו איך להשתמש בזה בצורה חכמה ומתי כדאי להימנע.

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

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