Выбор читателей
Популярные статьи
Ты, конечно, встречал на страницах с большим количеством текста в самом низу ссылку «наверх». Или взять, допустим, содержание (при условии, что весь документ находится на одной длиннющей странице). Смысл примерно одинаков. Нажимаем на ссылку и попадаем в какое-то конкретное место документа. Фактически, программным образом перематываем скролл.
Реализовать такое с помощью якоря — пара пустяков. А что если я хочу не мгновенно попасть в нужную точку, а именно «перемотать» скролл?
Проверено в:
Реализовать программную перемотку скролла.
РешениеБудем использовать специально для этого разработанный плагин jQuery.ScrollTo. Он умеет очень многое. Например, может перематывать как главный скролл окна, так и скролл какого-нибудь . Может перематывать в определенную позицию (в пикселях или процентах) или к какому нибудь конкретному элементу (заданному, например, по ). Все это уже создано, наша задача научится этим пользоваться.
Что качать?Подключаем библиотеки:
Прописываем в 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()Ну и как обычно, вся магия — в парметрах:
Ось, которая будет прокручиваться, "x", "y", "xy" или "yx". "xy" — значение по умолчанию |
Длительность анимации. |
Название уравнения easing. |
Если true, целевые границы и margin вычитаются. |
Чилсо или хэш {left: x, top:y }. Это значение будет добавлено к окончательной позиции (может быть отрицательным) |
Добавить часть высоты/ ширины элемента (также может быть отрицательным). |
Если true, и обе оси прокручиваться, то сначала анимируется прокрутка на одной оси, а затем на другой. Порядок задает паравитр axis ("xy" или "yx") |
Если queue=true, функция выполнится после прокрутки первой оси. |
Функция, которая вызывается после того, как закончится вся анимация. |
При вызове scrollTo() передается три вида параметров — цель, продолжительность, настройки (порядок имеет значение).
В качестве цели можно использовать:
Примеры вызова с параметрами.
Как всё начиналось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… Других приемлемых способов осуществлять скроллинг, работающих во всех браузерах найдено не было.
Добавим рюшечек и бантиков С самой простой частью разобрались. Базовый функционал получен, теперь можно придумать, что-нибудь поинтереснее. Первое же, что бросается в глаза, так это скорость скроллинга. При наличии сколь бы то ни было насыщенного контента, использование скроллинга становится настоящим тестом на склонность к эпилепсии. Поэтому, хочется, чтобы скроллинг был более плавным. Решение в лоб, задать определённую константу времени за которое должен осуществляться скроллинг. Очевидный плюс: элементарность решения. Не менее очевидный минус: никак не учитывается объём контента. Разумное решение: вычислять время выполнения скроллинга в зависимости от размера контента. Приступим.
$(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);
});
});
Дополнительно, можно навешать коэффициенты, на которые бы помножалось время или скорость в зависимости от пути для обеспечения больше гибкости, но на этом я уже не буду останавливаться.
Резюме В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.UPD: Поправлен итоговый пример.
Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то . В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:
Начнем, пожалуй с HTML разметки и здесь нет ничего необычного. Все довольно просто и понятно. Большое полотно текста, внизу футер и блок с кнопкой, который будет появляться. Вот код блока:
1 2 3 4 5 6 7 8 9 10 | Здесь много контента... Какой-то текст. Footer |
Здесь много контента... Какой-то текст. Footer
Теперь займемся оформлением нашего скрытого блока и его кнопки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #block { display : none ; position : fixed ; top : 15px ; right : 15px ; color : #fff ; background : #4CAF50 ; padding : 10px ; border-radius : 5px ; width : 200px ; box-shadow : 0 13px 20px -5px #3a3a3a ; font-family : Arial; text-align : center ; } .btn{ background : #FF9800 ; border : 2px solid #795548 ; color : #fff ; border-radius : 5px ; cursor : pointer ; padding : 5px 10px ; margin-top : 10px ; font-weight : bold ; } |
#block{ display: none; position: fixed; top: 15px; right: 15px; color: #fff; background: #4CAF50; padding: 10px; border-radius: 5px; width: 200px; box-shadow: 0 13px 20px -5px #3a3a3a; font-family: Arial; text-align: center; } .btn{ background: #FF9800; border: 2px solid #795548; color: #fff; border-radius: 5px; cursor: pointer; padding: 5px 10px; margin-top: 10px; font-weight: bold; }
Теперь займемся непосредственно, что называется scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.
А затем сам код скрипта, который и будет творить магию на странице:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document) .ready (function () { var $element = $(".footer" ) ; let counter = 0 ; $(window) .scroll (function () { var scroll = $(window) .scrollTop () + $(window) .height () ; //Если скролл до конца елемента //var offset = $element.offset().top + $element.height(); //Если скролл до начала елемента var offset = $element.offset () .top if (scroll > offset && counter == 0 ) { $("#block" ) .fadeIn (500 ) ; counter = 1 ; } } ) ; $(".btn" ) .click (function () { $("#block" ) .slideUp () ; } ) ; } ) ; |
$(document).ready(function(){ var $element = $(".footer"); let counter = 0; $(window).scroll(function() { var scroll = $(window).scrollTop() + $(window).height(); //Если скролл до конца елемента //var offset = $element.offset().top + $element.height(); //Если скролл до начала елемента var offset = $element.offset().top if (scroll > offset && counter == 0) { $("#block").fadeIn(500); counter = 1; } }); $(".btn").click(function(){ $("#block").slideUp(); }); });
По умолчанию событие срабатывает, как только начало элемента, в данном случае футера, появляется в зоне видимости, но можно поменять значение, раскомментировав 7 строку и тогда функция сработает, когда прокрутка дойдет до конца элемента.
Вот таким хитрым способом можно показывать посетителям сайта ваше уникальное предложение и добавив в метрике цели, отслеживать его конверсию.
В последнее время бешеной популярностью пользуются типы сайтов под названием 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 ; } ) ;Вот и все. Всем успехов!
Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются
, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге
в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны
, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.
Статьи по теме: | |
Фирменный стиль в одежде почты россии Мужская и женская форма Почты России
Почта России – крупное предприятие, которое ставит перед собой цель... Гуд бай, мошенники: безопасный шопинг на Алиэкспрессе с Aliexpress Helper Алиэкспресс помощник
AliPrice (Али Прайс) — новый и очень интересный сервис для удобной... Программе Skype: как перевернуть изображение
Веб-камеры компьютеров или даже ноутбуков порой преподносят своим... |