16.11.13, 11:16
0 комментарий
  Уроки / Скрипты

Резиновый слайдер с эффектом параллакса

Слайдеры заполонили сайты, это и не удивительно, ведь в него можно вставить множество информации, которая вращая будет привлекать пользователя. Но простой слайдер это слишком банально, и их так много, что придумать что-то новое уже становиться сложновато. Параллакс это весьма интересный эффект, с каждым днем ресурсов с данным эффектом становится все больше, ведь он позволяет создать эффект объемности. В данном уроке мы совместим эти два элемента, и создадим замечательный резиновый слайдер с эффектом параллакса.

Главный плюс данного ротатора, что при изменении размера браузера происходит масштабирование слайдера с правильными пропорциями. Это весьма удобно, ведь разрешения монитора у каждого разное плюс это положительно сказывается на дизайне сайта. И так, для начала мы рассмотрим разметку HTML. Нам необходимо связывать элементы ввода с элементами div, для которых задан класс sp-content,с помощью комбинатора соседних элементов. Поэтому элементы ввода будут располагаться на том же уровне в структуре DOM, что и элементы div с классом sp-content.



Когда на элементе ввода нажмете клавишу мыши, для фона происходит смена цвета и положения, а также меняется положение фона для элемента div sp-parallax-bg. При имении параметров используются трансформации.

Напишите своё мнение