Дана техніка базується на управлінні швидкістю переміщення фонового зображення. Створимо розмітку HTML, що містить дві секції з атрибутами "data-type" і "data-speed". Призначення атрибутів розкриється трохи пізніше:
Теги
Відповідно до специфікації будь атрибути, що починаються на data- будуть оброблятися як сховище приватних даних. Додатково, вони не впливають на шаблон.
Так як нам потрібно управляти швидкістю прокручування фонових зображень, то для ключових параметрів ми будемо використовувати data-type = "background" і data-speed = "10".
Потім додамо тег
Перш, ніж перейти до магії jQuery додамо фонові зображення для кожного елемента
І визначимо стилі для інших елементів нашої демонстраційної сторінки.
магічний код
Використовуємо jQuery. Почнемо зі стандартного методу document.ready (). щоб бути в упевненості про завантаження сторінки і її готовності до маніпуляцій.
Тепер потрібна увага. Перше, що тут відбувається - ітерація по всіх елементах
У функцію .each () додамо іншу функцію .scroll (). яка викликається в момент початку прокрутки.
Потрібно визначити на скільки користувач прокрутив сторінку, і потім розділити отримане значення на величину, яка визначається в атрибуті data-speed.
$ Window.scrollTop () - отримуємо поточне значення прокрутки зверху. $ Bgobj.data ( 'speed') посилається на атрибут data-speed в розмітці. yPos - остаточне значення, яке використовується для прокрутки. Однак, використовується від'ємне значення, так як фон зміщується в зворотному напрямку по відношенню до прокручування користувача.
У нашому прикладі атрибут data-speed має значення 10. Припустимо, що вікно браузера прокручується на 57px. Це означає, що 57px ділиться на 10 = 5.7px.
Тепер треба зібрати всі дані в одне значення. Щоб зберегти горизонтальне положення фону статичним, ми використовуємо значення 50% для його властивості xPosition. Потім додаємо yPos як значення властивості yPosition. а потім присвоюємо координати фону
В остаточному вигляді код буде виглядати так:
Фіксатор для IE
Залишається один момент: старі версії IE не можуть вивести теги
Додатково ми використовуємо файл скидання CSS. щоб всі браузери виводили сторінку однаково.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!