Главная » Файлы » Прочие скрипты » jQuery
Оригинальные 3D блоки со множеством эффектов через плагин Roundabout на jQuery
23.06.14, 11:33:44

Скачать файл



Очень интересный плагин для создания множества оригинальных 3D эффектов прокрутки различного контента

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<style>.roundabout-holder { padding: 0; height: 10em; width: 85%; margin: 0 auto; }  
.roundabout-moveable-item {  
height: 3em;  
width: 3em;  
cursor: pointer;  
background: #333;  
background: -moz-linear-gradient(90deg, #bbb 0%, #fcfcfc 100%);  
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #bbb), color-stop(1.0, #fcfcfc));  
border: 1px solid #999;  
overflow: hidden;  
text-align: center;  
line-height: 3em;  
}  
.roundabout-in-focus { cursor: auto; }  

.example .show {  
height: 100px;  
width: 200px;  
margin-top: 1em;  
-moz-border-radius: 6px;  
-webkit-border-radius: 6px;  
-o-border-radius: 6px;  
border-radius: 6px;  
overflow: hidden;  
}  
  </style>


Далее в самый низ после тега /body вставляйте:
Код
<script type="text/javascript" src="/js/jquery.easing.js"></script>
  <script type="text/javascript" src="/js/jquery.roundabout.min.js"></script>
  <script type="text/javascript" src="/js/jquery.roundabout-shapes.min.js"></script>


Следующий код в то место, где будет располагаться сам блок с эффектом:

1) Для демо Lazy Susan:
Код
<div class="example">
<div class="show">
<ul id="example-lazySusan">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$(#example-lazySusan').roundabout({  
shape: 'lazySusan'  
});  
});  
  </script>


2) Для демо Water Wheel:
Код
<div class="example">
<div class="show">
<ul id="example-waterWheel">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-waterWheel').roundabout({  
shape: 'waterWheel'  
});  
});  
  </script>


3) Для демо Figure 8:
Код
<div class="example">
<div class="show">
<ul id="example-figure8">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-figure8').roundabout({  
shape: 'figure8'  
});  
});  
  </script>


4) Для демо Square:
Код
<div class="example">
<div class="show">
<ul id="example-square">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-square').roundabout({  
shape: 'square'  
});  
});  
  </script>


5) Для демо Conveyor Belt (Left):
Код
<div class="example">
<div class="show">
<ul id="example-conveyorBeltLeft">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-conveyorBeltLeft').roundabout({  
shape: 'conveyorBeltLeft'  
});  
});  
  </script>


6) Для демо Conveyor Belt (Right):
Код
<div class="example">
<div class="show">
<ul id="example-conveyorBeltRight">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-conveyorBeltRight').roundabout({  
shape: 'conveyorBeltRight'  
});  
});  
  </script>


7) Для демо Diagonal Ring (Left):
Код
<div class="example">
<div class="show">
<ul id="example-diagonalRingLeft">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-diagonalRingLeft').roundabout({  
shape: 'diagonalRingLeft'  
});  
});  
  </script>


8) Для демо Diagonal Ring (Right):
Код
<div class="example">
<div class="show">
<ul id="example-diagonalRingRight">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-diagonalRingRight').roundabout({  
shape: 'diagonalRingRight'  
});  
});  
  </script>


9) Для демо Roller Coaster Added in v1.1:
Код
<div class="example">
<div class="show">
<ul id="example-rollerCoaster">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-rollerCoaster').roundabout({  
shape: 'rollerCoaster'  
});  
});  
  </script>


10) Для демо Tear Drop Added in v1.1:
Код
<div class="example">
<div class="show">
<ul id="example-tearDrop">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-tearDrop').roundabout({  
shape: 'tearDrop'  
});  
});  
  </script>


11) Для демо The Juggler:
Код
<div class="example">
<div class="show">
<ul id="example-theJuggler">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-theJuggler').roundabout({  
shape: 'theJuggler'  
});  
});  
  </script>


12) Для демо Goodbye Cruel World:
Код
<div class="example">
<div class="show">
<ul id="example-goodbyeCruelWorld">
<li>:)</li>
<li>:D</li>
<li>:p</li>
<li>:*</li>
<li>:B</li>
</ul>
</div>  

  <script>  
$(document).ready(function() {  
$('#example-goodbyeCruelWorld').roundabout({  
shape: 'goodbyeCruelWorld'  
});  
});  
  </script>


Осталось лишь залить три скрипта из прикреплённого архива в папку js

Адаптация под uCoz by Apocalypse

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Roundabout, Эффектов, Со, Через, блоки, на, плагин, Оригинальные, множеством, 3D
Просмотров: 415 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: