Плавная прокрутка между экранами jQuery

Плавная прокрутка между экранами jQuery

538

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

Если сложно понять о чем идет речь, то посмотрите пример эффекта.

Данное смещение можно реализовать смесью Java Script и jQuery. Код я нашел на каком-то форуме и значительно улучшил, заключив его в функцию. Скачав исходники, вы увидите такую html структуру:

<div class="screen screen1">1</div>
...
<div class="screen screen5">5</div>

Если вы захотите сделать фиксированный экран, то просто добавьте div с классом screen и вторым пронумерованным классом screenN, где N - номер экрана. Количество таких экранов можно сделать бесконечно большим.

Если высота содержимого внутри div-а будет больше высоты экрана, то прокрутка пролистает мимо то, что не влезло по высоте. Поэтому данный скрипт лучше использовать для декоративных страниц с небольшим содержимым. Это в частности относится и к мобильной версии, если она будет предусмотрена. Но в ней я бы отключил данный скрипт, например, за счет devise.js.

Еще одной особенностью кода является возможность расчета на лету высоты экрана, если мы изменим размеры браузера. Минусом скрипта я бы отметил неизбежную блокировку колесика мыши и если мы где-то на середине экрана нажмем обновление страницы, то при последующей прокрутки вверх произойдет возврат к самому первому экрану.

 

| | Плавная прокрутка между экранами jQuery | На некоторых сайтах-одностраничниках можно увидеть эффект связанный с прокруткой мыши. Так, если пользователь двигает колесико вниз, то весь экран сай | http://blogprogram.ru/wp-content/uploads/2016/12/538-131x131.jpg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>