Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Вертикальная витрина

Хотите интересную идею для интернет магазина или для сайта портфолио? Вам достаточно взглянуть на эту вертикальную витрину. Выполнена она  с помощью jquery и css transition. vetryna Это полноэкранный слайдер, секции которого перемещаются в противоположных направлениях. Выполнено все достаточно просто но эффектно. Чтобы слайдер отображался корректно на любом экране используются media запросы. Идея такой витрины состоит в том, чтобы заходя в какую-то рубрику сайта мы могли листать товары нажимаю на миниатюры, после чего появлялась детальная информация и полная картинка товара. Все это происходит с помощью анимации. Данный слайдер-витрина хорошо отображается на всех популярных и не очень (IE7+) браузерах.

ПОСМОТРЕТЬ ДЕМО

СКАЧАТЬ  ВЕТРИНУ

И так чтобы установить витрину на ваш сайт вам нужно выполнить несколько шагов.

1. Подключаем библиотеку jquery, сделать это просто, прописываем между тегами <head></head> следующее:

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js»></script>

 

2. Теперь подключаем скрипт витрины, также между тегами <head></head>:

<script type=»text/javascript» src=»js/modernizr.custom.79639.js»></script>

 

2.1 А код представленный ниже подключаем перед закрытым тегом </body>:

<script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js»></script>
<script type=»text/javascript» src=»js/slider.js»></script>
<script type=»text/javascript»>
$(function() {

Slider.init();

});
</script>

 

Приметка:

slider.js — находиться в архиве. Скачать его можно в начале или в конце этой страницы.

 

3. Следующим шагом будет вставка html  кода в нужное место на вашем сайте, между тегами <body></body>:

<section id=»ps-container» class=»ps-container»>

<div class=»ps-header»>
<h1>Vertical Showcase Slider</h1>
</div><!— /ps-header —>

<div class=»ps-contentwrapper»>

<div class=»ps-content»>
<h2>Bernhard</h2>
<span class=»ps-price»>£100</span>
<p>With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully.</p>
<a href=»http://www.ikea.com/gb/en/catalog/products/80163804/#/60203882″>Buy this item</a>
</div>

<div class=»ps-content»>
<h2>Tobias</h2>
<span class=»ps-price»>£65</span>
<p>For increased stability, re-tighten the screws about two weeks after assembly. Seat and back with restful flexibility; prevents a static sitting posture and enhances comfort.</p>
<a href=»http://www.ikea.com/gb/en/catalog/products/90185320/#/20115038″>Buy this item</a>
</div>

<div class=»ps-content»>
<h2>Pöang</h2>
<span class=»ps-price»>£140</span>
<p>Frame made of layer-glued bent birch; a very strong and durable material. High back provides great support for your neck. Sheepskin has natural insulating properties, which make it feel warm and cosy to sit on. Extra cushions are available for variation and renewal.</p>
<a href=»http://www.ikea.com/gb/en/catalog/products/S79889694/#/S59901017″>Buy this item</a>
</div>

<div class=»ps-content»>
<h2>Mellby</h2>
<span class=»ps-price»>£195</span>
<p>Easy to keep clean; removable, machine washable cover. Seat cushion with a top layer of memory foam; moulds to the precise contours of your body and regains its shape when you get up.</p>
<a href=»http://www.ikea.com/gb/en/catalog/products/S99895000/#/S69894380″>Buy this item</a>
</div>

<div class=»ps-content»>
<h2>Torbjörn</h2>
<span class=»ps-price»>£30</span>
<p>Height adjustable for a comfortable sitting posture. The sloping seat gives a comfortable sitting position when leaning forwards.</p>
<a href=»http://www.ikea.com/gb/en/catalog/products/70224756/»>Buy this item</a>
</div>

</div><!— /ps-contentwrapper —>

<div class=»ps-slidewrapper»>

<div class=»ps-slides»>
<div style=»background-image:url(images/1.jpg);»></div>
<div style=»background-image:url(images/2.jpg);»></div>
<div style=»background-image:url(images/3.jpg);»></div>
<div style=»background-image:url(images/4.jpg);»></div>
<div style=»background-image:url(images/5.jpg);»></div>
</div>

<nav>
<a href=»#» class=»ps-prev» ></a>
<a href=»#» class=»ps-next» ></a>
</nav>

</div><!— /ps-slidewrapper —>

</section>

 

4. Теперь нам не хватает только добавить стили для нашего слайдера — витрины:

@font-face {
font-family: ‘icon’;
src: url(«font/icon.eot»);
src:
url(«font/icon.eot?#iefix») format(’embedded-opentype’),
url(«font/icon.woff») format(‘woff’),
url(«font/icon.ttf») format(‘truetype’),
url(«font/icon.svg#icon») format(‘svg’);
font-weight: normal;
font-style: normal;
}

.ps-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
text-transform: uppercase;
color: #555;
background: #fff;
}

.ps-container > div {
position: absolute;
width: 50%;
}

.ps-container > div > div,
.ps-slidewrapper > nav,
.ps-slides > div {
position: absolute;
}

.ps-header {
top: 0px;
left: 0px;
height: 150px;
z-index: 1001;
background: #fff;
}

.ps-header h1 {
color: #ccc;
line-height: 150px;
margin: 0;
padding: 0 50px;
font-weight: 200;
font-size: 14px;
letter-spacing: 10px;
}

.ps-contentwrapper {
top: 150px;
bottom: 0px;
overflow: hidden;
z-index: 1000;
}

.ps-content {
background: #fff;
width: 100%;
height: 100%;
padding: 50px;
}

.ps-content h2 {
padding: 10px 15px;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
letter-spacing: 4px;
margin: 10px 0 30px;
text-align: right;
font-weight: 700;
}

.ps-content p {
line-height: 26px;
font-size: 12px;
letter-spacing: 2px;
word-spacing: 10px;
padding: 10px 15px;
font-weight: 400;
text-align: justify;
border-left: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
}

.ps-content span.ps-price {
float: left;
margin: 10px;
width: 140px;
height: 140px;
line-height: 140px;
text-align: center;
color: #fff;
background: #f7cfc6;
background: rgba(247,197,185,0.8);
font-size: 55px;
font-weight: 200;
}

.ps-content a:last-child {
font-size: 14px;
font-weight: 700;
color: #555;
letter-spacing: 4px;
float: right;
border: 3px solid #555;
padding: 3px;
text-indent: 4px;
}

.no-touch .ps-content a:last-child:hover {
color: #b2d79d;
border-color: #b2d79d;
}

.ps-content a:last-child:before {
content: ‘\53’;
font-family: ‘icon’;
font-style: normal;
font-weight: normal;
speak: none;
padding-right: 5px;
}

.ps-slidewrapper {
right: 0px;
top: 0px;
height: 100%;
overflow: hidden;
}

.ps-slides {
top: 0px;
bottom: 200px;
width: 100%;
}

.ps-slides > div {
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 9999px rgba(179,157,250,0.1);
}

.ps-slidewrapper > nav {
width: 100%;
height: 200px;
bottom: 0px;
right: 0px;
z-index: 1000;
}

.ps-slidewrapper > nav > a {
width: 50%;
height: 100%;
position: relative;
float: left;
box-shadow: inset 0 0 0 9999px rgba(207,227,206,0.8);
outline: none;
}

.ps-slidewrapper > nav > a:first-child {
box-shadow: inset 0 0 0 9999px rgba(233,217,141,0.8);
}

.no-touch .ps-slidewrapper > nav > a {
-webkit-transition: box-shadow 0.4s ease-in-out;
-moz-transition: box-shadow 0.4s ease-in-out;
-ms-transition: box-shadow 0.4s ease-in-out;
-o-transition: box-shadow 0.4s ease-in-out;
transition: box-shadow 0.4s ease-in-out;
}

.no-touch .ps-slidewrapper > nav > a:hover {
box-shadow: inset 0 0 0 9999px rgba(246,224,121,0.1);
}

.no-touch .ps-slidewrapper > nav > a:first-child:hover {
box-shadow: inset 0 0 0 9999px rgba(249,15,15,0.1);
}

.ps-slidewrapper > nav > a:after {
content: »;
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin: -20px 0 0 -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #fff;
border-top: 1px solid #fff;
}

.ps-slidewrapper > nav > a:first-child:after {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
margin: -80px 0 0 -50px;
}

.ps-slides > div,
.ps-slidewrapper > nav > a {
background-color: #fff;
background-position: center top;
background-repeat: no-repeat;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
}

.ps-move {
-webkit-transition: top 400ms ease-out;
-moz-transition: top 400ms ease-out;
-o-transition: top 400ms ease-out;
-ms-transition: top 400ms ease-out;
transition: top 400ms ease-out;
}

@media screen and (max-width: 860px) {

.js .ps-container > div {
width: 100%;
}

.js .ps-header {
height: 50px;
}

.js .ps-header h1 {
line-height: 50px;
padding: 0px 20px;
letter-spacing: 4px;
}

.js .ps-slides {
bottom: 320px;
top: 50px;
}

.js .ps-slidewrapper > nav {
height: 100px;
}

.js .ps-contentwrapper {
top: auto;
height: 220px;
bottom: 100px;
}

.js .ps-content {
padding: 10px;
}

.js .ps-content h2 {
border-right: none;
font-size: 18px;
margin: 10px 0;
padding-top: 0;
}

.js .ps-content span.ps-price {
font-size: 18px;
width: 50px;
height: 50px;
line-height: 50px;
font-weight: 700;
margin-bottom: 0;
}

.js .ps-content p {
line-height: 20px;
border: none;
padding: 5px 10px;
height: 80px;
overflow-y: scroll;
}

.js .ps-content a:last-child {
font-size: 13px;
margin: 10px 20px 0 0;
}
}

ПОСМОТРЕТЬ ДЕМО

СКАЧАТЬ  ВЕТРИНУ

На этом установка витрины закончена, если есть вопросы задавайте их в комментариях.