Pull to refresh

Плавающая контентная область сайта.

Reading time 5 min
Views 2.2K
Приветствую Хабр.
По мотивам cайта, сделанного сами знаете кем :)
В свое время увидел, такой эффект – слева сайта находятся ссылки, при клике на которые контентная область сайта плавно перемещается к указанному идентификатору. Эффект запомнился — решил повторить.
Для реализации плавного перемещения взял JQuery.



Немного теории:
Данный эффект достигается путем размещения «окошка» (если честно не знаю, как оно называется у других — как подсказал j4ckviewport), над областью контента, которую мы будем позиционировать.
Область «окошка» можно сделать произвольной.
Картинкой
image
Практика
Создаем сетку:
<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 раз не ездит
Tags:
Hubs:
+91
Comments 78
Comments Comments 78

Articles