En esta ocasión vamos a ver 4 tabla de contenidos con un efecto de entrada de contenido diferente para cada tabla

Datos:  Clic en Demo para ver como trabaja esta web


                                                          Demo

<div id='wrapper'>

<div id='tabs'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

<div id='tabs2'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

<div id='tabs3'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

<div id='tabs4'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

</div>

html {
  background-image: -webkit-linear-gradient(right, #23313f 0%, #2c3e50 50%, #23313f 100%);
  background-image: linear-gradient(to left, #23313f 0%, #2c3e50 50%, #23313f 100%);
  font-family: "Lato", sans-serif;
}

a:active, a:focus {
  outline: expression(hideFocus='true');
}

p {
  margin-bottom: 20px;
}

#wrapper {
  width: 100%;
  margin: auto;
  margin-top: 100px;
}

#tabs, #tabs2, #tabs3, #tabs4, #tabs5 {
  width: 500px;
  margin: 0 auto;
  margin-bottom: 40px;
}

#tabs li, #tabs2 li, #tabs3 li, #tabs4 li, #tabs5 li {
  list-style: none;
  float: left;
  margin-right: 0px;
}

#tabs li a, #tabs2 li a, #tabs3 li a, #tabs4 li a, #tabs5 li a {
  display: block;
  padding: 17px 30px;
  background: #34495E;
  border-left: 0.3em groove #e74c3c;
  border-right: 0.3em ridge #e74c3c;
  text-decoration: none;
  color: #fff;
  border-top: 0.3em solid #E74C3C;
}

#tabs li a:hover, #tabs2 li a:hover, #tabs3 li a:hover, #tabs4 li a:hover, #tabs5 li a:hover {
  background: #2C3E50;
  border-left: 0.3em groove #3498DB;
  border-right: 0.3em ridge #3498DB;
  border-top: 0.3em solid #3498DB;
}

#tabs_container {
  border: 0.3em solid #1ABC9C;
  padding: 40px;
  overflow: hidden;
  top: -20px;
  position: relative;
  background: #34495E;
  color: #fff;
  border-right: 0.3em ridge #1ABC9C;
  border-left: 0.3em groove #1ABC9C;
}

#tabs_container div {
  margin-right: 40px;
}

.transition {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.make_transist {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.hidescale {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  opacity: 0;
}

.showscale {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.hideleft {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.showleft {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.hidescaleup {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.showscaleup {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.hideflip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: rotatey(-90deg) scale(1.1);
  -ms-transform: rotatey(-90deg) scale(1.1);
  transform: rotatey(-90deg) scale(1.1);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.showflip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transform: rotatey(0deg) scale(1);
  -ms-transform: rotatey(0deg) scale(1);
  transform: rotatey(0deg) scale(1);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.tabulous_active {
  background: #23313F !important;
  border-right: 0.3em ridge #1ABC9C !important;
  border-left: 0.3em groove #1ABC9C !important;
  border-top: 0.3em solid #1ABC9C !important;
  border-bottom: 0.3em solid #1ABC9C !important;
  color: #fff !important;
}

.tabulousclear {
  display: block;
  clear: both;
}

 $(document).ready(function ($) {

    $('#tabs').tabulous({
        effect: 'scale'
    });

    $('#tabs2').tabulous({
        effect: 'slideLeft'
    });

    $('#tabs3').tabulous({
        effect: 'scaleUp'
    });

    $('#tabs4').tabulous({
        effect: 'flip'
    });
});

;
(function ($, window, document, undefined) {

    var pluginName = "tabulous",
        defaults = {
            effect: 'scale'
        };

    // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

    function Plugin(element, options) {
        this.element = element;
        this.$elem = $(this.element);
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function () {

            var links = this.$elem.find('a');
            var firstchild = this.$elem.find('li:first-child').find('a');
            var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

            if (this.options.effect == 'scale') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
            } else if (this.options.effect == 'slideLeft') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
            } else if (this.options.effect == 'scaleUp') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
            } else if (this.options.effect == 'flip') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
            }

            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('div:first').height();

            var alldivs = this.$elem.find('div:first').find('div');

            alldivs.css({
                'position': 'absolute',
                'top': '40px'
            });

            firstdiv.css('height', firstdivheight + 'px');

            firstchild.addClass('tabulous_active');

            links.bind('click', {
                myOptions: this.options
            }, function (e) {
                e.preventDefault();

                var $options = e.data.myOptions;
                var effect = $options.effect;

                var mythis = $(this);
                var thisform = mythis.parent().parent().parent();
                var thislink = mythis.attr('href');


                firstdiv.addClass('transition');

                links.removeClass('tabulous_active');
                mythis.addClass('tabulous_active');
                thisdivwidth = thisform.find('div' + thislink).height();

                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showscale');
                } else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showleft');
                } else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showscaleup');
                } else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showflip');
                }


                firstdiv.css('height', thisdivwidth + 'px');
            });
        },

        yourOtherFunction: function (el, options) {
            // some logic
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            new Plugin(this, options);
        });
    };

})(jQuery, window, document);

En esta ocasión vamos a ver un impresionante cubo de imagenes donde selecionas con un click de raton y sin soltar mueves por la pantalla luego le das un click en la imagen selecionada para ampliarla y otro click para reducirla espero k os guste tanto como ami

Datos:  Clic en Demo para ver como trabaja esta web




                                                          Demo

----------------------------------------



 <!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CodePen - you see #canvas version</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <!--
What is real? How do you define real? If you're talking about what you can feel, what you can smell, what you can taste and see ... then real is simply ... electrical signals interpreted by your brain!
-->

  <script src="js/index.js"></script>

</body>

</html>



html {
overflow: hidden;
-ms-touch-action: none;
-ms-content-zooming: none;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
background: #000;

}



"use strict";

(function () {
// ======== private vars ========
var faces = [], camera;
var target, targetold, faceOver, isMoving;
var globalRX = 0, globalRY = 0;
//
// ===== pointer library =====
//
var canvas = {};
(function() {
this.elem = document.createElement("canvas");
document.body.appendChild(this.elem);
this.ctx = this.elem.getContext("2d");
this.width = 0;
this.height = 0;
this.resize = function () {
this.width  = this.elem.width  = +this.elem.offsetWidth;
this.height = this.elem.height = +this.elem.offsetHeight;
}
this.elem.onselectstart = function() { return false; }
this.elem.ondragstart   = function() { return false; }
window.addEventListener('resize', this.resize.bind(this), false);
this.resize();
this.cursor = "";
this.setCursor = function (type) {
if (type !== this.cursor) {
this.cursor = type;
this.elem.style.cursor = type;
}
}
this.pointer = {
x: 0,
y: 0,
dx: 0,
dy: 0,
touchMode: false,
center: function (s) {
this.dx *= s;
this.dy *= s;
endX = endY = 0;
},
sweeping: false
}
var started = false, startX = 0, startY = 0, endX = 0, endY = 0;
this.addEvent = function (e, fn) {
for (var i = 0, events = e.split(','); i < events.length; i++) {
this.elem.addEventListener(events[i], fn.bind(this.pointer), false );
}
}
this.addEvent("mousemove,touchmove", function (e) {
e.preventDefault();
this.touchMode = e.targetTouches;
var pointer = this.touchMode ? this.touchMode[0] : e;
this.x = pointer.clientX;
this.y = pointer.clientY;
if (started) {
this.sweeping = true;
this.dx = endX - (this.x - startX);
this.dy = endY - (this.y - startY);
}
if (this.move) this.move(e);
});
this.addEvent("mousedown,touchstart", function (e) {
e.preventDefault();
this.touchMode = e.targetTouches;
var pointer = this.touchMode ? this.touchMode[0] : e;
startX = this.x = pointer.clientX;
startY = this.y = pointer.clientY;
started = true;
if (this.click) this.click(e);
setTimeout(function () {
if (!started && Math.abs(startX - this.x) < 11 && Math.abs(startY - this.y) < 11) {
if (this.tap) this.tap(e);
}
}.bind(this), 200);
});
this.addEvent("mouseup,touchend,touchcancel", function (e) {
e.preventDefault();
endX = this.dx;
endY = this.dy;
started = false;
this.sweeping = false;
});
}).apply(canvas);
var ctx = canvas.ctx;
var pointer = canvas.pointer;
//
// perspective projection
//
var transform = {};
// ==== image constructor ====
transform.Image = function (imgSrc, lev) {
this.canvas        = canvas;
this.ctx           = ctx;
this.pointer       = pointer;
this.texture       = new Image();
this.texture.src   = imgSrc;
this.lev           = lev || 1;
this.isLoading     = true;
this.points        = new Float64Array(6 * (this.lev + 1) * (this.lev + 1));
this.triangles     = new Float64Array(14 * this.lev * this.lev);
}
// ---- init triangles ----
transform.triangle = function (t, p, k, p0, p1, p2) {
t[k + 0] = p0;
t[k + 1] = p1;
t[k + 2] = p2;
t[k + 3] = p[p0 + 2] * (p[p2 + 3] - p[p1 + 3]) - p[p1 + 2] * p[p2 + 3] + p[p2 + 2] * p[p1 + 3] + (p[p1 + 2] - p[p2 + 2]) * p[p0 + 3];
t[k + 4] = p[p1 + 3] - p[p2 + 3];
t[k + 5] = p[p1 + 2] - p[p2 + 2];
t[k + 6] = p[p2 + 2] * p[p1 + 3] - p[p1 + 2] * p[p2 + 3];
}
// ==== loading prototype ====
transform.Image.prototype.loading = function () {
if (this.texture.complete && this.texture.width) {
this.isLoading = false;
// ---- create points ----
var k = 0;
for (var i = 0; i <= this.lev; i++) {
for (var j = 0; j <= this.lev; j++) {
var tx = (i * (this.texture.width / this.lev));
var ty = (j * (this.texture.height / this.lev));
this.points[k * 6 + 2] = tx;
this.points[k * 6 + 3] = ty;
this.points[k * 6 + 4] = tx / this.texture.width;
this.points[k * 6 + 5] = ty / this.texture.height;
k++;
}
}
var lev = this.lev + 1;
k = 0;
for (var i = 0; i < this.lev; i++) {
for (var j = 0; j < this.lev; j++) {
// ---- up ----
transform.triangle(this.triangles, this.points, k,
6 * (j + i * lev),
6 * (j + i * lev + 1),
6 * (j + (i + 1) * lev)
);
// ---- down ----
k += 7;
transform.triangle(this.triangles, this.points, k,
6 * (j + (i + 1) * lev + 1),
6 * (j + (i + 1) * lev),
6 * (j + i * lev + 1)
);
k += 7;
}
}
}
}
// ==== transform prototype ====
transform.Image.prototype.transform = function (pt0, pt1, pt2, pt3) {
// ---- loading ----
if (this.isLoading) {
this.loading();
return false;
} else {
// ---- project points ----
var p = this.points, t = this.triangles;
for (var i = 0, len = p.length; i < len; i += 6) {
var mx = pt0.X + p[i + 5] * (pt3.X - pt0.X);
var my = pt0.Y + p[i + 5] * (pt3.Y - pt0.Y);
p[i + 0] = (mx + p[i + 4] * (pt1.X + p[i + 5] * (pt2.X - pt1.X) - mx));
p[i + 1] = (my + p[i + 4] * (pt1.Y + p[i + 5] * (pt2.Y - pt1.Y) - my));
}
// ---- draw triangles ----
for (var i = 0, len = t.length; i < len; i += 7) {
var p0 = t[i + 0];
var p1 = t[i + 1];
var p2 = t[i + 2];
// ---- centroid ----
var xc = (p[p0 + 0] + p[p1 + 0] + p[p2 + 0]) / 3;
var yc = (p[p0 + 1] + p[p1 + 1] + p[p2 + 1]) / 3;
var dx, dy, d, adx, ady;
this.ctx.save();
this.ctx.beginPath();
// ---- draw non anti-aliased triangle ----
dx = xc - p[p0 + 0], adx = dx < 0 ? -dx : dx;
dy = yc - p[p0 + 1], ady = dy < 0 ? -dy : dy;
d = adx > ady ? adx : ady;
this.ctx.moveTo(p[p0 + 0] - 2 * (dx / d), p[p0 + 1] - 2 * (dy / d));
dx = xc - p[p1 + 0], adx = dx < 0 ? -dx : dx;
dy = yc - p[p1 + 1], ady = dy < 0 ? -dy : dy;
d = adx > ady ? adx : ady;
this.ctx.lineTo(p[p1 + 0] - 2 * (dx / d), p[p1 + 1] - 2 * (dy / d));
dx = xc - p[p2 + 0], adx = dx < 0 ? -dx : dx;
dy = yc - p[p2 + 1], ady = dy < 0 ? -dy : dy;
d = adx > ady ? adx : ady;
this.ctx.lineTo(p[p2 + 0] - 2 * (dx / d), p[p2 + 1] - 2 * (dy / d));
// ---- clip ----
this.ctx.clip();
// ---- texture mapping ----
this.ctx.transform(
-(p[p0 + 3] * (p[p2 + 0] - p[p1 + 0]) -  p[p1 + 3] * p[p2 + 0]  + p[p2 + 3] *  p[p1 + 0] + t[i + 4] * p[p0 + 0]) / t[i + 3], // m11
(p[p1 + 3] *  p[p2 + 1] + p[p0 + 3]  * (p[p1 + 1] - p[p2 + 1]) - p[p2 + 3] *  p[p1 + 1] - t[i + 4] * p[p0 + 1]) / t[i + 3], // m12
(p[p0 + 2] * (p[p2 + 0] - p[p1 + 0]) -  p[p1 + 2] * p[p2 + 0]  + p[p2 + 2] *  p[p1 + 0] + t[i + 5] * p[p0 + 0]) / t[i + 3], // m21
-(p[p1 + 2] *  p[p2 + 1] + p[p0 + 2]  * (p[p1 + 1] - p[p2 + 1]) - p[p2 + 2] *  p[p1 + 1] - t[i + 5] * p[p0 + 1]) / t[i + 3], // m22
(p[p0 + 2] * (p[p2 + 3] * p[p1 + 0]  -  p[p1 + 3] * p[p2 + 0]) + p[p0 + 3] * (p[p1 + 2] *  p[p2 + 0] - p[p2 + 2]  * p[p1 + 0]) + t[i + 6] * p[p0 + 0]) / t[i + 3], // dx
(p[p0 + 2] * (p[p2 + 3] * p[p1 + 1]  -  p[p1 + 3] * p[p2 + 1]) + p[p0 + 3] * (p[p1 + 2] *  p[p2 + 1] - p[p2 + 2]  * p[p1 + 1]) + t[i + 6] * p[p0 + 1]) / t[i + 3]  // dy
);
this.ctx.drawImage(this.texture, 0, 0);
this.ctx.restore();
}
return true;
}
}
// ==== isPointerInside prototype ====
transform.Image.prototype.isPointerInside = function (x, y, p0, p1, p2, p3) {
this.ctx.beginPath();
this.ctx.moveTo(p0.X, p0.Y);
this.ctx.lineTo(p1.X, p1.Y);
this.ctx.lineTo(p2.X, p2.Y);
this.ctx.lineTo(p3.X, p3.Y);
this.ctx.closePath();
return this.ctx.isPointInPath(x, y);
}
//
// ===== tweens engine =====
//
var tweens = {};
(function() {
var tweens = [];
var proto = {
normalPI: function () {
if (Math.abs(this.target - this.value) > Math.PI) {
if (this.target < this.value)  this.value -= 2 * Math.PI;
else this.value += 2 * Math.PI;
}
},
setTarget: function (target, speedMod) {
this.speedMod = (speedMod) ? speedMod : 1;
this.target   = target;
if (this.isAngle) {
this.target = this.target % (2 * Math.PI);
this.normalPI();
}
if (this.running && this.oldTarget === target) return;
this.oldTarget = target;
this.running   = true;
this.prog      = 0;
this.from      = this.value;
this.dist      = -(this.target - this.from) * 0.5;
},
ease: function () {
if (!this.running) return;
var s = this.speedMod * this.steps;
if (this.prog++ < s) {
this.value = this.dist * (Math.cos(Math.PI * (this.prog / s)) - 1) + this.from;
if (this.isAngle) this.normalPI();
} else {
this.running = false;
this.value = this.target;
}
}
}
this.add = function (steps, initValue, initValueTarget, isAngle) {
var tween = Object.create(proto);
tween.target   = initValueTarget || 0;
tween.value    = initValue  || 0;
tween.steps    = steps;
tween.isAngle  = isAngle || false;
tween.speedMod = 1;
tween.setTarget(tween.target);
tweens.push(tween);
return tween;
}
this.iterate = function () {
for (var i = 0, len = tweens.length; i < len; i++) {
tweens[i].ease();
}
}
}).apply(tweens);
// ======== points constructor ========
var Point = function (parentFace, point, rotate) {
this.face = parentFace;
this.x = point[0];
this.y = point[1];
this.z = point[2];
this.scale = 0;
this.X = 0;
this.Y = 0;
if (rotate) {
this.x += rotate.x;
this.y += rotate.y;
this.z += rotate.z;
}
return this;
}
// ======== points projection ========
Point.prototype.project = function () {
// ---- 3D rotation ----
var p = camera.rotate(
this.x - camera.x.value,
this.y - camera.y.value,
this.z - camera.z.value
)
// ---- distance to the camera ----
if (this.face) {
var z = p.z + camera.focalLength;
var distance = Math.sqrt(p.x * p.x + p.y * p.y + z * z);
if (distance > this.face.distance) this.face.distance = distance;
}
// --- 2D projection ----
this.scale = (camera.focalLength / (p.z + camera.focalLength)) * camera.zoom.value;
this.X = (canvas.width  * 0.5) + (p.x * this.scale);
this.Y = (canvas.height * 0.5) + (p.y * this.scale);
}
// ======= faces constructor ========
var Face = function (path, f) {
this.f = f;
var w  = f.w * 0.5;
var h  = f.h * 0.5;
var ax = f.rx * Math.PI * 0.5;
var ay = f.ry * Math.PI * 0.5;
this.locked   = false;
this.hidden   = f.hidden || null;
this.visible  = true;
this.distance = 0;
// ---- center point ----
this.pc = new Point(this, [f.x, f.y, f.z]);
// ---- 3D rotation ----
var rotate = function (x, y, z, ax, ay) {
var tz = z * Math.cos(ay) + x * Math.sin(ay);
var ty = y * Math.cos(ax) + tz * Math.sin(ax);
return {
x: x * Math.cos(ay) - z * Math.sin(ay),
y: ty,
z: tz * Math.cos(ax) - y * Math.sin(ax)
}
}
// ---- quad points ----
this.p0 = new Point(this, [f.x, f.y, f.z], rotate(-w, -h, 0, ax, ay));
this.p1 = new Point(this, [f.x, f.y, f.z], rotate( w, -h, 0, ax, ay));
this.p2 = new Point(this, [f.x, f.y, f.z], rotate( w,  h, 0, ax, ay));
this.p3 = new Point(this, [f.x, f.y, f.z], rotate(-w,  h, 0, ax, ay));
// ---- corner points ----
this.c0 = new Point(false, [f.x, f.y, f.z], rotate(-w, -h, -15, ax, ay));
this.c1 = new Point(false, [f.x, f.y, f.z], rotate( w, -h, -15, ax, ay));
this.c2 = new Point(false, [f.x, f.y, f.z], rotate( w,  h, -15, ax, ay));
this.c3 = new Point(false, [f.x, f.y, f.z], rotate(-w,  h, -15, ax, ay));
// ---- target angle ----
var r = rotate(ax, ay, 0, ax, ay, 0);
this.ax = r.x + Math.PI / 2;
this.ay = r.y + Math.PI / 2;
// ---- create 3D image ----
this.img = new transform.Image(path + f.src, f.tl || 2);
}
// ======== face projection ========
Face.prototype.project = function () {
this.visible = true;
this.distance = -99999;
// ---- points projection ----
this.p0.project();
this.p1.project();
this.p2.project();
this.p3.project();
// ---- back face culling ----
if (!(
((this.p1.Y - this.p0.Y) / (this.p1.X - this.p0.X) -
(this.p2.Y - this.p0.Y) / (this.p2.X - this.p0.X) < 0) ^
(this.p0.X <= this.p1.X == this.p0.X > this.p2.X)
) || this.hidden) {
this.visible = false;
this.distance = -99999;
if (!this.locked && this.hidden === false) this.hidden = true;
}
}
// ======== face border ========
Face.prototype.border = function () {
this.c0.project();
this.c1.project();
this.c2.project();
this.c3.project();
this.pc.project();
ctx.beginPath();
ctx.moveTo(this.c0.X, this.c0.Y);
ctx.lineTo(this.c1.X, this.c1.Y);
ctx.lineTo(this.c2.X, this.c2.Y);
ctx.lineTo(this.c3.X, this.c3.Y);
ctx.closePath();
ctx.lineWidth = this.pc.scale * this.f.w / 30;
ctx.strokeStyle = "rgb(255,255,255)";
ctx.lineJoin = "round";
ctx.stroke();
}
// ======== is pointer inside ? =========
var selectFace = function () {
isMoving = false;
target = false;
for (var i = 0, f; f = faces[i++];) {
if (f.visible) {
if (
f.img.isPointerInside(
pointer.x,
pointer.y,
f.p0, f.p1, f.p2, f.p3
)
) target = f;
} else break;
}
if (target && target.f.select != false && !pointer.sweeping) {
faceOver = target;
canvas.setCursor("pointer");
} else canvas.setCursor("move");
}
// ======== onmove ========
pointer.move = function () {
isMoving = true;
}
// ======== onclick ========
pointer.click = function () {
selectFace();
// ---- target image ----
if (target && target.f.select != false) {
if (target == targetold) {
// ---- reset scene ----
camera.center();
targetold = false;
} else {
targetold = target;
target.locked = false;
// ---- target redirection ----
if (target.f.target != "") {
for (var i = 0, f; f = faces[i++];) {
if (f.f.id && f.f.id == target.f.target) {
target = f;
targetold = f;
if (f.hidden) {
f.hidden = false;
f.locked = true;
targetold = false;
}
break;
}
}
}
// ---- move camera ----
target.pc.project();
camera.setTarget(target);
}
}
}
var init = function (json) {
// ---- init camera ----
camera = {
x:  tweens.add(100),
y:  tweens.add(100),
z:  tweens.add(100, 0,0),
rx: tweens.add(100, 0,0, true),
ry: tweens.add(100, 0,0, true),
zoom: tweens.add(100, 0.1, 2),
focalLength: 450,
centered: false,
cosX: 0,
cosY: 0,
sinX: 0,
sinY: 0,
setTarget: function (target) {
// ---- set position ----
this.x.setTarget(target.pc.x);
this.y.setTarget(target.pc.y);
this.z.setTarget(target.pc.z);
// ---- set view angles ----
this.rx.setTarget((Math.PI * 0.5) - target.ax - globalRX);
this.ry.setTarget((Math.PI * 0.5) - target.ay - globalRY);
// ---- zoom ----
this.zoom.setTarget(target.f.zoom ? target.f.zoom : 3);
this.centered = false;
},
center: function () {
this.x.setTarget(0);
this.y.setTarget(0);
this.z.setTarget(0);
this.zoom.setTarget(2);
this.centered = true;
},
move: function () {
// ---- easing camera position and view angle ----
tweens.iterate();
// ---- additional drag/touch rotations ----
globalRX += (((-pointer.dy * 0.01) - globalRX) * 0.1);
globalRY += (((-pointer.dx * 0.01) - globalRY) * 0.1);
if (!this.centered && pointer.sweeping) {
// ---- reset zoom & position ----
this.center();
targetold = false;
}
// ---- pre calculate trigo ----
this.cosX = Math.cos(this.rx.value + globalRX);
this.sinX = Math.sin(this.rx.value + globalRX);
this.cosY = Math.cos(this.ry.value + globalRY);
this.sinY = Math.sin(this.ry.value + globalRY);
},
rotate: function (x, y, z) {
// ---- 3D rotation ----
var r = this.cosY * z + this.sinY * x;
return {
x: this.cosY * x - this.sinY * z,
y: this.sinX * r + this.cosX * y,
z: this.cosX * r - this.sinX * y
}
}
}
// ---- create faces ----
for (var i = 0, f; f = json.faces[i++];) {
faces.push(
new Face(json.path, f)
);
}
// ---- engine start ----
run();
}
// ===== main loop =====
var run = function () {
requestAnimationFrame(run);
var i, f;
ctx.clearRect(0,0, canvas.width, canvas.height);
// ---- 3D projection ----
for (i = 0; f = faces[i++];) {
f.project();
}
// ---- faces depth sorting ----
faces.sort(function (p0, p1) {
return p1.distance - p0.distance;
});
// ---- drawing ----
for (i = 0; f = faces[i++];) {
if (f.visible) {
// ---- draw image ----
f.img.transform(f.p0, f.p1, f.p2, f.p3);
if (f.locked && pointer.sweeping) f.locked = false;
if (f === faceOver) faceOver.border();
} else break;
}
// ---- pointer over ----
isMoving && selectFace();
// ---- camera ----
camera.move();
}
return {  
load: init
}
})().load({
path: "http://www.dhteumeuleu.com/images/",
faces: [
// ---- main images ----
{id: "1", src:"N3.jpg",    x:0,    y:0,    z:200,  rx:0,  ry:0,  w: 300, h: 200, select: false},
{id: "2", src:"go21.jpg",  x:200,  y:0,    z:0,    rx:0,  ry:-1, w: 300, h: 200},
{id: "3", src:"sf42.jpg",  x:0,    y:150,  z:0,    rx:1,  ry:0,  w: 300, h: 200},
{id: "4", src:"go26.jpg",  x:0,    y:-150, z:0,    rx:-1, ry:0,  w: 300, h: 200},
{id: "5", src:"ct133.jpg", x:-200, y:0,    z:0,    rx:0,  ry:1,  w: 300, h: 200},
{id: "6", src:"ct132.jpg", x:0,    y:0,    z:-200, rx:0,  ry:-2, w: 300, h: 200},
// ---- special hidden image :) ----
{id: "7", target: "1", src:"ct15.jpg", x:0, y:0, z:200, rx:0, ry:-2, w: 300, h: 200, hidden: true},
// ---- small targets ----
{src:"ct132.jpg", target: "6", x:0,    y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"ct133.jpg", target: "5", x:-100, y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"go26.jpg",  target: "4", x:100,  y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"sf42.jpg",  target: "3", x:0,    y:40,  z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"go21.jpg",  target: "2", x:-100, y:40,  z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"N3.jpg",    target: "7", x:100,  y:40,  z:170, rx:0, ry:0, w: 80, h: 60, tl: 1}
]

});