Қолданылған әдебиеттер тізімі
Мұхамбетжанова С. Т. Компьютерлік дизайн. – Алматы, 2007
Балафанов Н., Бөрібаев Б. Информатикадан 30 сабақ. – Алматы, 2003
Смирнова И. Е., Web-дизайн бастамасы. – Санкт-Петербург, 2003
Гончаров А. Самоучитель HTML. – Москва, 2002
Информатика негіздері журналы, № 5-6 2006 жыл. – Алматы.
Информатика и образование №2 2001 жыл. – Москва.
Левковец, Л. Уроки компьютерной графики. Photoshop CS/, СПб.: Питер, 2005
Миронов Д. «Corel DRAW 12»: Учебный курс. –СПб.: Питер, 2004
Миронов Д. Компьютерная графика в дизайне. –СПб.: Питер, 2004
Мюррей Д.Д., Райпер У. Энциклопедия форматов графических файлов.
Пер. С анг. Киев: ВНҮ, 1997
Панкратов Т. Photoshop7. СПб.: Питер, 2005
Влад Мержевич. Теги HTML
Влад Мержевич css@htmlbook.ru
Web-сайт своими руками - И. Шапошников .: БХВ – Санкт-Петербург, 2000
Омарбекова Ә. С, Кинтонова Ә. Ж., «Веб-технологиялар», 2012
П.Кент. World Wide Web. –М.: Компьютер, 1996
А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 б.
Я.Нильсен. Web-дизайн. Спб. 2002, 187 б.
Под редакцией Комягина В.Б “Создание Web-страниц”
Под редакцией Ю.М.Алексеева “Быстро и легко создаем, программируем, шлифуеми раскручиваем Web-сайт”.
Мазуркеевич .А. Еловой.Д. «PHP настольная книга программиста».
Геннадий Самков. «Сборник рецептов JQuery» Санк-Петербург.2011
Дмитриева М.В. «Javascript быстрый старт» Санк-Петербург.2002.336б.
Бер Бибо,Иегуда Кац «JQuery.Подробное руководство по продвинотому Javascript».
Дэнни Г.,Маикл М. «Javascript библия поль-я»Москва,Питер,Киев 2006
Уроки JQuery : http://www.site-do.ru/js/jquery.php.
JQuery off.page: http://jquery.com.
Javascript уроки: http://learn.javascript.ru.
ДжейсонЛенгсторф. PHP и jQuery дляпрофессионалов = Pro PHP and jQuery. — М.: «Вильямс», 2010. — С. 352. — ISBN 978-5-8459-1693-8
Гарнеев А.Ю. Web–программированиена Java и JavaScript. –СПб.: БХВ–Петербург, 2002. –1040 б.
Макинтош Дж. Java&JavaScript:библиотека программиста.–Спб.: Питер, 2003. –208 б.
http://javascript.internet.com.
Қосымша
JQuery арқылы Web бетінің интерфейсін құру.Басты бет
Басты беттің листингі:fon1/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Басты бет</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});
});
function kelesi_slide()
{
document.location.href="../fon2/index2.html";
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #000 url('images/darkcurtain.jpg') repeat-x;
}
img{
border: none;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.rope{
position: absolute;
top: -40px;
left: 70%;
z-index: 4;
}
</style>
</head>
<body>
<div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div>
<blockquote><img class="logo" onclick="kelesi_slide();" src="images/buildinter.png"/></blockquote><!-- uoh -->
<a class="rope" href="#">
<img src="images/rope.png"/>
</a>
</body>
</html>
JQueryде анимация
JQueryде анимация листингі:fon2/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JQueryде анимация</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
<meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,td,th {
font-family: Lato, Calibri, Arial, sans-serif;
}
</style>
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
</head>
<body><br>
<div class="container demo-2">
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<h2 onClick="animacia_1();">jQueryде анимация.</h2>
<blockquote>
<p>Оқытуды тәжірибесіз жүргізу нәтижесіз болуы ғажап емес, ал тәжірибені оқусыз жүргізу - қауіпті.</p>
<p> </p>
<p><em><strong>Кун Фу Сзы (Конфуций)</strong></em></p>
</blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<h2 onClick="animacia_2();"> jQueryдегі тұрақты эффектілер.</h2>
<blockquote>
<p>Қай істің болсын өнуіне үш шарт бар: ең әуелі – ниет керек, одан соң – күш керек, одан соң – тәртіп керек.</p>
<p><cite><em><strong>МҰХТАР ӘУЕЗОВ</strong></em></cite></p>
</blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<h2 onClick="animacia_3();">jQuery + Ajax.</h2>
<blockquote><p>"Халықтың кемеліне келіп өркендеп өсуі үшін ең алдымен азаттық пен білім қажет".<br>
<br>
</p>
<p><strong><em>ШОҚАН УӘЛИХАНОВ</em></strong></p>
</blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4"></div>
<h2 onClick="animacia_4();"> jQueryдегі Parallax эффектісі.</h2>
<blockquote>
<p>Қазір бой жарыстыратын заман емес,қазір ой жарыстыратын заман.</p>
<p> </p>
<p><strong><em>НҰРСҰЛТАН НАЗАРБАЕВ</em></strong></p>
</blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-5"></div>
<h2 onClick="animacia_5();">jQueryдегі қосымша мүмкіндіктер.</h2>
<blockquote>
<p>Ақылды БОЛУ және жақсы ОҚУ екеуі екі түрлі дүние</p>
<p> </p>
<p><strong><em>СТИВ ДЖОБС</em></strong></p>
</blockquote>
</div>
</div>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
<div class="content-wrapper">
</div>
</div>
<!-- ************************************************-->
<!-- ************************************************-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
// call the plugin's add method
ss.add($items); */
});
function animacia_1()
{
document.location.href = "../fon3-1/index.html";
}
function animacia_2()
{
document.location.href = "../fon4/index.html";
}
function animacia_3()
{
document.location.href = "file:///C:/Bauka/diplom/www/index.html";
}
function animacia_4()
{
document.location.href = "../fon6/index.htm";
}
function animacia_5()
{
document.location.href = "../fon7/index.html";
}
</script>
</body>
</html>
Style.css листингі:
.sl-slider-wrapper {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity : 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-child(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-child(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
background: #fff;
}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
background: #ddd;
}
.sl-slide-vertical .sl-slide-inner {
background: #ccc;
}
Кітапша
беті
Кітапша бетінің листингі:fon3-1/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Кітапша галерея</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/RodeoExtraBold_400.font.js" type="text/javascript"></script>
<script src="cufon/Betina_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,p,.b-counter');
Cufon.replace('.book_wrapper a', {hover:true});
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'RodeoExtraBold'});
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'RodeoExtraBold'});
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'RodeoExtraBold'});
</script>
</head>
<body>
<br><br>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Бет жүктелуде...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<img src="images/1.jpg" alt=""/>
<h1>Как создать анимированный баннер на CSS3</h1>
<p>Совсем недавно наткнулся на интересную зарубежною статью о том, как создать красивый анимированный баннер. Выглядит достаточно красиво и весьма привлекает взгляд пользователей, но следует обратить взор на одно маленько но, что правильное отображение будет только в браузерах которые полностью поддерживают анимации.</p>
</div>
<div>
<img src="images/2.jpg" alt="" />
<h1>Замечательная контактная форма на PHP</h1>
<p>Как известно, контактная форма является прямой линией связи между администратором и пользователем. Но на некоторых сайтах контактная форма используется в виде оставленным администратором почтовым адресом. </p>
</div>
<div>
<imgsrc="images/3.jpg" alt="" />
<h1>Создаем галерею для сайта с помощью PHP</h1>
<p>Галерея картинок является неотъемлемой частью хорошего портфолио, или какого-нибудь фотосайта. В данном уроке мы рассмотрим процесс создания весьма красивой галереи для сайта с помощью php, и использовании "draganddrop". </p>
</div>
<div>
<imgsrc="images/4.jpg" alt="" />
<h1>Бесконечная смена изображений на jQuery</h1>
<p>В данном уроке мы рассмотрим весьма прикольную вещь для сайта, а именно бесконечная смена изображений с помощью jquery, все это будет осуществляться благодаря событию благодаря маленькому плагину. По этому мы разберемся как создать интересный эффект, который будет проявляться при наведении курсора мыши на объект.</p>
</div>
<div>
<img src="images/5.jpg" alt="" />
<h1>Подключение веб-камеры к сайту на jQuery</h1>
<p>Сегодня мы рассмотрим весьма интересную вещь для сайта, а именно как можно подключить веб-камеру к сайту. Как по мне, то данная функция пригодиться тем, кто хочет разнообразить свой сайт, применив при этом ноу-хау. Данный плагин обеспечивает три различных режима для доступа к веб камере с помощью маленького API.</p>
</div>
<div>
<img src="images/6.jpg" alt="" />
<h1>Создаем индикатор процесса с помощью CSS3</h1>
<p>Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. </p>
</div>
<div>
<imgsrc="images/7.jpg" alt="" />
<h1>Как создать красивое меню для сайта</h1>
<p>Меню для сайта является, пожалуй, самой важной частью в структуре любого сайта, а красивое меню позволяет осуществлять навигацию по сайту при этом радовать взор посетителей ресурса. В сегодняшнем уроке мы расскажем как сделать красивое меню.</p>
</div>
<div>
<img src="images/8.jpg" alt="" />
<h1>Создание выпадающей формы авторизации</h1>
<p>Авторизация и регистрация на сайте является весьма щепетильной темой, так как порой данная форма занимает много места на сайте, и хотелось как бы освободить место при этом оставив все на своих местах. В этом уроке мы рассмотрим как создать замечательную выпадающую форму авторизации для сайта.</p>
<a href="../fon3-2/index.html" target="_blank" class="demo">Демонстрация</a>
</div>
<div>
</div>
</div>
</div>
<div>
<span class="reference">
</span>
</div>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
var $mybook = $('#mybook');
var $bttn_next = $('#next_page_button');
var $bttn_prev = $('#prev_page_button');
var $loading = $('#loading');
var $mybook_images = $mybook.find('img');
var cnt_images = $mybook_images.length;
varloaded = 0;
//Предварительно загружаем все страницы в книжке,
//а затем вызываем плагин Booklet
$mybook_images.each(function(){
var $img = $(this);
var source = $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null, // Имя буклета, которое выводится в заголовке документа
width: 800, // Ширина контейнера
height: 500, // Высота контейнера
speed: 600, // Скорость перехода между страницами
direction: 'LTR', // Направление организации контента, по умолчанию LTR (lefttoright - слева направо), может быть RTL (справа налево)
startingPage: 0, // Индекс страницы, которая будет выводиться первой
easing: 'easeInOutQuad', // Метод сглаживания для завершения трансформации
easeIn: 'easeInQuad', // Метод сглаживания для первой половины трансформации
easeOut: 'easeOutQuad', // Метод сглаживания для второй половины трансформации
closed: true, // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец
closedFrontTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы
closedFrontChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы
closedBackTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы
closedBackChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы
covers: false, // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно)
pagePadding: 10, // Отступ для обертки каждой страницы
pageNumbers: true, // Выводит номер на каждой странице
hovers: false, // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы
overlays: false, // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши
tabs: false, // Добавляет закладки вдоль верха страницы
tabWidth: 60, // Определяем ширину закладок
tabHeight: 20, // Определяем высоту закладок
arrows: false, // Добавляем стрелки поверх кромок книжки
cursor: 'pointer', // Установка css для курсора для боковой области книжки
hash: false, // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash'
keyboard: true, // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая)
next: $bttn_next, // Селектор для элемента, который используется как выключатель перехода к следующей странице
prev: $bttn_prev, // Селектор для элемента, который используется как выключатель перехода к предыдущей странице
menu: null, // Селектор элемента, который используется как область меню, требуется для 'pageSelector'
pageSelector: false, // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu'
chapterSelector: false, // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu'
shadows: true, // Выводить тени при анимации страниц
shadowTopFwdWidth: 166, // Ширина тени для верха анимации вперед
shadowTopBackWidth: 166, // Ширина тени для верха анимации назад
shadowBtmWidth: 50, // Ширина тени для низа анимации
before: function(){}, // Возвратная функция, которая вызывается перед выполенением каждой анимации
after: function(){} // Возвратная функция, которая вызывается после выполнения каждой анимации
});
Cufon.refresh();
}
}).attr('src',source);
});
});
</script>
</body>
</html>
Сақина тәрізді клиент меню
Сақина тәрізді клиент меню листингі: fon3-2/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Клиент меню</title>
<link rel="stylesheet" media="screen" type="text/css" href="style.css">
<script type="text/javascript" src="http://seoromin.com.ua/design/js/partner.js"></script>
<!--[if IE]>
<style>
.circle { background: transparent url('images/circleIE.gif') no-repeat top left; }
.description ul a { font-weight: normal; }
</style>
<![endif]-->
</head>
<body>
<br><br>
<div id="wrapper">
<div id="content">
<div class="wrapper">
<div id="images" class="images">
<img id="image_about" src="images/1.png" alt="1" style="display:block;" />
<img id="image_portfolio" src="images/2.png" alt="2" />
<img id="image_contact" src="images/3.png" alt="3" />
</div>
<div class="circleBig">
<div id="menu" class="menu">
<a id="about" class="about" href="#">Мен жайында </a>
<a id="portfolio" class="portfolio" href="#">Портфолио</a>
<a id="contact" class="contact" href="#">Контакты</a>
</div>
</div>
</div>
<div id="circle_about" class="circle">
<div class="description">
<ul>
<li><a href="#">Информация</a></li>
<li><a href="#">Мои работы</a></li>
<li><a href="#">Мое резюме</a></li>
</ul>
</div>
</div>
<div id="circle_portfolio" class="circle">
<div class="description">
<div class="thumbs">
<a href="#"><img src="thumbs/1.jpg" alt="" /></a>
<a href="#"><img src="thumbs/2.jpg" alt="" /></a>
<a href="#"><img src="thumbs/3.jpg" alt="" /></a>
<a href="#"><img src="thumbs/4.jpg" alt="" /></a>
<a href="#"><img src="thumbs/5.jpg" alt="" /></a>
<a href="#"><img src="thumbs/6.jpg" alt="" /></a>
<a href="#"><img src="thumbs/7.jpg" alt="" /></a>
<a href="#"><img src="thumbs/8.jpg" alt="" /></a>
<a href="#"><img src="thumbs/9.jpg" alt="" /></a>
</div>
</div>
</div>
<div id="circle_contact" class="circle">
<div class="description">
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="../fon3-3/index.html">Next</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.path.js"></script>
<script type="text/javascript">
$(function() {
$('#menu > a').mouseover( function() {
var $this = $(this);
move( $this, 800, 1 );
});
function move( $elem, speed, turns )
{
var id = $elem.attr('id');
var $circle = $('#circle_'+id);
if( $circle.css('opacity') == 1 ) return;
/* меняем изображение */
$('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);
$('#content .circle').each( function(i)
{
var $theCircle = $(this);
if( $theCircle.css('opacity') == 1 )
$theCircle.stop().animate({
path : new $.path.arc({
center : [409,359],
radius : 257,
start : 65,
end : -110,
dir : -1
}), opacity: '0'
},1500);
else
$theCircle.stop().animate({opacity: '0'},200);
});
var end = 65 - 360 * (turns-1);
$circle.stop().animate({
path : new $.path.arc({
center : [409,359],
radius : 257,
start : 180,
end : end,
dir : -1
}), opacity: '1'
},speed);
}
});
</script>
</div>
<div class="partnerGeneralBox"></div>
</body>
</html>
Меню
Меню листингі:file:fon3-3/index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Меню</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<br><br>
<div class="container">
<div align=center>
<a class="green goodbutton" href="index.html">Демо 1</a>
<a class="green goodbutton" href="index2.html">Демо 2</a>
<a class="green goodbutton" href="index3.html">Демо 3</a>
<a class="green goodbutton" href="index4.html">Демо 4</a>
</div>
<div class="support-note"><!-- проверяем браузер с помощью modernizr -->
<!--span class="no-cssanimations">CSS анимации не поддреживаются в вашем браузере</span-->
<span class="no-csstransforms">CSS трансформации не поддреживаются в вашем браузере</span>
<!--span class="no-csstransforms3d">CSS 3D трансформации не поддреживаются в вашем браузере</span-->
<span class="no-csstransitions">CSS переходы не поддреживаются в вашем браузере</span>
<span class="note-ie">Извините, но данная страница предназначена для современных браузеров.</span>
</div>
</header>
<section class="main">
<div id="sb-container" class="sb-container">
<div>
<span class="sb-icon icon-cog"></span>
<h4><span>Настройка</span></h4>
</div>
<div>
<span class="sb-icon icon-flight"></span>
<h4><span>Режим пользователя</span></h4>
</div>
<div>
<span class="sb-icon icon-eye"></span>
<h4><span>Показать все</span></h4>
</div>
<div>
<span class="sb-icon icon-install"></span>
<h4><span>Установка</span></h4>
</div>
<div>
<span class="sb-icon icon-bag"></span>
<h4><span>Виджеты</span></h4>
</div>
<div>
<span class="sb-icon icon-globe"></span>
<h4><span>Соединение</span></h4>
</div>
<div>
<span class="sb-icon icon-picture"></span>
<h4><span>Изображения</span></h4>
</div>
<div>
<span class="sb-icon icon-video"></span>
<h4><span>Видео</span></h4>
</div>
<div>
<span class="sb-icon icon-download"></span>
<h4><span>Загрузить</span></h4>
</div>
<div>
<span class="sb-icon icon-mobile"></span>
<h4><span>Темы</span></h4>
</div>
<div>
<span class="sb-icon icon-camera"></span>
<h4><span>Приложения</span></h4>
</div>
<div>
<h4 onClick="nextx();"><span>Next</span></h4>
<h5><span>Выбираем закладку</span></h5>
</div>
</div><!-- sb-container -->
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.swatchbook.js"></script>
<script type="text/javascript">
$(function() {
$( '#sb-container' ).swatchbook();
});
function nextx()
{
document.location.href="../fon3-4/index.html";
}
</script>
</body>
</html>
Анимацияланған фон
Анимацияланған фон листингі: fon3-4/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Анимацияланған фон</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link media="screen" href="demo/styles/demo.css" type="text/css" rel="stylesheet" />
</head>
<body>
<a href="../fon3-5/index.html" class="go-bottom" rel="nofollow" ><div class="name">Next</a>
</div>
<canvas id="flying-bubbles"></canvas>
<script src="js/index.js"></script>
</body>
</html>
Index.js листингі:
window.onload = function() {
//Create canvas and initialize it's context
var canvas = document.getElementById("flying-bubbles");
var ctx = canvas.getContext("2d");
//Set the dimensions of canvas equal to the window's dimensions
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//Create an array of circles
var circles = [];
for(var i = 0; i < 20; i++ ){
circles.push(new create_circle());
}
//Function to create circles with different positions and velocities
function create_circle() {
//Random Position
this.x = Math.random()*W;
this.y = Math.random()*H;
//Random Velocities
this.vx = 0.1+Math.random()*1;
this.vy = -this.vx;
//Random Radius
this.r = 10 + Math.random()*50;
}
//Function to draw the background
function draw() {
//Create the gradient
var grad = ctx.createLinearGradient(0, 0, W, H);
grad.addColorStop(0, 'rgb(19, 105, 168)');
grad.addColorStop(1, 'rgb(0, 0, 0)');
//Fill the canvas with the gradient
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = grad;
ctx.fillRect(0,0,W,H);
//Fill the canvas with the circles
for(var j = 0; j < circles.length; j++) {
var c = circles[j];
//Draw the circle and it with the blur grad
ctx.beginPath();
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = grad;
ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
ctx.fill();
//Lets use the velocity now
c.x += c.vx;
c.y += c.vy;
//To prevent the circles from moving out of the canvas
if(c.x < -50) c.x = W+50;
if(c.y < -50) c.y = H+50;
if(c.x > W+50) c.x = -50;
if(c.y > H+50) c.y = -50;
}
}
setInterval(draw, 25);
}
Миниатюралар торы листингі:
.og-grid {
list-style: none;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.og-grid li {
display: inline-block;
margin: 10px 5px 0 5px;
vertical-align: top;
height: 250px;
}
.og-grid li > a,
.og-grid li > a img {
border: none;
outline: none;
display: block;
position: relative;
}
.og-grid li.og-expanded > a::after {
top: auto;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 15px;
left: 50%;
margin: -20px 0 0 -15px;
}
.og-expander {
position: absolute;
background: #ddd;
top: auto;
left: 0;
width: 100%;
margin-top: 10px;
text-align: left;
height: 0;
overflow: hidden;
}
.og-expander-inner {
padding: 50px 30px;
height: 100%;
}
.og-close {
position: absolute;
width: 40px;
height: 40px;
top: 20px;
right: 20px;
cursor: pointer;
}
.og-close::before,
.og-close::after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 1px;
background: #888;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.og-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.og-close:hover::before,
.og-close:hover::after {
background: #333;
}
.og-fullimg,
.og-details {
width: 50%;
float: left;
height: 100%;
overflow: hidden;
position: relative;
}
.og-details {
padding: 0 40px 0 20px;
}
.og-fullimg {
text-align: center;
}
.og-fullimg img {
display: inline-block;
max-height: 100%;
max-width: 100%;
}
.og-details h3 {
font-weight: 300;
font-size: 52px;
padding: 40px 0 10px;
margin-bottom: 10px;
}
.og-details p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #999;
}
.og-details a {
font-weight: 700;
font-size: 16px;
color: #333;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 20px;
border: 3px solid #333;
display: inline-block;
margin: 30px 0 0;
outline: none;
}
.og-details a::before {
content: '\2192';
display: inline-block;
margin-right: 10px;
}
.og-details a:hover {
border-color: #999;
color: #999;
}
.og-loading {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ddd;
box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
-webkit-animation: loader 0.5s infinite ease-in-out both;
-moz-animation: loader 0.5s infinite ease-in-out both;
animation: loader 0.5s infinite ease-in-out both;
}
@-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@media screen and (max-width: 830px) {
.og-expander h3 { font-size: 32px; }
.og-expander p { font-size: 13px; }
.og-expander a { font-size: 12px; }
}
@media screen and (max-width: 650px) {
.og-fullimg { display: none; }
.og-details { float: none; width: 100%; }
}