3D Gallery

Developer
Nick Mkrtchyan
Size
4,628 Kb
Views
14,168
  1. 3D Gallery Previews
  2. 3D Gallery HTML Codes
  3. 3D Gallery CSS Codes
  4. 3D Gallery JS Codes

How do I make an 3d gallery?

What is a 3d gallery? How do you make a 3d gallery? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

3D Gallery Previews
IQ Test

3D Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="screen">	<div id="command">	<h1>3D Gallery</h1> <h2>on CSS3</h2>	<div id="bar"></div>	</div>	<div id="urlInfo"></div>
</div>
<script src="https://dl-web.dropbox.com/get/1/gallery.js?_subject_uid=242195003&w=AAB0ilDXPFdzxLS1yLJKgbOvAUTCo7zPoJmCYc3SWrdppg"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Gallery - Script Codes CSS Codes

@font-face { font-family: 'Electrolize'; font-style: normal; font-weight: 400; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
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: skyblue outset 3px;
}
#screen .fog { position: absolute; background: #fff; opacity: 0.1; filter: alpha(opacity=10);
}
#command { position:absolute; left: 1em; top: 1em; width: 140px; z-index: 30000; background:#000; border: #000 solid 1em;
}
#bar { position:relative; left: 0em; 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: skyblue;
}
#urlInfo { position: absolute; background: url(images/r.gif) no-repeat 0 4px; visibility: hidden; z-index: 30000; padding-left: 12px; cursor: pointer;
}
h1, h2 { font-family: 'Electrolize';
}

3D Gallery - Script Codes JS Codes

// =============================================================
// ===== 3D gallery experiment =====
// https://codepen.io/Sonick
// https://www.facebook.com/sonick.pk
// ------------------------------------------------- =============================================================
var m3D = function () {	/* ---- private vars ---- */	var diapo = [],	imb,	scr,	bar,	selected,	urlInfo,	imagesPath = "http://web-sonick.zz.mu/images/3D/images/",	camera = {x:0, y:0, z:-650, s:0, fov: 500},	nw = 0,	nh = 0;	/* ==== camera tween methods ==== */	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 constructor ==== */	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) {	/* ---- using canvas in place of images (performance trick) ---- */	this.srcImg = new Image();	this.srcImg.src = imagesPath + img.src;	this.img = document.createElement("canvas");	this.canvas = true;	scr.appendChild(this.img);	} else {	/* ---- normal image ---- */	this.img = document.createElement('img');	this.img.src = imagesPath + img.src;	scr.appendChild(this.img);	}	/* ---- on click event ---- */	this.img.onclick = function () {	if (camera.s) return;	if (this.diapo.isLoaded) {	if (this.diapo.urlActive) {	/* ---- jump hyperlink ---- */	top.location.href = this.diapo.url;	} else {	/* ---- target positions ---- */	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";	}	/* ---- select current img ---- */	this.diapo.but.className = "button selected";	interpolation(false);	selected = this.diapo;	}	}	}	/* ---- command bar buttons ---- */	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 {	/* ---- transparent 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;	}	/* ---- object variables ---- */	this.x = x;	this.y = y;	this.z = z;	this.css = this.img.style;	}	/* ==== main 3D animation ==== */	Diapo.prototype.anim = function () {	if (this.isLoaded) {	/* ---- 3D to 2D projection ---- */	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 rendering ---- */	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 {	/* ---- image is loaded? ---- */	this.isLoaded = this.loading();	}	}	/* ==== onload initialization ==== */	Diapo.prototype.loading = function () {	if ((this.canvas && this.srcImg.complete) || this.img.complete) {	if (this.canvas) {	/* ---- canvas version ---- */	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 {	/* ---- plain image version ---- */	this.w = this.img.width;	this.h = this.img.height;	}	/* ---- button loaded ---- */	this.but.className += " loaded";	return true;	}	return false;	}	////////////////////////////////////////////////////////////////////////////	/* ==== screen dimensions ==== */	var resize = function () {	nw = scr.offsetWidth * .5;	nh = scr.offsetHeight * .5;	}	/* ==== disable interpolation during animation ==== */	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...	}	}	}	/* ==== init script ==== */	var init = function (data) {	/* ---- containers ---- */	scr = document.getElementById("screen");	bar = document.getElementById("bar");	urlInfo = document.getElementById("urlInfo");	resize();	/* ---- loading images ---- */	var i = 0, o,	n = data.length;	while( o = data[i++] ) {	/* ---- images ---- */	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));	/* ---- transparent frames ---- */	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));	}	}	/* ---- start engine ---- */	run();	}	////////////////////////////////////////////////////////////////////////////	/* ==== main loop ==== */	var run = function () {	/* ---- x axis move ---- */	if (camera.tx) {	if (!camera.s) camera.setTarget(camera.x, camera.tx);	var m = camera.tween('x');	if (!m) camera.tx = 0;	/* ---- y axis move ---- */	} else if (camera.ty) {	if (!camera.s) camera.setTarget(camera.y, camera.ty);	var m = camera.tween('y');	if (!m) camera.ty = 0;	/* ---- z axis move ---- */	} else if (camera.tz) {	if (!camera.s) camera.setTarget(camera.z, camera.tz);	var m = camera.tween('z');	if (!m) {	/* ---- animation end ---- */	camera.tz = 0;	interpolation(true);	/* ---- activate hyperlink ---- */	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";	}	}	}	/* ---- anim images ---- */	var i = 0, o;	while( o = diapo[i++] ) o.anim();	/* ---- loop ---- */	setTimeout(run, 32);	}	return {	////////////////////////////////////////////////////////////////////////////	/* ==== initialize script ==== */	init : init	}
}();
3D Gallery - Script Codes
3D Gallery - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4.5
Size 4,628 Kb
Views 14,168
Do you need developer help for 3D Gallery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Mkrtchyan (Sonick) Script Codes
Name
Pure Css3 Menu
3D Menu
Mozilla DevDerby
Preloader
CSS3 Text Animation Effect 2
Canvas Hover Effect
Canvas Starfield
CSS3 Room
CSS3 Text Animation Effect
Canvas Background Effect
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!