На некоторых сайтах-одностраничниках можно увидеть эффект связанный с прокруткой мыши. Так, если пользователь двигает колесико вниз, то весь экран сайта смещается на всю его высоту вниз к следующему экрану. А если вверх, то в обратную сторону.
Если сложно понять о чем идет речь, то посмотрите пример эффекта.
Данное смещение можно реализовать смесью Java Script и jQuery. Код я нашел на каком-то форуме и значительно улучшил, заключив его в функцию. Скачав исходники, вы увидите такую html структуру:
<div class="screen screen1">1</div>
...
<div class="screen screen5">5</div>
Если вы захотите сделать фиксированный экран, то просто добавьте div с классом screen и вторым пронумерованным классом screenN, где N - номер экрана. Количество таких экранов можно сделать бесконечно большим.
Если высота содержимого внутри div-а будет больше высоты экрана, то прокрутка пролистает мимо то, что не влезло по высоте. Поэтому данный скрипт лучше использовать для декоративных страниц с небольшим содержимым. Это в частности относится и к мобильной версии, если она будет предусмотрена. Но в ней я бы отключил данный скрипт, например, за счет devise.js.
Еще одной особенностью кода является возможность расчета на лету высоты экрана, если мы изменим размеры браузера. Минусом скрипта я бы отметил неизбежную блокировку колесика мыши и если мы где-то на середине экрана нажмем обновление страницы, то при последующей прокрутки вверх произойдет возврат к самому первому экрану.
Добавить комментарий