Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Шаблоны » Разные страницы » Эксклюзивное портфолио

Эксклюзивное портфолио

Опубликовал: artCreative™
Категория: Разные страницы
Дата:Суббота, 09 Февраля 2013 в 12:20

0 голосов

Замечательное решение для сайтов портфолио, работает на html и jQuery...

Timeline является jQuery плагином, который специализируется на показ ряда событий. Вы можете вставлять заметки, карты, видео и многое другое. С некоторой хитростью дизайна этот плагин сделает идеальное портфолио.

1. Создадим HTML
Во первых, давайте посмотрим на основной макет страницы:

Код

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>Портфолио | Web4ik.Ru</title>

  
  <link rel="stylesheet" href="assets/css/timeline.css" />
  
  <link rel="stylesheet" href="assets/css/styles.css" />

  
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />

  
  </head>

  <body>

  <div id="timeline">
  
  </div>

  
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="assets/js/timeline-min.js"></script>
  <script src="assets/js/script.js"></script>

  </body>
</html>

В главной части, у нас есть стиль - timeline.css, и styles.css, который сделает портфолио намного краше.
В нижней части есть библиотека JQuery, плагин script.js, который инициализирует портфолио.
Когда мы вызываем плагин, он будет искать DIV на странице с идентификатором в шкале. Внутри него, он будет вставлять все разметки:

Код

<div class="container main" id="timeline">
  <div class="feature slider" style="overflow-y: hidden;">
  <div class="slider-container-mask slider-container slider-item-container">

  

  <div class="slider-item content">
  <div class="text container">

  <h2 class="start">Johnny B Goode</h2>
  <p><em><span class="c1">Designer</span> & <span class=
  "c2">Developer</span></em></p>

  </div>

  <div class="media media-wrapper media-container">
  
  </div>
  </div>

  <div class="slider-item content content-container">
  <div class="text container">

  <h2 class="date">March 2009</h2>
  <h3>My first experiment in time-lapse photography</h3>
  <p>Nature at its finest in this video.</p>

  </div>

  <div class="media media-wrapper media-container">
  
  </div>
  </div>

  
  </div>

  
  <div class="nav-next nav-container">
  <div class="icon"></div>
  <div class="date">March 2010</div>
  <div class="title">Logo Design for a pet shop</div>
  </div>

  
  <div class="nav-previous nav-container">
  <div class="icon"></div>
  <div class="date">July 2009</div>
  <div class="title">Another time-lapse experiment</div>
  </div>
  </div>

  <div class="navigation">

  

  <div class="time">
  
  </div>
  </div>

  <div class="timenav-background">
  <div class="timenav-line" style="left: 633px;"></div>

  <div class="timenav-interval-background top-highlight"></div>
  </div>

  <div class="toolbar" style="top: 27px;">
  <div class="back-home icon" title="Return to Title"></div>
  <div class="zoom-in icon" title="Expand Timeline"></div>
  <div class="zoom-out icon" data-original-title="Contract Timeline"></div>
  </div>
  </div>
</div>

2. jQuery
Для инициализации плагина, мы должны вызвать VMM.Timeline ():

Код

$(function(){

var timeline = new VMM.Timeline();
timeline.init("data.json");

});

Метод инициализации принимает один аргумент - источник данных.
3. CSS

Код

#timeline{
  background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
  background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
  background: url('../img/timeline_bg.jpg') repeat;
  border-top:none;
}

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

Код

#timeline div.navigation:before{
  position:absolute;
  content:'';
  height:40px;
  width:100%;
  left:0;
  top:-40px;
  background: url('../img/timeline_bg.jpg') repeat;
}

#timeline div.navigation:after{
  position:absolute;
  content:'';
  height:10px;
  width:100%;
  left:0;
  top:-40px;
  background:repeat-x;

  background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
  background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
  background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
  background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
  background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

Затем мы добавляем темный фон в Timeline.

Код

#timeline div.timenav-background{
  background-color:rgba(0,0,0,0.4) !important;

}

#timeline .navigation .timenav-background .timenav-interval-background{
  background:none;
}

#timeline .top-highlight{
  background-color:transparent !important;
}

Стили Zoom-out:

Код

#timeline .toolbar{
  border:none !important;
  background-color: #202222 !important;
}

#timeline .toolbar div{
  border:none !important;
}

Нижняя числовая шкала:

Код

#timeline .navigation .timenav .time .time-interval-minor .minor{
margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
color: #CCCCCC;
}

Стрелки назад и вперед:

Код

.slider .nav-previous .icon {
  background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
  font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
  background: url("timeline.png") no-repeat scroll 72px -221px transparent;
  width: 70px !important;
}

.slider .nav-next:hover .icon{
  position:relative;
  right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
  color: #666;
  cursor: pointer;
}

#timeline .thumbnail {
  border: medium none;
}

Экран загрузки:

Код

#timeline .feedback {
  background-color: #222222;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
  border:none;
}

#timeline .feedback div{
  color: #AAAAAA;
  font-size: 14px !important;
  font-weight: normal;
}

Затем мы перейдем к слайдам

Код

#timeline .slider-item h2,
#timeline .slider-item h3{
  font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
  color:#fff;
}

#timeline .slider-item p{
  font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
  border:none;
}

Наконец, мы будем настраивать внешний вид главной страницы.

Код

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
  font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
  background:rgba(0,0,0,0.3);
  white-space: nowrap;
  padding:10px 5px 5px 20px;
  position:relative;
  right:-60px;
  z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
  font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
  background:rgba(0,0,0,0.3);
  white-space: nowrap;
  padding:5px 20px;
  position:relative;
  right:-60px;
  z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
  color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
  color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
  left: -30px;
  position: relative;
  z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
  text-align: center;
}

Готово!

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на ДЕМО

Ссылка на материал

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1235 | Скачали: 3 « Назад

Теги материала: Отдельные страницы, на, jquery, css3, портфолио

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Шаблоны » Разные страницы » Эксклюзивное портфолио

Эксклюзивное портфолио

Комментарии пользователей