
יצירת מצביע (Cursor) מותאם אישית עם SVG ואנימציה – בצורה חכמה
יצירת 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
כותב הבלוג