ממשק דינמי באתר שלך ימשוך את תשומת לב המשתמשים ויגדיל את התנועה. הכנת כותרת מונפשת לאתר אינה קשה כמו שזה נראה במבט ראשון.
הוראות
שלב 1
בואו ננסה ליצור כותרת מונפשת, שתשנה את תצורתה כאשר סמן העכבר מרחף מעליה. לדוגמה, תמונה בשחור-לבן בכותרת הומרה לצבע עם אינטראקציה או שונתה לתמונה אחרת.
שלב 2
התקן את ספריית jQuery במחשב שלך לאחר הורדתה מהאתר הרשמי (jquery.com).
שלב 3
קשר את הספרייה לקובץ ה- HTML שלך בין תגי הראש באמצעות תג הסקריפט:
שלב 4
בחר שתי תמונות שיחליפו זו את זו כאשר המשתמש יקיים אינטראקציה עם הכותרת. אם ברצונך לעבור מעבר משחור לבן לצבע, צור עותק של התמונה והרטב אותה בפוטושופ.
שלב 5
צור רשימה של שני פריטים במסמך ה- html והצרף תמונות לכל אחד באמצעות תג התמונה. החל רשימת סגנונות על הרשימה עצמה, למשל
שלב 6
בצע זאת בחלוקה האחראית לכותרת האתר שלך. ראשית, ציין את כתובת התמונה שצריכה לבוא לידי ביטוי במצב סטטי, ואז את הכתובת המופיעה ברחף.
שלב 7
הוסף class = "pervaya" לתמונה הראשונה, ו- class: "vtoraya" לתמונה השנייה.
שלב 8
בקובץ css המצורף, ציין מיקום מוחלט של אלמנטים (מיקום: מוחלט;), גובה ורוחב קבועים (גובה ורוחב) עבור מחלקות אלה.
שלב 9
שכב את התמונות זו על גבי זו. השתמש בסגנון z-index לשם כך. זה מאפשר לך ליישר אלמנטים לאורך ציר ה- z, שמתרחק מאיתנו בעומק המסך.
שלב 10
ברשימה עצמה, ציין את הכניסה, את היישור הדרוש לך והסר את פריטי הרשימה (סוג-רשימה רשימה: אין;).
שלב 11
צור קובץ.js והדבק בו את הקוד הבא:
$ (document).ready (function () {
$ ("img.grey"). רחף (פונקציה () {
$ (this).stop (). אנימציה ({"opacity": "0"}, "איטי");
}, פונקציה () {
$ (this).stop (). אנימציה ({"אטימות": "1"}, "איטית");
});
});
שלב 12
קוד זה ינפיש את הכותרת שלך לפעולה. אל תשכח לחבר את קובץ ה-.js למסמך ה- HTML.
