Плавный скроллинг и плавающее меню

30 августа 2014 Антон Кулешов 2029 0

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

Реклама

Чтобы реализовать плавный скроллинг мы можем использовать JavaScript или библиотеку на основе его. Мне больше нравиться jQuery, поэтому для начала роботы подключим её:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Теперь мы нанесём на страницу HTML разметку:

<!-- Структура скролмени -->
<div class="scrollmenu">
	<ul>
		<li><a href="#block1">Пункт №1</a></li>
		<li><a href="#block2">Пункт №2</a></li>
		<li><a href="#block3">Пункт №3</a></li>
		<li><a href="#block4">Пункт №4</a></li>
		<li><a href="#block5">Пункт №5</a></li>
		<li><a href="#block6">Пункт №6</a></li>
	</ul>
</div>
<!-- Структура скролмени -->

<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
<div id="block6"></div>

Далее следуют CSS стили для оформления самого меню (в нашем случае, для удобства, меню будет плавающие):

body{margin: 0; padding: 0;}

#block1,
#block2,
#block3,
#block4,
#block5,
#block6{
	border: 2px solid red;
	width: 800px;
	height: 600px;
	margin: 15px auto;
}
#block1{background-color: #8EC1DA;}
#block2{background-color: #420100;}
#block3{background-color: #FF00AE;}
#block4{background-color: #FF4B37;}
#block5{background-color: #FFFF3C;}
#block6{background-color: #6CE26C;}

div.scrollmenu{
	background-color: #3187D0;
	margin: 0 auto;
	width: 100%;
	position:fixed;
	top:0;
	left:0;
	z-index: 999;
}
	div.scrollmenu ul{
		width: 70%;
		margin: 0 auto;
		padding: 15px 0 0px;
		text-align: justify;
		overflow: hidden;
	}
	div.scrollmenu ul:after{
		content: "";
		width: 100%;
		display: inline-block;
	}
		div.scrollmenu ul li{
			display: inline-block;
			color: #fff;
			text-transform: uppercase;
			cursor: pointer;
		}
			div.scrollmenu ul li a{
				color: #fff;
				text-transform: uppercase;
			}
			div.scrollmenu ul li a:hover{
				text-decoration: none;
			}

После всех подготовительных действий можно приступать к скрипту, хотя самого кода в разы меньше чем HTML и CSS.

$(function(){
	$("a[href*=#]").click(function(){
		$("html:not(:animated),body:not(:animated)")
			.animate({
				scrollTop: $($(this).attr("href")).offset().top
			}, 1000);
		return false;
	});
});

Вот и всё - скрипт готов. В этой статье показан пример, как сделать плавный скроллинг при нажатии на пункты меню, но в некоторых случаях нам нужно показать меню при определенной прокрутке, чтобы это сделать, можно воспользоваться моей статьёй «Плавающие меню на JQuery».

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

«Легкая упоротость» глитч эффект

1 апреля 2015 ti1schweiger

«А у тебя коленки сзади грязные!» - согласитесь, звучит неубедительно в реалиях сегодняшнего времени, тем более, когда реальное общение все больше заменяет виртуальное. Как же шутить на 1 апреля? – Да очень просто! Хотите разыграть пользователей своего ресурса? – Используйте глитч эффект. Кто еще не в теме, поясню, глитч эффект – это эффект сломанного монитора, который уже не раз умудрились уронить и у которого серьезно барахлят сведение и вертикальная синхронизация.

Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте

9 марта 2016 Антон Кулешов

На сегодняшний день, мы обладаем уникальной возможностью – отслеживать многочисленные потоки информации и сохранять важный контент у себя на интернет страницах. В один клик регистрироваться и авторизоваться на сайтах и различных сервисах. Уже не проблема быть в курсе различных и разносторонних новостей из разных сфер жизни или оставаться на связи со своими близкими и знакомыми. Мы стали пользователями многочисленных социальных сетей и обладателями личных страниц с индивидуальными номерами, которые хранят срез наших интересов. Посещая магазины в интернете и сайты с товарами, мы с лёгкостью можем подарить лишнюю информацию о себе, не заполнив при этом ни одной формы. Для продавца каждый из нас потенциальный клиент, и он хочет знать, кто к нему зашёл на сайт и по какому запросу. И это возможно - мы сами можем вручить свой уникальный идентификатор (id) профиля в социальной сети даже не заметив этого, что даст продавцу больше шансов впарить свой товар. Достигается это путем использования разновидности кликджекинга, так называемого соцфишинга, об этом сегодняшняя статья.

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 Антон Кулешов

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.