DownLoad_Free

Современная навигационная галерея на сайт (Parallax scroll galery jquery script)

Name: Современная навигационная галерея на сайт (Parallax scroll galery jquery script)
Item: Современная навигационная галерея на сайт (Parallax scroll galery jquery script)
Author: anikey99

Reload Google_Translater (F5)

Главная » Материалы » Web, scripts
<--Немного места для рекламы-->

Современная навигационная галерея на сайт (Parallax scroll galery jquery script)

[ ]	Дата обновления: 22.10.2024
Современная кросс-браузерная скролл-навигационная галерея на сайт, прокручивающая картинки, при движении мыши, на базе скрипта Parallax jParallax Demos item item item item item item Photos by TommyRock Скрипт параллакс скролл галереи <style type="text/css" media="screen, projection"> html,body{background:#515356;color:#cbd0d5;height:100%;width:100%;} a:focus,a:hover{color:#a1c2e4;} a{color:#858b95;} h1{color:#111;} h2{color:#262728;} h3{color:#9099a0;} h4{color:#878f96;} h2 a:focus,h2 a:hover{text-decoration:none;color:#767f8e;} h2 a{color:#858b95;} .site_wrap{width:82%;max-width:60rem;min-width:292px;} .wrap{position:relative;margin:0 auto} .thumb{display:inline-block;vertical-align:baseline;overflow:hidden;padding-top:64px;height:0;width:64px;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:0 0;background-repeat:no-repeat;text-decoration:none;color:inherit} #port { margin: 1.5em 0px; overflow: hidden; position: relative; /width: 700px;/ height: 168px; border-left: 1px solid black; border-right: 1px solid black; padding: 24px 64px; } .parallax-layer { position: absolute; } /* Horizontal lists of inline-blocks, with image backgrounds as thumbnails / / Tested in Safari 4 \| FF 3.5 \| Opera 9.6 \| IE7 / .thumbs_index { padding: 0 12px; / initial position / left: 0; / Put all he thumbs on one line. */ white-space: nowrap; } .thumbs_index > li { display: inline; margin-right: 12px; } .img_thumb { padding-top: 120px; width: 150px; -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .footnote { font-size: 0.6em; color: #858b95; } </style> <div class="site_wrap wrap"> <h2>jParallax Demos </h2> <div id="port"> <!-- List must be spaceless becuse <li>s are display: inline, and any spaces between them show in IE --> <ul class="thumbs_index index parallax-layer" style="left: 9.27710843373494%; margin-left: -115.77831325301206px; "> <li><a class="img_thumb thumb" href="" style="background: url(http://cs317831.userapi.com/v317831707/10f4/RAIO1NYlvok.jpg) center center;">item</a></li> <li><a class="img_thumb thumb" href="" style="background: url(http://cs11089.userapi.com/u8668931/-6/o_526173ea.jpg);">item</a></li> <li><a class="img_thumb thumb" href="" style="background: url(http://cs5922.userapi.com/u8668931/116245672/o_6e01855e.jpg);">item</a></li> <li><a class="img_thumb thumb" href="" style="background: url(http://cs10819.userapi.com/u19632925/98266810/m_10a6a79e.jpg);">item</a></li> <li><a class="img_thumb thumb" href="" style="background: url(http://cs11239.userapi.com/u8668931/154452783/o_7ee6a3a1.jpg);">item</a></li> <li class="last"><a class="img_thumb thumb" href="" style="background: url(http://cs9916.userapi.com/u8668931/116921245/o_afe8fad4.jpg);">item</a></li> </ul> </div> <div class="footnote">Photos by <a href="http://photoset-nsk.ru/last.php">TommyRock</a></div> </div> <script src="/paralax_scroll/jquery.js"></script> <script src="/paralax_scroll/jquery.event.frame.js"></script> <script src="/paralax_scroll/jquery.parallax.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ // Declare parallax on layers jQuery('.parallax-layer').parallax({ mouseport: jQuery("#port"), yparallax: false }); }); </script> Еще яркие примеры Parallax технологии: Parallax_header \| Parallax_box Страница автора

Теги материала: Похожие материалы: Категория: Все \| Добавил: anikey99
Просмотров: 2725 \| Загрузок: 0 \| Комментарии: 2