Плавная прокрутка страницы вверх на jQuery. Плавная прокрутка страницы вверх на jQuery Как это работает

Ты, конечно, встречал на страницах с большим количеством текста в самом низу ссылку «наверх». Или взять, допустим, содержание (при условии, что весь документ находится на одной длиннющей странице). Смысл примерно одинаков. Нажимаем на ссылку и попадаем в какое-то конкретное место документа. Фактически, программным образом перематываем скролл.

Реализовать такое с помощью якоря — пара пустяков. А что если я хочу не мгновенно попасть в нужную точку, а именно «перемотать» скролл?

Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 10
  • Safari 4
  • Chrome
Задача

Реализовать программную перемотку скролла.

Решение

Будем использовать специально для этого разработанный плагин jQuery.ScrollTo. Он умеет очень многое. Например, может перематывать как главный скролл окна, так и скролл какого-нибудь . Может перематывать в определенную позицию (в пикселях или процентах) или к какому нибудь конкретному элементу (заданному, например, по ). Все это уже создано, наша задача научится этим пользоваться.

Что качать?
  • библиотеку jquery качаем или .
  • (2.26 Kb) собственно плагин.
Быстрый старт

Подключаем библиотеки:

Прописываем в HTML кому-нибудь id — будем перематывать окно до этого элемента:

Важный заголовок

Задаем кнопку управления:

Перемотать на важный заголовок

При клике по кнопке включаем перемотку:

jQuery(document).ready(function(){ jQuery("button").click(function() { jQuery.scrollTo("#target-el"); }); });

А теперь подробнее

Команда jQuery.scrollTo() будет перематывать главный скрорлл. Если нужно перемотать скролл какого-нибудь элемента, используем запись вида jQuery("селектор").scrollTo(), например:

JQuery("div.pane").scrollTo("#target-el");

Прараметры scrollTo()

Ну и как обычно, вся магия — в парметрах:

Название параметра Описание axis duration easing margin offset over queue onAfterFirst onAfter
Ось, которая будет прокручиваться, "x", "y", "xy" или "yx". "xy" — значение по умолчанию
Длительность анимации.
Название уравнения easing.
Если true, целевые границы и margin вычитаются.
Чилсо или хэш {left: x, top:y }. Это значение будет добавлено к окончательной позиции (может быть отрицательным)
Добавить часть высоты/ ширины элемента (также может быть отрицательным).
Если true, и обе оси прокручиваться, то сначала анимируется прокрутка на одной оси, а затем на другой. Порядок задает паравитр axis ("xy" или "yx")
Если queue=true, функция выполнится после прокрутки первой оси.
Функция, которая вызывается после того, как закончится вся анимация.
Подробнее про вызов scrollTo()

При вызове scrollTo() передается три вида параметров — цель, продолжительность, настройки (порядок имеет значение).

  • цель — куда именно перематывать (подробнее см. ниже);
  • продолжительность — параметр duration из таблички выше;
  • настройки — остальные параметры из таблички выше.

В качестве цели можно использовать:

  • Просто число
  • Строку ("44", "100px", "+=30px", и т.д.)
  • Элемент DOM (дочерний для прокручиваемого элемента)
  • Селектор
  • Строка "max" для прокрутки в конец
  • Строка, определяющая процент, чтобы перейти к части контейнера (например: 50% переходит в середину)
  • Хеш { top:x, left:y }, x и y может быть любое число/строка из описанных выше.

Примеры вызова с параметрами.



скроллинг jquery (21)

Я написал функцию общего назначения, которая прокручивает объект jQuery, селектор CSS или числовое значение.

Пример использования:

// scroll to "#target-element": $.scrollTo("#target-element"); // scroll to 80 pixels above first element with class ".invalid": $.scrollTo(".invalid", -80); // scroll a container with id "#my-container" to 300 pixels from its top: $.scrollTo(300, 0, "slow", "#my-container");

Код функции:

/** * Scrolls the container to the target position minus the offset * * @param target - the destination to scroll to, can be a jQuery object * jQuery selector, or numeric position * @param offset - the offset in pixels from the target position, e.g. * pass -80 to scroll to 80 pixels above the target * @param speed - the scroll speed in milliseconds, or one of the * strings "fast" or "slow". default: 500 * @param container - a jQuery object or selector for the container to * be scrolled. default: "html, body" */ jQuery.scrollTo = function (target, offset, speed, container) { if (isNaN(target)) { if (!(target instanceof jQuery)) target = $(target); target = parseInt(target.offset().top); } container = container || "html, body"; if (!(container instanceof jQuery)) container = $(container); speed = speed || 500; offset = offset || 0; container.animate({ scrollTop: target + offset }, speed); };

У меня есть этот элемент input:

Затем у меня есть другие элементы, такие как другие текстовые входы, текстовые поля и т. Д.

Когда пользователь нажимает на этот input с #subject , страница должна прокручиваться до последнего элемента страницы с хорошей анимацией. Это должен быть свиток вниз и не вверх.

Последним пунктом страницы является кнопка submit с #submit:

Анимация не должна быть слишком быстрой и должна быть жидкой.

Я запускаю последнюю версию jQuery. Я предпочитаю не устанавливать какой-либо плагин, а использовать функции jQuery по умолчанию для достижения этого.

Когда пользователь нажимает на этот ввод с #subject, страница должна прокручиваться до последнего элемента страницы с хорошей анимацией. Это должен быть свиток вниз и не вверх.

Последний элемент страницы - кнопка отправки с #submit

$("#subject").click(function() { $("#submit").focus(); $("#subject").focus(); });

Сначала прокрутите вниз до #submit затем #submit курсор на вход, который был нажат, который имитирует прокрутку вниз и работает в большинстве браузеров. Он также не требует jQuery, поскольку он может быть написан в чистом JavaScript.

Может ли этот способ использования функции focus имитировать анимацию лучше, путем цепочки вызовов focus . Я не тестировал эту теорию, но она выглядела бы примерно так:

#F > * { width: 100%; } .. .. .. .. $("#child_N").click(function() { $("#child_N").focus(); $("#child_N+1").focus(); .. $("#child_K").focus(); $("#child_N").focus(); });

jQuery(document).ready(function($) { $("a").bind("click.smoothscroll",function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $("html, body").stop().animate({ "scrollTop": $target.offset().top-40 }, 900, "swing", function () { window.location.hash = target; }); }); });

  • Section 1
  • Section 2
  • Section 3

Анимации:

// slide to top of the page $(".up").click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); // slide page to anchor $(".menutop b").click(function(){ //event.preventDefault(); $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 600); return false; }); // Scroll to class, div $("#button").click(function() { $("html, body").animate({ scrollTop: $("#target-element").offset().top }, 1000); }); // div background animate $(window).scroll(function () { var x = $(this).scrollTop(); // freezze div background $(".banner0").css("background-position", "0px " + x +"px"); // from left to right $(".banner0").css("background-position", x+"px " +"0px"); // from right to left $(".banner0").css("background-position", -x+"px " +"0px"); // from bottom to top $("#skills").css("background-position", "0px " + -x + "px"); // move background from top to bottom $(".skills1").css("background-position", "0% " + parseInt(-x / 1) + "px" + ", 0% " + parseInt(-x / 1) + "px, center top"); // Show hide mtop menu if (x > 100) { $(".menu").addClass("menushow"); $(".menu").fadeIn("slow"); $(".menu").animate({opacity: 0.75}, 500); } else { $(".menu").removeClass("menushow"); $(".menu").animate({opacity: 1}, 500); } }); // progres bar animation simple $(".bar1").each(function(i) { var width = $(this).data("width"); $(this).animate({"width" : width + "%" }, 900, function(){ // Animation complete }); });

Это мой подход, абстрагирующий идентификаторы и href"s, используя универсальный селектор классов

$(function() { // Generic selector to be used anywhere $(".js-scroll-to").click(function(e) { // Get the href dynamically var destination = $(this).attr("href"); // Prevent href=“#” link from changing the URL hash (optional) e.preventDefault(); // Animate scroll to destination $("html, body").animate({ scrollTop: $(destination).offset().top }, 500); }); });

  • Item 1
  • Item 2
  • Item 3

Используя этот простой скрипт

If($(window.location.hash).length > 0){ $("html, body").animate({ scrollTop: $(window.location.hash).offset().top}, 1000); }

Сделал бы в сортировке, что если в URL-адресе обнаружен хэш-тег, scrollTo анимирует его ID. Если не найден хэш-тег, то игнорируйте скрипт.

Var scrollTo = function($parent, $element) { var topDiff = $element.position().top - $parent.position().top; $parent.animate({ scrollTop: topDiff }, 100); };

Если вас мало интересует эффект гладкой прокрутки и просто интересуется прокруткой к определенному элементу, для этого вам не требуется некоторая функция jQuery. У Javascript есть ваше дело:

Итак, все, что вам нужно сделать, это: $("selector").get(0).scrollIntoView();

Get(0) используется, потому что мы хотим получить элемент DOM JavaScript, а не элемент DOM JQuery.

Если вы только обрабатываете прокрутку к элементу ввода, вы можете использовать focus() . Например, если вы хотите прокрутить до первого видимого ввода:

$(":input:visible").first().focus();

Или первый видимый вход в контейнер с классом.error:

$(".error:input:visible").first().focus();

Спасибо Tricia Ball за это!

Легкий способ достижения прокрутки страницы для целевого div id

Var targetOffset = $("#divID").offset().top; $("html, body").animate({scrollTop: targetOffset}, 1000);

$("html, body").animate(...) не для меня на iphone, браузере браузера Chrome Chrome.

Мне нужно было настроить целевой элемент контента на странице.

$ ("# Cotnent"). Анимировать (...)

Вот что я в итоге

If (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) { $("#content").animate({ scrollTop: $("#elementtoScrollToID").offset().top }, "slow"); } else{ $("html, body").animate({ scrollTop: $("#elementtoScrollToID").offset().top }, "slow"); }

Все содержимое тела подключено с помощью #content div

.... ....

Предполагая, что у вас есть кнопка с button id, попробуйте этот пример:

$("#button").click(function() { $().animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); });

Я написал этот легкий плагин, чтобы упростить прокрутку страницы / элемента. Он является гибким, где вы можете пройти в целевом элементе или заданном значении. Возможно, это может стать частью официального официального выпуска jQuery, что вы думаете?

Примеры использования:

$("body").scrollTo("#target"); // Scroll screen to target element $("body").scrollTo(500); // Scroll screen 500 pixels down $("#scrollable").scrollTo(100); // Scroll individual element 100 pixels down

Опции:

scrollTarget : элемент, строка или номер, который указывает желаемую позицию прокрутки.

offsetTop : число, определяющее дополнительный интервал над прокруткой.

duration : Строка или число, определяющее, как долго будет выполняться анимация.

easing : Строка, указывающая, какую функцию ослабления использовать для перехода.

complete : функция для вызова после завершения анимации.

Чтобы показать полный элемент (если это возможно с текущим размером окна):

Var element = $("#some_element"); var elementHeight = element.height(); var windowHeight = $(window).height(); var offset = Math.min(elementHeight, windowHeight) + element.offset().top; $("html, body").animate({ scrollTop: offset }, 500);

В последнее время бешеной популярностью пользуются типы сайтов под названием Landing Page - или "лендинги". Они удобны тем, что пользователь получает всю необходимую информацию на одной странице. Чаще всего это информация о товаре, которая описывает его со всех сторон, дает понять сильные стороны и преимущества и конечно же оформить заказ.

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

$("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; $("html, body" ) .animate ({ scrollTop: destination } , 600 ) ; return false ; } ) ; Альтернативный взгляд

Раньше делали немного по другому - использовали определение браузера - $.browser.safari || $.browser.webkit и в зависимости от условия делали либо $("body").animate() , либо $("html").animate() . С версии 1.9 jQuery - $.browser была удалена и поэтому не сработает. Но можно модифицировать код и получить такой скрипт:

var matched, browser; jQuery.uaMatch = function ( ua ) { ua = ua.toLowerCase () ; var match = /(chrome)[ \/]([\w.]+)/ .exec ( ua ) || /(webkit)[ \/]([\w.]+)/ .exec ( ua ) || /(opera)(?:.*version|)[ \/]([\w.]+)/ .exec ( ua ) || /(msie)[\s?]([\w.]+)/ .exec ( ua ) || /(trident)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ua.indexOf ("compatible" ) < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ; return { browser: match[ 1 ] || "" , version: match[ 2 ] || "0" } ; } ; matched = jQuery.uaMatch ( navigator.userAgent ) ; //IE 11+ fix (Trident) matched.browser = matched.browser == "trident" ? "msie" : matched.browser ; browser = { } ; if ( matched.browser ) { browser[ matched.browser ] = true ; browser.version = matched.version ; } $("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; if (browser.chrome || browser.webkit ) { $("body" ) .animate ({ scrollTop: destination } , 600 ) ; } else { $("html" ) .animate ({ scrollTop: destination } , 600 ) ; } return false ; } ) ;

Вот и все. Всем успехов!

Как всё начиналось

HTML код кнопок:

Вверх

Вниз

CSS стили:

#up
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:20px;
background-color:#000000;
border-radius:30px;
}
#down
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:90px;
background-color:#000000;
border-radius:30px;
}
.pPageScroll
{
color:#FFFFFF;
font:bold 12pt "Comic Sans MS";
text-align:center;
}

В итоге мы имеем два круга с надписями «Вверх» и «Вниз» в левом нижнем углу браузера.

Проблемы начинаются Теперь начинается самое интересное – JavaScript, а точнее jQuery. Как известно, для организации скроллинга выполняются манипуляции над свойствами scrollTop и scrollLeft. В jQuery эти манипуляции осуществляются при помощи методов.scrollTop() и.scrollLeft() соответственно. Нас интересует только.scrollTop.
Первый, самый простой вариант скроллинга выглядел следующим образом:

//Обработка нажатия на кнопку "Вверх"
$("#up").click(function(){
//Необходимо прокрутить в начало страницы
$("body").animate({"scrollTop":0},"slow");
});

//Обработка нажатия на кнопку "Вниз"
$("#down").click(function(){
//Необходимо прокрутить в конец страницы
var height=$("body").height();
$("body").animate({"scrollTop":height},”slow”);
});

Всё, ну очень просто и незатейливо. Но, вот незадача, если в Chrom’е всё было довольно безоблачно и симпатично, в Oper’е тоже довольно сносно (прокрутка вверх осуществлялась мгновенно), то «ВредныйЛис» скролиться отказывался напрочь. Не долго думая, заменив в строчке: $(«body»).animate «body» на «html», я изменил ситуации кардинально: FireFox заработал, Opera перестал рывком прокручивать вверх и стал делать это плавно, но теперь уже Chrome перестал реагировать на манипуляции с кнопками. Из приведённых выше мытарств последовал следующий вариант перевариваемый всеми браузерами: $(«html,body»).animate… Других приемлемых способов осуществлять скроллинг, работающих во всех браузерах найдено не было.

Добавим рюшечек и бантиков С самой простой частью разобрались. Базовый функционал получен, теперь можно придумать, что-нибудь поинтереснее. Первое же, что бросается в глаза, так это скорость скроллинга. При наличии сколь бы то ни было насыщенного контента, использование скроллинга становится настоящим тестом на склонность к эпилепсии. Поэтому, хочется, чтобы скроллинг был более плавным. Решение в лоб, задать определённую константу времени за которое должен осуществляться скроллинг. Очевидный плюс: элементарность решения. Не менее очевидный минус: никак не учитывается объём контента. Разумное решение: вычислять время выполнения скроллинга в зависимости от размера контента. Приступим.
В код обоих кнопок нужно дописать, вычисление текущей позиции. Для этого как раз и используется jQuery() метод.scrollTop().
Здесь, появляются уже известные проблемы: $(«body»).scrollTop() работает только в Chrome, $(«html»).scrollTop() не работает в Chrome. Что, вообще говоря, удивляет, так как получается, что конструкцией $(«body»).animate({«scrollTop»:height},”slow”) в Opera мы можем скролить body, а при получении, свойство scrollTop тега body равно нулю, что, судя из описания element. scrollTop справедливо для элементов, которые скролить нельзя.
Вариант $(«body,html»).scrollTop() по понятным причинам нам не подходит. Ищем альтернативы. Оказывается, текущую позицию можно получить из объектов window и document, так чтобы это устраивало все браузеры. Думаю, следует упомянуть, что использование их для анимации (например вот так: $(document).animate.), ни к чему хорошему не приводит.
Итак, за рабочий вариант выяснения текущей позиции примем: $(document).scrollTop();
Теперь задумаемся над тем, как мы будем вычислять время. Вообще говоря решение тривиальное и известно каждому: время = путь/скорость. Для определения пути, нам как раз и нужна текущая позиция. Также, нужны координаты точки назначения. С кнопкой «Вверх» всё просто, координата точки назначения по вертикальной оси равна нулю, значит, путь равен текущему положению. Для кнопки «Вниз» всё немного сложнее, нам нужно получить «высоту» документа. Уже предвкушаем проблемы, да? Но нет, тут всё оказывается очень просто. Вполне подходящую высоту можно получить используя в качестве селектора «body», «html» или document.
Так. У нас есть путь, теперь нужна скорость. Здесь уже всё зависит лично от вас. Путём визуальных прикидок, мне показалась комфортной скорость 1.73 (цифра не имеет под собой никакого, сколь бы то ни было серьёзного обоснования и прикидывалась на глаз).Итоговый вариант Таким образом, рабочий код выглядит следующим образом:

$(document).ready(function(){
//Обработка нажатия на кнопку "Вверх"
$("#up").click(function(){
//Необходимо прокрутить в начало страницы

var scrollTime=curPos/1.73;
$("body,html").animate({"scrollTop":0},scrollTime);
});

//Обработка нажатия на кнопку "Вниз"
$("#down").click(function(){
//Необходимо прокрутить в конец страницы
var curPos=$(document).scrollTop();
var height=$("body").height();
var scrollTime=(height-curPos)/1.73;
$("body,html").animate({"scrollTop":height},scrollTime);
});
});

Дополнительно, можно навешать коэффициенты, на которые бы помножалось время или скорость в зависимости от пути для обеспечения больше гибкости, но на этом я уже не буду останавливаться.

Резюме В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.
Испытания проводились для DOCTYPE: XHTML 1.0 Strict в браузерах Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9. Некоторые проблемы:
  • border-radius как известно в IE8 не работает, но кроссбраузерность вёрстки это не тема данного топика.
  • В Opera 10 инструкция: $(«body,html»).animate({«scrollTop»:0},scrollTime); приводит к моментальному переходу в начало страницы. Эта проблема исчезает с переходом на Opera 11.

UPD: Поправлен итоговый пример.

Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются , выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны , но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

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

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

SuperscrolloramaSuperscrollorama - мощный, но тяжелый плагин для создания анимации при прокрутке . В его арсенале имеется множество различных настроек для анимации текста, отдельных DIV элементов, включая эффекты.
Более детальную информацию можно найти в документации к данному jQuery плагину.

onScreenОтличный плагин, который мы часто используем в своих проектах. От позволяет легко и быстро сделать различные эффекты появления элементов при прокрутке страницы . Плагин легкий и не грузит страницу.

OnePagejQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте 5s.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

FSVSОчень похожий по функционалу плагин на предыдущий. Позволяет сделать скользящую прокрутку по экранам с помощью css3. Имеет аналогичную проблему при просмотре на телефонах. Переход по экранам в виде отдельных слайдов возможен как с помощью ролика мышки, так и посредством клика на точечную боковую навигацию.

jInvertScrolljInvertScroll позволяет создавать классный горизонтальный parallax скролиинг . В то время, когда Вы крутите ролик мышки вниз, все элементы на странице движутся горизонтально, к тому же с разной скоростью, что создает parallax эффект.

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

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

Scrolling Progress BarИнтересное решение, с помощью которого можно показать прогресс прочтения информации на странице. Также есть возможность разбить текст на разделы и все это будет визуально выводиться в любом удобном для вас месте на странице.

multiScroll.jsmultiScroll.js - это jQuery плагин, похож на два предыдущих плагина скользких экранов , но имеет одно значительное отличие. Если в предыдущих случаях просто перелистывался экран, то этот больше похож на современный слайдер изображений . Экран разделяется на две равных части и левая перелистывается вверх, а правая вниз. Таким образом контент практически разрывается.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.

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

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

Понравилась статья? Поделитесь ей
Распечатать статью
Наверх