Войти Регистрация

jQuery портфолио: красивое портфолио на jQuery + CSS3


В этом уроке мы напишем красивое портфолио, с использованием jQuery, CSS3 и плагина Timeline. Timeline – это jquery плагин, который специализируется на отображении хронологии событий. В этом портфолио вы можете вставлять разные типы медиа данных: твиты, видео, карты, картинки, записи, и после расставлять их в соответствии с датой. Если поработать над дизайном, то получится красивое портфолио, которое будет отображать ваши интересы и работы.

jQuery портфолио

HTML

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

Для начала давайте посмотрим на базовую html разметку страницы:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Timeline Portfolio | Tutorialzine Demo</title>

        <!-- The default timeline stylesheet -->
        <link rel="stylesheet" href="assets/css/timeline.css" />
        <!-- Our customizations to the theme -->
        <link rel="stylesheet" href="assets/css/styles.css" />

		<!-- Google Fonts -->
        <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">
			<!-- Timeline will generate additional markup here -->
		</div>

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
		<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>

В head секции, мы имеем стили плагина – timeline.css и styles.css, которые будут содержать наши дизайнерские решения. В конце страницы мы подключаем jQuery библиотеку, timeline плагин и scripts.js, который будет инициализировать работу плагина.

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

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

			<!-- The divs below are the events of the timeline -->

			<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">
					<!-- Images or other media go here -->
				</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">
					<!-- Images or other media go here -->
				</div>
			</div>

			<!-- More items go here -->
		</div>

        <!-- Next arrow -->
		<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>

        <!-- Previous arrow -->
		<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">

			<!-- The navigation items go here (the tooltips in the bottom)
                one for each of the events -->

			<div class="time">
				<!-- The timeline numbers go here -->
			</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>

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

Красивое портфолио на jQuery

Написание CSS мы будем обсуждать подробно, но немного позже. Единственное, нам придется переписать все указания поверх существующих, но с этим разберемся далее.

jQuery

Чтобы инициализировать плагин, нам нужно вызвать VMM.Timeline() метод:

$(function(){

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

});

Метод init принимает простой аргумент – ресурс данных. Это может быть json файл, как в коде выше, или Google spreadsheet.

Чтобы более подробно узнать, как устроен data.json, скачайте исходники урока. Здесь нет ничего сложно, нет необходимости описывать структуру этого файла.

CSS

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

Все изменения, которые вы увидите ниже, дописаны вручную с помощью 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;
}

CSS3 стиль портфолио

Чтобы создать 3D эффект, в навигационном блоке, нам придется использовать псевдоэлементы :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;
}

Стилизируем zoom-in и 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;
}

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

/* 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;
}

Осталось только открыть timeline.psd, который прикреплен в файле плагина, и изменить цвет некоторых иконок. Я добавил все необходимые файлы в исходники к этому уроку. На этом создание jQuery портфолио со стилизацией на CSS3 завершено!

Что с этим делать?

Вы можете использовать это портфолио не только для отображения последних проектов, но также интересных и важных моментов вашей карьеры. Это как мини дневник вашей жизни! Надеюсь, вам понравился этот урок. Поделитесь своими мыслями в комментариях ниже.


Демо Скачать исходники (0.34 Mb.)


Источник материала ...

Дальше: Скрипт прогресс бара загрузки файлов PHP + jQuery


Дискуссия по теме     4 Комментария 
Добавить комментарий
вадим 03.09.2013 в 22:17
Вместо русского квадратики. как исправить? и как туда материалы добавлять?
Илья 17.04.2012 в 19:27
Охренительно... Вроде бы сколько повидал уже разных красот на JQuery - но такие эффекты меня по прежнему поражают и вдохновляют...
Имя 13.04.2012 в 10:06
Поражаюсь наглости человеческой. А указание источника?
Тарас 13.04.2012 в 13:43
Вы правы, ссылка на источник англоязычного урока указана перед комментариями - "Источник материала ..."
Просмотров: 9645