Наверняка вы видели на многих блогах, когда при скроллинге страницы вниз, появляется блок меню или другой гаджет, например кнопки социальных сетей. При прокрутке вверх элемент опять угасает.
Для такого эффекта нам понадобится всего лишь небольшой скрипт.
Будем использовать метод fadeIn( ). С помощью этой функции можно показывать и скрывать выбранные элементы на странице, за счет плавного изменения прозрачности. И fadeOut( )- скрывает соответствующие элементы путем затухания их до прозрачного состояния.
Нам понадобится вот такой код.
<script src="[url]https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>[/url]
<script>
$("#HTML10").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#HTML10").fadeIn("slow");
}
else {
$("#HTML10").fadeOut("slow");
}
});</script>
Процесс установки в блоге совсем простой. Для начала нужно знать ID гаджета который будет скользить HTML10. Замените на свой и будьте внимательны ко всем символам. Посмотрите как узнать ID любого гаджета.
В коде красным цветом скрипт библиотеки jquery. Если у вас такая установлена в блоге его нужно убрать и использовать только вторую часть кода. scrollTop() > 100) это расстояние сверху, когда будет появляться объект. Настраивайте на своё усмотрение.
Далее заходим во вкладку ТЕМА - изменить HTML. С помощью горячих клавиш находим закрывающийся тег </body>.
Сразу перед ним вставляем готовый код и сохраняем изменения. Перейдите на страницу блога и смотрите результат.https://www.blogger.com/%3Ca%20href=
0 коммент.:
Отправить комментарий