Супер фишка: web дизайн, собирающийся на глазах!

/ 👁 2924

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

демо версия урока

Сразу хочу сказать, что в этом уроке я не буду рисовать дизайн в Photoshop, потому что самое главное это показать Вам то, как написать код JQuery для web-дизайна собирающегося на глазах и если Вы поймете принцип работы, то сможете применить его к чему захотите. Кроме этого мы рассмотрим как можно поворачивать элементы с помощью кода и в этом нам поможет CSS3.

 

Итак, делаем web-дизайн, собирающийся на глазах!

1. Создаем новый документ html5 и назовем его corner.html. Сразу создадим файл таблицы стилей, сохраним его под названием corner.css и подключим его к нашему html документу.

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<link rel="stylesheet" type="text/css" href="corner.css">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

 

2. Давайте начнем дизайн с окантовки в левом верхнем углу страницы. Для этого я сделала в Photoshop небольшой фрагмент бэкграунда (Вы можете найти его в дополнительных материалах), который будет повторяться. Мы создадим два тега div фиксированного размера, который будет представлять из себя небольшую полоску. Один из тегов нам нужно будет развернуть на 90 градусов для того, чтобы получился нужный угол. Итак, между тегами body пропишите следующий код:

<div id="line1"></div>
<div id="line2"></div>

 

А теперь перейдем в файл css-стилей и пропишем стили для наших полосок:

#line1, #line2{width:10px; height:200px; background:url(bg.png) repeat;}
#line2{margin-top:-95px;}
#line1{-moz-transform: rotate(90deg); /* Для Firefox */
    -ms-transform: rotate(90deg); /* Для IE */
    -webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(90deg); /* Для Opera */
    transform: rotate(90deg);
	margin-top:-100px;
	margin-left:100px;
}

 

Если мы запустим html файл в браузере, то увидим такую картину:
Дизайн окантовки

3. С помощью стилей мы уже развернули один элемент на 90 градусов. Давайте продолжим создавать наш интерактивный web-дизайн. Сейчас мы напишем наш первый заголовок, который тоже будет развернутым и кроме всего прочего он будет вылетать сверху. Давайте ниже наших линий в html файле пропишем див с текстом:

<div id="one"><h1>Make<br>Your Creative Page</h1></div>

 

Теперь мы придадим ему первоначальные стили. Чтобы он вылетал нам нужно сделать так, чтобы сначала его на странице не было видно. Для этого мы установим его позицию так, чтобы он выходил за пределы web страницы. Кроме того, мы сделаем его прозрачным, а также установим ему угол разворота:

#one{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-moz-transform: rotate(-35deg); /* Для Firefox */
    -ms-transform: rotate(-35deg); /* Для IE */
    -webkit-transform: rotate(-35deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(-35deg); /* Для Opera */
    transform: rotate(-35deg);
	
	width:300px;
	position:absolute;
	top:-240px;
	left:645px;
	opacity:0;
	border-bottom:5px ridge #000;
}

 

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

4. Под первым дивом у нас будет находиться некоторый текст. Давайте пропишем его в новом диве в html документе:

<div id="two"><p class="two">This is my creative page..and where is your?</p></div>

 

И аналогично первому заголовку пропишем стили:

#two{
	-webkit-transition:all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-0-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-moz-transform: rotate(-35deg); /* Для Firefox */
    -ms-transform: rotate(-35deg); /* Для IE */
    -webkit-transform: rotate(-35deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(-35deg); /* Для Opera */
    transform: rotate(-35deg);
	width:300px;
	position:absolute;
	top:760px;
	left:760px;
	opacity:0;
}

 

Кроме этого наш текст находится в теге p, у которого есть класс two. Нужно прописать стили и для этого класса:

.two{margin:0; 
font-size:16px; 
font-family:Arial, Helvetica, sans-serif; 
color:#036; 
font-weight:600;}

 

5. Пропишем код меню для нашей страницы. Для этого в html файле пишем следующий код:

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contacts</a></li>
</ul>

 

И опять при помощи css-стилей придадим нужный дизайн для меню навигации и спрячем его:

ul#menu{list-style:none; 
margin:0; padding:0; 
margin-left:500px; 
position:absolute; 
width:500px; 
top:-240px;
border-bottom:5px ridge #000;}
ul#menu li{display:inline; 
font-size:20px; 
font-family:Arial, Helvetica, sans-serif; 
font-weight:600;
 margin-left:70px;}
ul#menu li a{text-decoration:none; color:#333;}

 

6. Последний див, который мы напишем для web страницы – это див с контентом:

<div id="content">
<p class="two">Текст Вашего контента. В моем примере текст из Loren Ipsum. Вы же вставляйте тот, который нужен Вам.
 </p>
</div>

 

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

#content{ width:500px; margin-left:500px; opacity:0; margin-top:-50px;}

 

7. Вот и все. Теперь осталось подключить библиотеку JQuery и прописать необходимый код. Вы можете подключить библиотеку JQuery так, как показано ниже, либо скачать ее с сайта jquery.com , расположив в папке со скриптами и подключив оттуда. Подключаем библиотеку между тегами head:

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 

8. Теперь давайте займемся анимацией элементов нашего web сайта. Для начала, после подключения библиотеки напишите открывающий и закрывающий теги script. Между ними будет располагаться весь наш код:

<script> Здесь будет наш код анимации элементов!</script>

 

9. Начнем мы пожалуй с нашего первого заголовка. Итак, когда документ будет загружен начнет выполняться следующий код. Мы задаем интервал равный одной секунде, через которую начнет выполняться функция one. Функция one изменяет непрозрачность элемента и его положение на экране в течении 1000 миллисекунд (или одной секунды), после этого будет запускаться функция two, которую мы пропишем дальше и которая будет определять поведение второго элемента.

$(document).ready(function() {
var interval1 = setInterval(one, 1000);
function one(){
	clearInterval(interval1);
	$('#one').animate({opacity:1, left:'80',top:'100'},1000, 'linear', function(){
		two();
	});
}


});

 

Если Вы прописали этот код и проверили в браузере, то Вы должны были увидеть, как вылетает сверху повернутая на -35 градусов наша надпись.

Анимация первого элемента

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

<script>
$(document).ready(function() {
var interval1 = setInterval(one, 1000);
function one(){
	clearInterval(interval1);
	$('#one').animate({opacity:1, left:'80',top:'100'},1000, 'linear', function(){
		two();
	});
}
function two(){
	$('#two').animate({opacity:1, left:'130', top:'220'}, 1000, 'linear', function(){
	menu();
	});
}

function menu(){
	$('#menu').animate({ top:'100'}, 1500, 'linear', function(){
	content();
	});
}
function content(){
	$('#content').animate({ opacity:'1'}, 2000, 'linear', function(){
	
	});
}

});


</script>

 

Анимация второго элемента

Анимация появления меню

Дизайн сайта, собирающийся на глазах

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

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

Leave a Reply