Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Появление и скрытие элементов за счет прозрачности

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


Будем использовать метод fadeIn( ). С помощью этой функции можно показывать и скрывать выбранные элементы на странице, за счет плавного изменения прозрачности. И fadeOut( )- скрывает соответствующие элементы путем затухания их до прозрачного состояния.

Нам понадобится вот такой код.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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>. Для начинающих посоветую прочитать статью как найти строку в шаблоне правильно.

Сразу перед ним вставляем готовый код и сохраняем изменения. Перейдите на страницу блога и смотрите результат.

Вот и всё.

Спасибо, что читаете мои шпаргалки и до встречи. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


0 коммент.:

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML