3D галерея

Описание

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

Галерея использует средства только JavaScript, без подключения каких-либо библиотек.

HTML

<div id="screen">
	<div id="command">
		<h1>3D галерея</h1>
		<div id="bar"></div>
	</div>
	<div id="urlInfo"></div>
</div>


Элемент divscreen содержит всю галерею. Элемент divcommand содержит подпись и панель управления галереей divbar. Элемент divurlInfo будет выводить на ссылку, привязанную к изображению.

CSS

html {
 overflow: hidden;
}
body {
 position: absolute;
 margin: 0px;
 padding: 0px;
 background: #eee;
 width: 100%;
 height: 100%;
 color: #fff;
 font-family: arial;
 font-size: 0.8em;
}
#screen {
 position: absolute;
 width: 100%;
 height: 100%;
 background: #000;
 overflow: hidden;
}
#screen img, canvas { 
 position: absolute;
 left: -9999px;
 cursor: pointer;
       image-rendering: optimizeSpeed;

}
#screen .href {
 border: #FFF dotted 1px;
}
#screen .fog { 
 position: absolute;
 background: #fff;
 opacity: 0.1;
 filter: alpha(opacity=10);
}
#command {
 position:absolute;
 left: 1em;
 top: 1em;
 width: 130px;
 z-index: 30000;
 background:#000;
 border: #000 solid 1em;
}
#bar {
 position:relative;
 left: 1em;
 top: 1em;
 height: 160px;
}
#bar .button { 
 position: absolute;
 background: #222;
 width: 20px;
 height: 20px;
 cursor: pointer;
}
#bar .loaded { 
 background: #666;
}
#bar .viewed { 
 background: #fff;
}
#bar .selected { 
 background: #f00;
}
#urlInfo {
 position: absolute;
 background: url(images/r.gif) no-repeat 0 4px;
 visibility: hidden;
 z-index: 30000;
 padding-left: 12px;
 cursor: pointer;
}

 

 

JavaScript

Скрипт:

var m3D = function () {
	/* ---- Переменные ---- */
	var diapo = [],
		imb,
		scr,
		bar,
		selected,
		urlInfo,
		imagesPath = "images/",
		camera = {x:0, y:0, z:-650, s:0, fov: 500},
		nw = 0,
		nh = 0;
	/* ==== метод сдвоенной камеры ==== */
	camera.setTarget = function (c0, t1, p) {
		if (Math.abs(t1 - c0) > .1) {
			camera.s = 1;
			camera.p = 0;
			camera.d = t1 - c0;
			if (p) {
				camera.d *= 2;
				camera.p = 9;
			}
		}
	}
	camera.tween = function (v) {
		if (camera.s != 0) {
			camera.p += camera.s;
			camera[v] += camera.d * camera.p * .01;
			if (camera.p == 10) camera.s = -1;
			else if (camera.p == 0) camera.s = 0;
		}
		return camera.s;
	}
	/* ==== Конструктор diapo ==== */
	var Diapo = function (n, img, x, y, z) {
		if (img) {
			this.url = img.url;
			this.title = img.title;
			this.color = img.color;
			this.isLoaded = false;
			if (document.createElement("canvas").getContext) {
				/* ---- используем элемент canvas вместо изображения (трюк для производительности) ---- */
				this.srcImg = new Image();
				this.srcImg.src = imagesPath + img.src;
				this.img = document.createElement("canvas");
				this.canvas = true;
				scr.appendChild(this.img);
			} else {
				/* ---- обычное изображение ---- */
				this.img = document.createElement('img');
				this.img.src = imagesPath + img.src;
				scr.appendChild(this.img);
			}
			/* ---- обработка событие onclick ---- */
			this.img.onclick = function () {
				if (camera.s) return;
				if (this.diapo.isLoaded) {
					if (this.diapo.urlActive) {
						/* ---- гиперссылка для перехода ---- */
						top.location.href = this.diapo.url;
					} else {
						/* ---- позиционирование цели ---- */
						camera.tz = this.diapo.z - camera.fov;
						camera.tx = this.diapo.x;
						camera.ty = this.diapo.y;
						/* ---- disable previously selected img ---- */
						if (selected) {
							selected.but.className = "button viewed";
							selected.img.className = "";
							selected.img.style.cursor = "pointer";
							selected.urlActive = false;
							urlInfo.style.visibility = "hidden";
						}
						/* ---- выбираем текущее изображение ---- */
						this.diapo.but.className = "button selected";
						interpolation(false);
						selected = this.diapo;
					}
				}
			}
			/* ---- кнопки панели управления ---- */
			this.but = document.createElement('div');
			this.but.className = "button";
			bar.appendChild(this.but);
			this.but.diapo = this;
			this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 4)) + 'px';
			this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';
			this.but.onclick = this.img.onclick;
			imb = this.img;
			this.img.diapo = this;
			this.zi = 25000;
		} else {
			/* ---- прозрачный элемент div ---- */
			this.img = document.createElement('div');
			this.isLoaded = true;
			this.img.className = "fog";
			scr.appendChild(this.img);
			this.w = 300;
			this.h = 300;
			this.zi = 15000;
		}
		/* ---- перменные объекта ---- */
		this.x = x;
		this.y = y;
		this.z = z;
		this.css = this.img.style;
	}
	/* ==== основная 3D анимация ==== */
	Diapo.prototype.anim = function () {
		if (this.isLoaded) {
			/* ---- от 3D к 2D проекции ---- */
			var x = this.x - camera.x;
			var y = this.y - camera.y;
			var z = this.z - camera.z;
			if (z < 20) z += 5000;
			var p = camera.fov / z;
			var w = this.w * p;
			var h = this.h * p;
			/* ---- рисуем HTML  ---- */
			this.css.left   = Math.round(nw + x * p - w * .5) + 'px';
			this.css.top    = Math.round(nh + y * p - h * .5) + 'px';  
			this.css.width  = Math.round(w) + 'px';
			this.css.height = Math.round(h) + 'px';
			this.css.zIndex = this.zi - Math.round(z);
		} else {
			/* ---- изображение загружено? ---- */
			this.isLoaded = this.loading();
		}
	}
	/* ==== инициализация при загрузке ==== */
	Diapo.prototype.loading = function () {
		if ((this.canvas && this.srcImg.complete) || this.img.complete) {
			if (this.canvas) {
				/* ---- версия с элементом canvas ---- */
				this.w = this.srcImg.width;
				this.h = this.srcImg.height;
				this.img.width = this.w;
				this.img.height = this.h;
				var context = this.img.getContext("2d");
				context.drawImage(this.srcImg, 0, 0, this.w, this.h);
			} else {
				/* ---- версия с обычным изображением ---- */
				this.w = this.img.width;
				this.h = this.img.height;
			}
			/* ---- кнопка загружена ---- */
			this.but.className += " loaded";
			return true;
		}
		return false;
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== размеры экрана ==== */
	var resize = function () {
		nw = scr.offsetWidth * .5;
		nh = scr.offsetHeight * .5;
	}
	/* ==== отключаем интерполяцию во время анимации ==== */
	var interpolation = function (bicubic) {
		var i = 0, o;
		while( o = diapo[i++] ) {
			if (o.but) {
				o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
				o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
			}
		}
	}
	/* ==== скрипт инициализации ==== */
	var init = function (data) {
		/* ---- контейнеры ---- */
		scr = document.getElementById("screen");
		bar = document.getElementById("bar");
		urlInfo = document.getElementById("urlInfo");
		resize();
		/* ---- загрузка изображений ---- */
		var i = 0, 
		    o,
			n = data.length;
		while( o = data[i++] ) {
			/* ---- изображения ---- */
			var x = 1000 * ((i % 4) - 1.5);
			var y = Math.round(Math.random() * 4000) - 2000;
			var z = i * (5000 / n);
			diapo.push( new Diapo(i - 1, o, x, y, z));
			/* ---- прозрачные рамки ---- */
			var k = diapo.length - 1;
			for (var j = 0; j < 3; j++) {
				var x = Math.round(Math.random() * 4000) - 2000;
				var y = Math.round(Math.random() * 4000) - 2000;
				diapo.push( new Diapo(k, null, x, y, z + 100));
			}
		}
		/* ---- запуск движка ---- */
		run();
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== основной цикл ==== */
	var run = function () {
		/* ---- пермещение по оси x ---- */
		if (camera.tx) {

			if (!camera.s) camera.setTarget(camera.x, camera.tx);
			var m = camera.tween('x');
			if (!m) camera.tx = 0;
		/* ---- перемещение по оси y ---- */
		} else if (camera.ty) {
			if (!camera.s) camera.setTarget(camera.y, camera.ty); 
			var m = camera.tween('y');
			if (!m) camera.ty = 0;
		/* ---- перемещение по оси z ---- */
		} else if (camera.tz) {
			if (!camera.s) camera.setTarget(camera.z, camera.tz);
			var m = camera.tween('z');
			if (!m) {
				/* ---- конец анимации ---- */
				camera.tz = 0;
				interpolation(true);
				/* ---- активируем гиперссылку ---- */
				if (selected.url) {
					selected.img.style.cursor = "pointer";
					selected.urlActive = true;
					selected.img.className = "href";
					urlInfo.diapo = selected;
					urlInfo.onclick = selected.img.onclick;
					urlInfo.innerHTML = selected.title || selected.url;
					urlInfo.style.visibility = "visible";
					urlInfo.style.color = selected.color || "#fff";
					urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
					urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
				} else {
					selected.img.style.cursor = "default";
				}
			}
		}
		/* ---- анимация изображения ---- */
		var i = 0, o;
		while( o = diapo[i++] ) o.anim();
		/* ---- цикл ---- */
		setTimeout(run, 32);
	}
	return {
		////////////////////////////////////////////////////////////////////////////
		/* ==== скрипт инициализации ==== */
		init : init
	}
}();


Инициализация скрипта осуществляется следующим образом:

setTimeout(function() {
	m3D.init(
		[ 
			{ src: '46eae50db6.jpg', url: 'http://ruseller.com', title: 'Переход на сайт RUSELLER.COM', color: '#fff' },
			{ src: '1ef7ea6559.jpg' },
			{ src: '8fe86226ff.jpg' },
			{ src: '69833ed09a.jpg' },
			{ src: 'fe00425d0a.jpg' },
			{ src: 'b05b0c6962.jpg' },
			{ src: '6a884d6ef2.jpg' },
			{ src: 'ed57bce8c4.jpg' },
			{ src: '94da4fb185.jpg' },
			{ src: 'd04505fe96.jpg' },
			{ src: '46eae50db6.jpg', url: 'http://ruseller.com', title: 'Переход на сайт RUSELLER.COM', color: '#fff' },
			{ src: '1ef7ea6559.jpg' },
			{ src: '8fe86226ff.jpg' },
			{ src: '69833ed09a.jpg' },
			{ src: 'fe00425d0a.jpg' },
			{ src: 'b05b0c6962.jpg' },
			{ src: '6a884d6ef2.jpg' },
			{ src: 'ed57bce8c4.jpg' },
			{ src: '94da4fb185.jpg' },
			{ src: 'd04505fe96.jpg' },
			{ src: '46eae50db6.jpg', url: 'http://ruseller.com', title: 'Переход на сайт RUSELLER.COM', color: '#fff' },
			{ src: '1ef7ea6559.jpg' },
			{ src: '8fe86226ff.jpg' },
			{ src: '69833ed09a.jpg' },
		]
	);
}, 500);

 

 

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/MYiRdVJCNWE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

3D галерея | | 2012-06-25 16:21:24 | | Статьи Web-мастеру | | Описание В данном уроке приводится код 3D галереи которая может стать отличным инструментом для представления портфолио работ. Изображения размещаются в папке  images  и при  запуске скрипта  их надо | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: