Пркатика по jQuery

Заготовка HTML-кода.

Меню

Потрібно анімувати розповзаюче меню.

При кліку на span повинно відкритися чи сховатися меню другого рівня (плавно, з анімацією).

Під час розробки віджетів завжди беріть до уваги, що на сторінці може бути декілька подібних елементів. Всі вони повинні працювати незалежно один від одного.

Акордеон

Потрібно створити елемент інтерфейса "акордеон".

Особливістю елемента "акордеон" є те, що завжди повинен відображатися тільки один блок. При відкритті наступного блока попередній повинен сховатися.

Таби

Особливість віджета - кожен таб має id, а корінці табів - це посилання на ці id.

Домашнє завдання:

При загрузці сторінки перевіряємо хеш URI, якщо він порожній - робимо перший таб активним, якщо не порожній і є таб з таким id - то робимо його активним.

history.pushState(null, null, '/anypath');

Кнопка прокрутки вгору

  1. Добавте на сторінку кнопку зі стрілкою вгору, стилями зафіксуйте її в нижній правій частині екрану (можете скористатися класом .to-top, прописаним в стилях).
  2. При кліку на кнопку сторінка повинна прокрутитися на початок.
  3. Кнопка повинна створюватися динамічно: перенесіть HTML-код кнопки у скрипт.
  4. Добавте умову: створюйте кнопку тільки в тому випадку, якщо у body є клас scrolltop.
  5. По замовчуванню кнопка повинна бути схована. При прокрутці сторінки більше, ніж на 1 екран повинна плавно з'явитися. При прокрутці вгору - зникати.

Рекомендації

Для роботою з прокруткою елементів/сторінки є два метода:

.scrollTop();
.scrollLeft();

Якщо аргумент не задати - значення поточної прокрутки буде зчитано. Якщо в якості аргумента задати число - елемент чи сторінка прокрутиться до тієї позиції, якщо це можливо:

alert($(window).scrollTop());
$('.box').scrollLeft(42);

Прокрутка відбувається моментально. Для плавної прокрутки можна використати функцію анімації:

$(window).animate({scrollTop: 0},500);

В деяких випадках .scrollTop(top) не застосовується до об'єкта window, перевірте у всіх браузерах. В такому випадку прокручуйте теги html та body:

$('html, body').scrollTop(400);

Рухливий фон

  1. Зробіть сторінку-мотиватор: має займати однин екран (не повинно бути полос прокруток), по центру - крупний напис з 1-3 слів, під ним - речення-пояснення, слоган.
  2. Добавте фонове зображення. При рухах миші фон повинен рухатися з невеликою швидкістю у протилежну сторону.
  3. Зробіть маленького котика, який наздоганяє курсор мишки.
  4. Зробіть очі, що слідкують за курсором.

Паралакс

Паралакс - це рух різних шарів з різною швидкістю.

  1. Зробіть веб-сторінку з декількома секціями (лендінг).
  2. При прокрутці сторінки фон повинен прокручуватися повільно.
  3. Зробіть декілька окремих слів, які б вертикально рухалися з різною швидкістю при прокрутці сторінки.
  4. Зробіть декілька окремих слів, які б прилітали з-за меж екрану справа та зліва як тільки користувач докрутить до них.
  5. Зробіть зображення, яке б "повзло" по нижньому краю екрана зліва направо по мірі прокрутки сторінки.