| karabawka |
Дата: Суббота, 28.09.2013, 16:10 | Сообщение # 1
|
Главный предприниматель
Сообщений: 1121
Статус: Offline
|
Кнопка ВВЕРХ (Плавный скроллинг)
С помощью данного урока, Вы научитесь делать еще одну фишку для вашего сайта. Фишка эта, называется "Вертикальный Скроллинг".
Думаю, все знают, что такое "Скроллинг". А если нет, то вот:
Скроллинг — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру». А "вертикальный скроллинг" - это перемещение камеры вверх и вниз.
В данном случае, мы научимся делать кнопку, которая будет плавно перемещать камеру вверх страницы. Если кто-то до сих пор не понял, о чем идет речь, то гляньте "Демо-урока" (снизу ссылка).
И так, давайте приступим. Для данного урока мы применим HTML, CSS и jQuery.
HTML (index.html)
Создадим страничку index.html или index.php и вставим туда следующий код:
Код <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Кнопка ВВЕРХ</title>
</head>
<body>
</body>
</html>
Думаю, тут сложностей не возникнет. После того, как сделали данный шаг, необходимо вставить между тегами <body></body> много-много текста, для того, чтобы появилась вертикальная полоса прокрутки.
Для чего это нужно?
Изначально, наша кнопка будет скрыта от глаз пользователей и будет появляться, только, если пользователь прокрутил страницу "вниз".
Далее, что бы потом не возвращаться к HTML-файлу подключим файлы со стилями и скриптами, которые мы в будущем создадим.
Между тегами <head></head> вставим следующий код.
Код <link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="scrollTo.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
CSS (style.css)
Теперь создадим файл, который будет отвечать за стилизацию кнопки. Назовем его style.css.
После этого, вставим в него следующий код:
Код #message
{
/* Отображение: скрываем кнопку */
display: block;
display: none;
/* кнопка поверх всех остальных элементов */
z-index: 999;
/* прозрачность кнопки */
opacity: .8;
/* кнопка всегда на одном месте */
position: fixed;
/* размещаем кнопку в нижней правой части страницы */
top: 100%;
margin-top: -60px; /* = height + preferred bottom margin */
left: 80%;
margin-left: 30px;
/* закругляем углы */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/* другая стилизация кнопки */
width: 110px;
line-height: 28px;
height: 28px;
padding: 10px;
background-color: #000;
font-size: 20px;
text-align: center;
color: #fff;
}
Не будем здесь ничего рассказывать. Все прописано, прямо в коде.
jQuery (jquery.js, scrollTo.js, js.js)
Создадим все 3 js-файла.
Файл jquery.js содержит библиотеку jquery. Ее можно скачать с официального сайта, или взять в исходниках.
Файл scrollTo.js - это скрипт-плагин, который позволяет осуществлять плавное перемещение вверх страницы. Его можно взять в исходниках.
Файл js.js - содержит скрипт, позволяющий кнопке появляться, при смещении страницы вниз, а также пропадать, если пользователь сам переместился в самый вверх страницы.
Код файла js.js:
Код $(function () { // выполнять данный код при загрузке страницы (AKA DOM load)
/* устанавливаем переменные */
var scroll_timer;
var displayed = false;
var $message = $('#message');
var $window = $(window);
var top = $(document.body).children(0).position().top;
/* реагируем при событии "прокрутки в окне" */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // используем таймер для выполнения
if($window.scrollTop() <= top) // скрываем кнопку, если находимся в верхней части страницы
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // показываем кнопку, если прокручиваем вниз страницу
{
displayed = true;
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
}
}, 100);
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
На этом все. Кнопка должна работать.
Просмотреть демо "Кнопки наверх"
Исходники(скачать)
Источник: codingtools.ru Оформил для форума и немного подправил: karabawka. Всем удачи в изучении веб-ремесла.  |
|
|
|
|
| Donny[CM] |
Дата: Понедельник, 18.11.2013, 19:00 | Сообщение # 2
|
Любитель
Сообщений: 30
Статус: Offline
|
Спасибо
Мои пожелания :
Набить 100 репы[✔]
Набить 300 репы[✔]
Набить 500 репы[ - ]
Набить 50 сообщений[✔]
Набить 100 сообщений[✔]
Набить 200 сообщений[ - ]
Быть на СМ 20 дней[✔]
Быть на СМ 50 дней[ - ]
|
|
|
|
|
