Индивидуальный раздел
Нестандартное использование JavaScript при создании сложных динамических эффектов.
Разработка кроссбраузерного, кроссплатформенного приложеня(пк,планшеты и т.д.) Рабочий примерВведение
На основе Javascript Api разработанного Gerard Ferrandez реализовано приложения которое преобразует картинку в мозаику, а так же дает возможность манипуляции с полученными ячейками( добавления текста, группировка, навигация). Тематика созданного приложения StarCraft2 Wings Of Liberty. Проект использовался в некоммерческих целях('for fun').
HTML
<div id="screen"></div> <div id="htmlBank"> <div id="txt1"> <div class="content"> . . . </div> </div> <div id="txt2"> <div class="content"> . . . </div> </div> <div id="txt3"> <div class="content"> . . . </div> </div> <div id="txt4"> <div class="content"> . . . </div> </div> <div id="txt41"> <div class="content"> . . . </div> </div> <div id="thumb1"> <img src="images/thu_event04.jpg"> </div> <div id="thumb2"> <img src="images/thu_event05.jpg"> </div> <div id="thumb3"> <img src="images/thu_event02.jpg"> </div> </div>
CSS
html {
overflow: hidden;
}
body {
width: 100%;
height: 100%;
background:#FFF;
position: absolute;
padding: 0px;
padding: 0px;
}
#screen {
position: absolute;
width: 891px;
height: 550px;
left: 50%;
top: 50%;
padding-left:-445px;
padding-top:-275px;
background: #111;
overflow: hidden;
}
#screen .wrapper {
position: absolute;
background: #333;
font-size: 0px;
overflow: hidden;
}
#screen .txt {
position: absolute;
font-size: 14px;
color: #fff;
font-family: arial;
overflow: hidden;
}
#screen .menu {
position: absolute;
font-size: 12px;
color: #fff;
font-family: arial;
overflow: hidden;
cursor: pointer;
}
#screen .menubackgroundcolor {
opacity: 0.7;
filter: alpha(opacity=70);
}
#screen .content {
position:absolute;
left: 2%;
top: 2%;
width: 96%;
height: 96%;
overflow: hidden;
}
#screen .content img {
float: left;
padding-right: 6px;
padding-bottom: 0px;
}
#screen h1 {
position:relative;
top: 20px;
width: 100%;
text-align: center;
letter-spacing: 0px;
font-size: 1.8em;
}
#screen .menucontent {
position: absolute;
width: 100%;
text-align: center;
font-size: 128px;
letter-spacing: 0px;
font-weight: bold;
top: -10px;
}
#screen .submenucontent {
position: absolute;
width: 100%;
height: 100%;
}
#screen .submenutitle {
position: absolute;
font-size: 40px;
font-weight: bold;
}
#screen .submenu {
position: absolute;
width: 100%;
top: 55px;
}
#screen .submenuline {
position: relative;
height: 18px;
font-size: 14px;
padding-top: 1px;
}
#screen .lineover {
background: #fff;
color: #0064a0;
font-weight: bold;
}
#loader {
position:absolute;
left: 50%;
top: 50%;
width: 50px;
padding-left: -25px;
padding-top: -14px;
text-align: center;
font-family: arial;
font-size: 24px;
font-weight: bold;
color: #fff;
background: #FFF;
outline: #111 solid 3px;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 1FFF;
}
#htmlBank {
display: none;
visibility: hidden;
}
JavaScript
setTimeout(function ()
{
dp.init(
{
containerID: "screen", // Элемент, в который будет выводиться информация
wrapperX: 6, // Размерность сетки по оси X
wrapperY: 4, // Размерность сетки по оси Y
imagesPath: "images/", // Папка с изображениями
timeout: 153,
flash: { r: 255, g: 255, b: 255}, // Цвет вспышки
fadein: // Параметры вывода ячейки
{
alpha: 100,
alphaTarget: 0,
step: -5,
endFlash: 80,
nextCell: 90,
nextStep: 0,
},
fadeout: // Параметры скрытия ячейки
{
alpha: 0,
alphaTarget: 60,
step: 5,
endFlash: 20,
nextCell: 10,
nextStep: 40,
},
menu: [ // Настройки пунктов меню
{
html: '1', // Код будет выводиться на экран
target: 0 // Целевая страница
},
{
html: '2',
target: 1,
submenu: { // Настройки подменю
title: 'Состав', // Название
lines: [
{
html: 'Разведка', // Название пункта
text: [{
html: '', //Выводимый текст
x: 0, y: 2, w: 5, h: 1 // Параметры вывода текста
},
{
id: "thumb1", // Выводимый элемент
x: 2, y: 0, w: 1, h: 4 // Параметры вывода элемента
}]
},
{
html: 'Планирование',
text: [{
html: ' ',
x: 4, y: 0, w: 1, h: 4
},
{
id: "thumb2",
x: 0, y: 2, w: 5, h: 1
}]
},
{
html: 'Управление',
text: [{
html: ' ',
x: 2, y: 0, w: 1, h: 4
},
{
html: ' ',
x: 4, y: 0, w: 1, h: 4
},
{
id: "thumb3",
x: 2, y: 1, w: 3, h: 2
}]
},
{
html: 'Командный центр',
fullImage: "event06.jpg" // Выводим изображение на весь экран
}
]
}
},
{
html: '3',
target: 2
},
{
html: '4',
target: 3
}
],
page: [ // Описание страниц
{ // Страница 1
backgroundImage: "event01.jpg", // Фоновое изображение
menuBackgroundColor: { r: 0, g: 100, b: 160 }, // Цвет фона пунктов меню
text: [ // Выводим текст
{
html: ' ',
x: 0, y: 2, w: 2, h: 2
},
{
id: "txt1", // Указываем используемы элемент
x: 4, y: 1, w: 2, h: 2 // Параметры вывода
},
{
html: '<h1>Крейсер</h1>',
x: 4, y: 3, w: 1, h: 1
}
],
menuTarget: [ // Расположение пунктов меню на странице
{ x: 0, y: 0 },
{ x: 1, y: 1 },
{ x: 0, y: 3 },
{ x: 5, y: 3 }
]
},
{ // Страница 2
backgroundImage: "event02.jpg",
menuBackgroundColor: { r: 102, g: 102, b: 51 },
text: [{
html: ' ',
x: 5, y: 3, w: 1, h: 1
},
{
html: ' ',
x: 0, y: 3, w: 1, h: 1
},
{
id: "txt2",
x: 0, y: 0, w: 3, h: 2
},
{
html: '<h1>Интегратор</h1>',
x: 5, y: 0, w: 1, h: 1
}
],
menuTarget: [
{ x: 3, y: 0 },
{ x: 1, y: 3 },
{ x: 3, y: 3 },
{ x: 5, y: 2 }
]
},
{ // Страница 3
backgroundImage: "event03.jpg",
menuBackgroundColor: { r: 160, g: 100, b: 0 },
text: [{
html: ' ',
x: 0, y: 0, w: 1, h: 1
},
{
html: ' ',
x: 5, y: 0, w: 1, h: 1
},
{
id: "txt3",
x: 2, y: 1, w: 3, h: 2
},
{
html: '<h1>Яхта</h1>',
x: 5, y: 2, w: 1, h: 1
}
],
menuTarget: [
{ x: 1, y: 0 },
{ x: 1, y: 2 },
{ x: 5, y: 3 },
{ x: 5, y: 1 }
]
},
{ // Страница 4
backgroundImage: "event04.jpg",
menuBackgroundColor: { r: 0, g: 150, b: 150 },
text: [{
id: "txt41",
x: 0, y: 3, w: 2, h: 1
},
{
id: "txt4",
x: 4, y: 2, w: 2, h: 2
},
{
html: '<h1>Флот</h1>',
x: 3, y: 3, w: 1, h: 1
}
],
menuTarget: [
{ x: 2, y: 0 },
{ x: 1, y: 0 },
{ x: 2, y: 3 },
{ x: 5, y: 0 }
]
}]
});
}, 500);
Заключение
На основе JS Api Gerard Ferrandez мы можем легко получить сайт за короткий промежуток времени. Так же возможно использования для реализации презентаций, плюсами является кросспалтформеность (на примере iOS – нет необходимости установки стороннего ПО, нет необходимости использования flash- технологий, а так же удобная навигация для сенсорных экранов)