3D Card Previewer для uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

3D Card Previewer для uCoz

Ресурсов для создания сайта с каждым днем становится все больше, различные эффекты, переходы и приемы позволяют поразить взор посетителя и заинтриговать методом привлечения информации. На мультимедийных сайтах, и не только, стали весьма популярны так называемые слайдеры контента, которые содержат в себе изображения, музыку и видео, это весьма удобно, ведь позволяет освободить множество места и тем самым преподнести необходимую информацию посетителю. Но слайдеров стало слишком много, и они, по функциональности, весьма схожи.

Но что же делать в случае, если Вам необходимо сделать такой слайдер, но при этом выделиться среди остальных оригинальностью? Тогда данный материал будет весьма интересен. Мы создадим, простой, но в тоже время красивый и легкий 3D слайдер

Установка:

Данный код в таблицу стилей:
Код
.container{padding:0 5%;}
.card-container{position:relative;width:70px;margin-top:35px;-webkit-perspective:800px;perspective:800px;-webkit-perspective-origin:0 50%;perspective-origin:0% 50%;-webkit-transition:.4s;transition:.4s;}
.card{position:relative;width:250px;margin-bottom:10px;overflow:hidden;line-height:0px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-webkit-transition:.4s;transition:.4s;}
.card img{width:100%;}
.card a{margin:0;}
.card-container{float:left;left:0;}
.card-container:first-child .card{-webkit-box-shadow:-10px 10px 20px 0 rgba(0,0,0,.1);-moz-box-shadow:-10px 10px 20px 0 rgba(0,0,0,.1);box-shadow:-10px 10px 20px 0 rgba(0,0,0,.1);}
.card-container .card{-webkit-transform:rotateY(30deg);transform:rotateY(30deg);-webkit-box-shadow:-10px 10px 20px 0 rgba(0,0,0,.4);-moz-box-shadow:-10px 10px 20px 0 rgba(0,0,0,.4);box-shadow:-10px 10px 20px 0 rgba(0,0,0,.4);}.card-container.active{z-index:1;margin:0;left:60%;}
.card-container.active .card{width:300px;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,.4);-moz-box-shadow:0 10px 20px 0 rgba(0,0,0,.4);box-shadow:0 10px 20px 0 rgba(0,0,0,.4);}

Где хотите видеть слайдер вставляете код:
Код
<div class="container">
   <div class="card-container">
   <div class="card">
   <a href=""><img src="http://webmaster-ucoz.ru/ucoz/1/img/3d/interstellar.jpg"></a>
   </div>
   </div>
   <div class="card-container">
   <div class="card">
   <a href=""><img src="http://webmaster-ucoz.ru/ucoz/1/img/3d/imitation_game.jpg"></a>
   </div>
   </div>
   <div class="card-container">
   <div class="card">
   <a href=""><img src="http://webmaster-ucoz.ru/ucoz/1/img/3d/hobbit.jpg"></a>
   </div>
   </div>
   <div class="card-container">
   <div class="card">
   <a href=""><img src="http://webmaster-ucoz.ru/ucoz/1/img/3d/boxtrolls.jpg"></a>
   </div>
   </div>
   <div class="card-container active">
   <div class="card">
   <a href=""><img src="http://webmaster-ucoz.ru/ucoz/1/img/3d/maze_runner.jpg"></a>
   </div>
   </div>
   <div class="clearfix"></div>
   </div>

В нижнюю часть сайта:
Код
<script>
(function($){$(function(){var activeWidth=$('.card-container').width();var activeImgWidth=$('.card-container .card a img').width();function balanceCards(){var index=$('.card-container').index($('.active'));var offset=-1*((index*activeWidth)+(activeImgWidth/2));$('.card-container.active').css({"margin-left":offset+"px"});}
balanceCards();$('.card a').click(function(e){e.preventDefault();$(this).parents('.card-container').siblings().not('.'+ $(this).attr("class")).removeClass("active").css({"margin-left":"0px"});$(this).parents('.card-container').addClass("active");balanceCards();});});})(jQuery);
</script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 26.02.2016 в 21:00
Материал просмотрен: 1355 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо
Источник

2 комментария


Hlebushek1
Hlebushek1 @Hlebushek1 27.02.2016 00:271
+4
Вообще крутяк, а для кино-сайта просто бомба
webmanya
Мария @webmanya 26.11.2016 13:052
А можно сделать такую штуку из Информера? Подскажите код.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта