Приветствую Хабр.
По мотивам cайта, сделанного сами знаете кем :)
В свое время увидел, такой эффект – слева сайта находятся ссылки, при клике на которые контентная область сайта плавно перемещается к указанному идентификатору. Эффект запомнился — решил повторить.
Для реализации плавного перемещения взял JQuery.
Немного теории:
Данный эффект достигается путем размещения «окошка» (если честно не знаю, как оно называется у других — как подсказал j4ck — viewport), над областью контента, которую мы будем позиционировать.
Область «окошка» можно сделать произвольной.
Картинкой
Практика
Создаем сетку:
Накладываем таблицу стилей для позиционирования:
javascript
Описание
Передаем функции:
divId – идентификатор области на которую надо встать
mainId – идентификатор контента
c помошью animate плавно перемещаем контентную область к указанному элементу.
Собственно все.
Пример: http://htmllancer.tu2.ru/workarea.html
Статья первая – так что ногами не пинать :)
UPD: переделал под высоту экрана.
UPD2: сделал остановку анимации, теперь при 10 кликах область 10 раз не ездит
По мотивам cайта, сделанного сами знаете кем :)
В свое время увидел, такой эффект – слева сайта находятся ссылки, при клике на которые контентная область сайта плавно перемещается к указанному идентификатору. Эффект запомнился — решил повторить.
Для реализации плавного перемещения взял JQuery.
Немного теории:
Данный эффект достигается путем размещения «окошка» (если честно не знаю, как оно называется у других — как подсказал j4ck — viewport), над областью контента, которую мы будем позиционировать.
Область «окошка» можно сделать произвольной.
Картинкой
Практика
Создаем сетку:
<div id="small">
<div id="big">
<div class="workplace" id="wp_01">
<p>Первая область</p>
</div>
<div class="workplace" id="wp_02">
<p>Вторая область</p>
</div>
<div class="workplace" id="wp_03">
<p>Первая область</p>
</div>
<div class="workplace" id="wp_04">
<p>Первая область</p>
</div>
</div>
<ul id="links"">
<li><a href="#" id="go" onclick="return moveTo('wp_01', 'big');">Тест 1</a></li>
<li><a href="#" id="go2" onclick="return moveTo('wp_02', 'big');">Тест 2</a></li>
<li><a href="#" id="go3" onclick="return moveTo('wp_03', 'big');">Тест 3</a></li>
<li><a href="#" id="go4" onclick="return moveTo('wp_04', 'big');">Тест 4</a></li>
</ul>
</div>
* This source code was highlighted with Source Code Highlighter.
Накладываем таблицу стилей для позиционирования:
<style>
html {
height: 100%;
}
body {
padding:0; margin:0;
height: 100%;
}
#big{
width: 30000px;
position: absolute;
top: -1000px;
left: -100px;
cursor: move;
}
#small {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: url(img/bg.jpg);
}
#links {
top:10px;
left: 10px;
position: absolute;
width: 75px;
background-color: white;
padding: 5px;
opacity:0.5;
}
div.workplace {
width: 400px;
position: absolute;
cursor:default;
}
#wp_04 {
top:1800px;;
left: 1800px;
}
#wp_03 {
top:1000px;;
left: 1500px;
}
#wp_02 {
top: 200px;;
left: 400px;
}
#wp_01 {
top: 1650px;
left: 800px; }
div.workplace {
font: normal 90% "Trebuschet MS";
color:white;
}
a.act {
font-weight: bold;
text-decoration:none;
}
</style>
* This source code was highlighted with Source Code Highlighter.
javascript
<script>jQuery.noConflict();</script> /*мало ли другой framework есть*/
<script>
function moveTo(divId, mainId) {
jQuery("#"+mainId).stop(); /*Останавливаем текущую анимацию*/
var topIn = jQuery("#"+divId).css("top");
var leftIn = jQuery("#"+divId).css("left");
leftIn = leftIn.replace(/px/, "");
leftIn = leftIn - 400;
jQuery("#"+mainId).animate({
top: "-"+topIn,
left: "-"+leftIn
}, 1500 );
return false;
}
</script>
* This source code was highlighted with Source Code Highlighter.
Описание
Передаем функции:
divId – идентификатор области на которую надо встать
mainId – идентификатор контента
c помошью animate плавно перемещаем контентную область к указанному элементу.
Собственно все.
Пример: http://htmllancer.tu2.ru/workarea.html
Статья первая – так что ногами не пинать :)
UPD: переделал под высоту экрана.
UPD2: сделал остановку анимации, теперь при 10 кликах область 10 раз не ездит