یک رابط پویا در سایت شما توجه کاربران را به خود جلب کرده و میزان بازدید را افزایش می دهد. ساخت یک هدر متحرک برای یک وب سایت به همان سختی که در نگاه اول به نظر می رسد نیست.
دستورالعمل ها
مرحله 1
بیایید سعی کنیم یک هدر متحرک ایجاد کنیم ، که هنگامی که نشانگر ماوس بر روی آن قرار می گیرد ، پیکربندی آن تغییر می کند. به عنوان مثال ، یک عکس سیاه و سفید در یک سرصفحه در اثر تعامل به رنگ تبدیل شده یا به دیگری تغییر می یابد.
گام 2
کتابخانه jQuery را پس از بارگیری از وب سایت رسمی (jquery.com) ، در رایانه خود نصب کنید.
مرحله 3
با استفاده از برچسب اسکریپت کتابخانه را به فایل html خود بین برچسب های head پیوند دهید:
مرحله 4
دو عکس را انتخاب کنید که هنگام تعامل کاربر با هدر جایگزین یکدیگر شوند. اگر می خواهید از سیاه و سفید به رنگ انتقال پیدا کنید ، پس یک کپی از تصویر ایجاد کنید و آن را در فتوشاپ اشباع کنید.
مرحله 5
لیستی از دو مورد را در html-document ایجاد کنید و با استفاده از برچسب تصویر ، تصاویر را به هر کدام ضمیمه کنید. به عنوان مثال یک کلاس سبک را در لیست خود اعمال کنید
مرحله 6
این کار را در div انجام دهید که مسئول عنوان سایت شما است. ابتدا آدرس تصویری را که باید در حالت ایستایی منعکس شود مشخص کنید و سپس تصویری که در حالت شناور نشان داده می شود را مشخص کنید.
مرحله 7
کلاس = "pervaya" را به تصویر اول و کلاس: "vtoraya" را به تصویر دوم اضافه کنید.
مرحله 8
در فایل css پیوست ، موقعیت مطلق عناصر (موقعیت: مطلق ؛) ، ارتفاع و عرض ثابت (ارتفاع و عرض) را برای این کلاسها مشخص کنید.
مرحله 9
تصاویر را روی هم لایه بندی کنید. برای این کار از سبک z-index استفاده کنید. این امکان را به شما می دهد تا عناصر را در امتداد محور z تنظیم کنید ، که در عمق صفحه از ما دور می شود.
مرحله 10
برای خود لیست ، تورفتگی ، تراز بندی مورد نیاز خود را مشخص کرده و موارد لیست را حذف کنید (نوع سبک-نوع: هیچ؛).
مرحله 11
یک فایل.js ایجاد کنید و کد زیر را در آن جایگذاری کنید:
$ (سند). آماده (تابع () {
$ ("img.grey"). شناور (تابع () {
$ (this).stop (). animate ({"opacity": "0"}، "slow")؛
}, تابع () {
$ (this).stop (). animate ({"opacity": "1"}، "slow")؛
});
});
مرحله 12
این کد هدر شما را به مرحله عمل تحریک می کند. فراموش نکنید که فایل.js را به سند html متصل کنید.
