Автор

Портфолио в виде хроники на jQuery

Портфолио в виде хроники на jQuery


 

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

 

ДЕМО
ИСХОДНИКИ

 

Для того чтобы создать такое портфолио нам понадобится плагин Timeline, предназначенный для отображения хронологии событий. Вы можете использовать любые типы медиа-данных, включая твиты, видео, карты, а также ассоциировать их с датами. Посредством некоторых махинаций в дизайне, вы можете перевоплотить свой сайт в превосходное портфолио.


Шаг 1. HTML

Timeline по умолчанию предлагается в шаблоном оформления в светлых тонах. Он отлично подходит в большинстве случаев. Тем не менее, для нашего примера нам необходимо переделать этот шаблон в темный, чтобы он лучше соответствовал нашему дизайну. Для начала давайте рассмотрим основную структуру страницы:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Создаем портфолио в виде хроники на jQuery | Демонстрация для сайта s-sd.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" />

 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 </head>
 <body>

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

 

В головной секции у нас будут указаны файлы оформления плагина – timeline.css и styles.css, в них будет размещена вся информация о стилях. В подвале у нас будет размещена jQuery-библиотека, плагин и файл script.js, посредством которого плагин будет запускаться.

Когда мы вызываем плагин, он осуществляет поиск div’а на вашей странице, которому задан ID плагина. Внутри этого div’а плагин размещает разметку для отображения хроники:

{
 "timeline":
 {
 "headline":" Создаем Портфолио!",
 "type":"default",
 "startDate":"2009,1",
 "text":"<i><span class='c1'> Rudebox </span> <span class='c2'>Designer & Developer</span></i>",
 "asset":
 {
 "media":"assets/img/notes.png",
 "credit":"",
 "caption":""
 },
 "date": [
 {
 "startDate":"2009,2",
 "headline":"Мои первые эксперименты в типографии",
 "text":"Природа во всей красе в этом видео.",
 "asset":
 {
 "media":"#",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2009,5",
 "headline":"Редизайн портфолио",
 "text":"",
 "asset":
 {
 "media":"assets/img/shots/sidebar_s3.jpg",
 "credit":"<a href='#'>Автор Chris Brauckmuller</a>",
 "caption":""
 }
 },
 {
 "startDate":"2009,7",
 "headline":"Другой эксперимент",
 "text":"",
 "asset":
 {
 "media":"#",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2009,10",
 "headline":"Развитые Gmail клиента",
 "text":"",
 "asset":
 {
 "media":"assets/img/shots/shot_1298590416.jpg",
 "credit":"<a href='#>Автор Justalab</a>",
 "caption":""
 }
 },
 {
 "startDate":"2010,3",
 "headline":"Дизайн логотипа для зоомагазина",
 "text":"",
 "asset":
 {
 "media":"assets/img/shots/pet___you.jpg",
 "credit":"<a href='#'>Автор Nikita Lebedev</a>",
 "caption":""
 }
 },
 {
 "startDate":"2010,4",
 "headline":"Развитые IPad приложения",
 "text":"Это был вызов для создания дизайна за неделю.",
 "asset":
 {
 "media":"assets/img/shots/proto_v4_decoupe_2.jpg",
 "credit":"<a href='#'>Автор Jonathan Moreira</a>",
 "caption":""
 }
 },
 {
 "startDate":"2010,8",
 "headline":"Иллюстрация для крупного клиента.",
 "text":"",
 "asset":
 {
 "media":"assets/img/shots/chameleon.jpg",
 "credit":"<a href='#'>Хамелеон от Майка</a>",
 "caption":""
 }
 },
 {
 "startDate":"2010,12",
 "headline":"Реклама от Volkswagen",
 "text":"Created the website for their new advertising campaign.",
 "asset":
 {
 "media":"#",
 "credit":"",
 "caption":""
 }
 }
 ]
 }
}

 

Так как мы собираемся отредактировать CSS-стили плагина, вышеприведенный фрагмент поможет вам лучше понять суть оформления. Заметьте, что мы не собираемся разрабатывать стили для плагина с нуля, мы просто перепишем некоторые из правил в нашем собственном css-файле. Это даст нам преимущество перед последующими обновлениями и исправлениями.

Написание CSS-кода по одной лишь структуре верстки – это довольно сложно, учитывая еще тот факт, что наши правила должны служить заменой тем, что уде указаны в timeline.css. К счастью, существует более легкий способ, о котором мы расскажем вам далее в нашем руководстве.

 

Шаг 2.  jQuery

Для инициализации плагина нам, после полной загрузки документа, нужно вызвать метод VMM.Timeline() :

$(function(){

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

});

 

Метод init требует лишь одного аргумента – источника данных. В роли источника может служить как json-файл, как указано выше, так и Google spreadsheet. Для получения более подробной информации о поддерживаемых источниках данных вы можете ознакомиться с документацией на официальном сайте плагина, либо просмотреть файл data.json в архиве, предложенном в данном руководстве.

 

Шаг 3. CSS

Мы используем HTML Inspector в Firebug для того, чтобы выбрать правильные селекторы элементов, которые мы хотим оформить. Во вкладке HTML можно запросто увидеть, какие правила были применены к каждому элементу в файле timeline.css. Для того чтобы переписать их, мы копируем те же самые селекторы в style.css, которые и будут задействованы в нашем примере. Правда, в некоторых моментах необходимо прибегать к использованию отметки !important, что значительно облегчает рабочий процесс.

Первое, что нам нужно сделать в styles.css, после стилизации самой страницы, это изменить фоны хроники:

#timeline{
 background:none;
}

/* Отдельные события в слайдере */
.slider .slider-container-mask .slider-container{
 background:none;
}

/* Настройка пользовательских фоновых изображений */
#timeline div.navigation{
 background: url('../img/timeline_bg.jpg') repeat;
 border-top:none;
}

 

Для создания трехмерного эффекта навигации в хронике, нам потребуются дополнительные элементы. Но плагин Timeline не включает их в разметку. Простое решение заключается в использовании псевдо-элементов :before / :after. Элемент :after представляет собой более темную верхнюю часть, и здесь используется линейная градация для усиления эффекта.

#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 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;
}

 

Позже мы стилизуем кнопки приближения и уменьшения на панели инструментов:

#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;
}

 

Наконец, мы оформляем внешний вид главной страницы. Мы используем nth-child(1) для определения только первого пункта слайдера, который содержит название и описание хроники, которая была определена в качестве JSON-источника данных.

#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;
}

 

На этом наш портфолио завершено!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Портфолио в виде хроники на jQuery

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


Портфолио в виде хроники на jQuery

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


Портфолио в виде хроники на jQuery

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


Портфолио в виде хроники на jQuery

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


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close