Хотите узнать как нестандартно монетезировать?

Быстрая прокрутка страницы. BrainScroll

Веб дизайн 17-05-2015, 15:41 306   

brainscroll

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

Особенности

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

Логика тут простая: на широких экранах, по бокам много свободного места, которое можно использовать. На узких, наоборот, места катастрофически мало. Поэтому полоска перемещяется вниз, где занимает совсем мало места.

Скачать

brainscroll.rar [808 b] (cкачиваний: 2) 

Уcтановка

Разумеется сперва нужно подключить ЖэКвери, если он ещё не подключен:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

 

Вторым шагом, перед </body> подключаем плагин:

<script type="text/javascript" src="brainscroll.js" ></script>

 

И наконец в CSS стили вставляем:

/* Brain Scroll */
.toTop a {filter:alpha(opacity=40);-moz-opacity:0.4;-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-box-shadow:inset -2px 0 3px 0 rgba(0,0,0,0.2);-webkit-box-shadow:inset -2px 0 3px 0 rgba(0,0,0,0.2);}
.toTop a:hover {filter:alpha(opacity=80);-moz-opacity:0.8;}
.minitoTop a {-moz-box-shadow:inset 0 2px 3px 0 rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 2px 3px 0 rgba(0,0,0,0.2);}
 
 
.toTop {
	cursor:pointer;
	position:fixed;
	height:100%;
	bottom:0;
	left:0;
	display:none;
	z-index:999;
}
.toTop a {
	border-right:1px solid #aaa;
	display:block;
	background:#ccc;
	padding:1em 0.5em;
	font-size:1em;height:100%;
	text-align:center;
	opacity:0.4;
	outline:none !important;
	color:#000;
	text-decoration:none;
	transition:all 0.5s ease;
	box-shadow:inset -2px 0 3px 0 rgba(0,0,0,0.2);
}
.toTop a:hover {
	text-decoration:none;
	color:#000;
	opacity:0.8;
}
.toTop a:active {
	background-color:#A9CBE2;
}
.toTop .arrow {
	font-family:Arial, sans-serif;
	font-size:1em;
}
/* для мелких экранов */
.minitoTop {
	width:100%;
	height:auto;
}
.minitoTop a {
	border-right:none;
	border-top:1px solid #aaa;
	height:100%;padding:.05em 0;
	box-shadow:inset 0 2px 3px 0 rgba(0,0,0,0.2);
}

 

P.S.

Скрипт проверен во всех современных барузерах и в InternetExplorer выше 7-ой версии. В "шестёрке" скрипт работать не будет, потому что IE6 не понимает свойства position:fixed.

  • Не нравится
  • 0
  • Нравится

Похожие публикации

У данной публикации еще нет комментариев. Хотите начать обсуждение?

Добавить комментарий

Свежие статьи на e-mail :
Введите свой e-mail адрес :