EffectHub.com: your best source for gaming

Recommendation

More Effects...

//Javascript is strictly for camera (viewport) movement
//All the pretty animation occurs in CSS
$(function(){

var el = document.createElement('div'),
        transformProps = 'transform'.split(' '),
        transformProp = support(transformProps),
        transitionDuration = 'transitionDuration'.split(' '),
        transitionDurationProp = support(transitionDuration);

var mouse = {
            start : {}
        },
        touch = document.ontouchmove !== undefined,
        viewport = {
            x: -10,
            y: 20,
            el: $('.box')[0],
            move: function(coords) {
							
                if(coords) {
                    if(typeof coords.x === "number") this.x = coords.x;
                    if(typeof coords.y === "number") this.y = coords.y;
                }

this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)";
            },
            reset: function() {
                this.move({x: 0, y: 0});
            }
        };

viewport.duration = function() {
        var d = touch ? 50 : 500;
        viewport.el.style[transitionDurationProp] = d + "ms";
        return d;
    }();

$(document).keydown(function(evt) {
        switch(evt.keyCode)
        {
            case 37: // left
                viewport.move({y: viewport.y - 90});
                break;

case 38: // up
                evt.preventDefault();
                viewport.move({x: viewport.x + 90});
                break;

case 39: // right
                viewport.move({y: viewport.y + 90});
                break;

case 40: // down
                evt.preventDefault();
                viewport.move({x: viewport.x - 90});
                break;

case 27: //esc
                viewport.reset();
                break;

default:
                break;
        };
    }).bind('mousedown touchstart', function(evt) {
        delete mouse.last;
        if($(evt.target).is('a, iframe')) {
            return true;
        }

evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
        mouse.start.x = evt.pageX;
        mouse.start.y = evt.pageY;
        $(document).bind('mousemove touchmove', function(event) {
            // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
            if(!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {
                event.preventDefault();
                // Get touch co-ords
                event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
                $('.viewport').trigger('move-viewport', {x: event.pageX, y: event.pageY});
            }
        });

$(document).bind('mouseup touchend', function () {
            $(document).unbind('mousemove touchmove');
        });
    });

$('.viewport').bind('move-viewport', function(evt, movedMouse) {

// Reduce movement on touch screens
        var movementScaleFactor = touch ? 4 : 1;
				console.log(movementScaleFactor);
			
        if (!mouse.last) {
            mouse.last = mouse.start;
        } else {
            if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) {
                mouse.start.x = mouse.last.x;
            }
            if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) {
                mouse.start.y = mouse.last.y;
            }
        }

viewport.move({
            x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor),
            y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor)
        });

mouse.last.x = movedMouse.x;
        mouse.last.y = movedMouse.y;

function forward(v1, v2) {
            return v1 >= v2 ? true : false;
        }
    });

});

CSS

@-webkit-keyframes blockSlide {
  0% {
    -webkit-transform: translateX(-133.33333px) rotateX(90deg);
            transform: translateX(-133.33333px) rotateX(90deg);
    opacity: 1;
  }
  25% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.2;
  }
  75% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(133.33333px) rotateX(-90deg);
            transform: translateX(133.33333px) rotateX(-90deg);
    opacity: 1;
  }
}
@keyframes blockSlide {
  0% {
    -webkit-transform: translateX(-133.33333px) rotateX(90deg);
            transform: translateX(-133.33333px) rotateX(90deg);
    opacity: 1;
  }
  25% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.2;
  }
  75% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(133.33333px) rotateX(-90deg);
            transform: translateX(133.33333px) rotateX(-90deg);
    opacity: 1;
  }
}
@-webkit-keyframes startSpin {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(360deg) rotateX(360deg);
            transform: rotateY(360deg) rotateX(360deg);
  }
}
@keyframes startSpin {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(360deg) rotateX(360deg);
            transform: rotateY(360deg) rotateX(360deg);
  }
}
body {
  background: #222;
  font-size: 100%;
}

.viewport {
  margin-top: calc(50vh - 100px);
  -webkit-perspective: 600px;
          perspective: 600px;
  -webkit-transform: scale(0.75, 0.75);
          transform: scale(0.75, 0.75);
}

.box {
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s ease-out;
  transition: -webkit-transform 1s ease-out;
  transition: transform 1s ease-out;
  transition: transform 1s ease-out, -webkit-transform 1s ease-out;
  /* essential for clean drag control */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0 auto 100px;
  -webkit-animation: startSpin 2s ease-out;
          animation: startSpin 2s ease-out;
}
.box .side {
  background-color: transparent;
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: white;
}
.box .side.front {
  -webkit-transform: rotateZ(0deg) translateZ(100px);
          transform: rotateZ(0deg) translateZ(100px);
}
.box .side.back {
  -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(100px);
          transform: rotateX(180deg) rotateZ(180deg) translateZ(100px);
}
.box .side.right {
  -webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(100px);
          transform: rotateY(90deg) rotateZ(90deg) translateZ(100px);
}
.box .side.left {
  -webkit-transform: rotateY(-90deg) rotateZ(-90deg) translateZ(100px);
          transform: rotateY(-90deg) rotateZ(-90deg) translateZ(100px);
}
.box .side.top {
  -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(100px);
          transform: rotateX(90deg) rotateZ(-90deg) translateZ(100px);
}
.box .side.bottom {
  -webkit-transform: rotateX(-90deg) rotateZ(-90deg) translateZ(100px);
          transform: rotateX(-90deg) rotateZ(-90deg) translateZ(100px);
}
.box .side div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  float: left;
  background: rgba(255, 228, 77, 0.6);
  box-shadow: 0px 0px 66.66667px 10px rgba(255, 226, 61, 0.3);
  display: inline-block;
  width: 33.33333px;
  height: 33.33333px;
  margin: 0;
  padding: 0;
  -webkit-animation: blockSlide 777ms infinite alternate;
          animation: blockSlide 777ms infinite alternate;
  -webkit-animation-timing-function: easeInOutSine;
          animation-timing-function: easeInOutSine;
  /* this loop is the unique things */
  /* currently all sides are identical */
}
.box .side div:nth-child(1) {
  -webkit-animation-duration: 1378ms;
          animation-duration: 1378ms;
  -webkit-transform: translateZ(37px);
          transform: translateZ(37px);
}
.box .side div:nth-child(2) {
  -webkit-animation-duration: 1709ms;
          animation-duration: 1709ms;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
}
.box .side div:nth-child(3) {
  -webkit-animation-duration: 1581ms;
          animation-duration: 1581ms;
  -webkit-transform: translateZ(33px);
          transform: translateZ(33px);
}
.box .side div:nth-child(4) {
  -webkit-animation-duration: 1337ms;
          animation-duration: 1337ms;
  -webkit-transform: translateZ(26px);
          transform: translateZ(26px);
}
.box .side div:nth-child(5) {
  -webkit-animation-duration: 110ms;
          animation-duration: 110ms;
  -webkit-transform: translateZ(27px);
          transform: translateZ(27px);
}
.box .side div:nth-child(6) {
  -webkit-animation-duration: 138ms;
          animation-duration: 138ms;
  -webkit-transform: translateZ(19px);
          transform: translateZ(19px);
}
.box .side div:nth-child(7) {
  -webkit-animation-duration: 1298ms;
          animation-duration: 1298ms;
  -webkit-transform: translateZ(28px);
          transform: translateZ(28px);
}
.box .side div:nth-child(8) {
  -webkit-animation-duration: 956ms;
          animation-duration: 956ms;
  -webkit-transform: translateZ(26px);
          transform: translateZ(26px);
}
.box .side div:nth-child(9) {
  -webkit-animation-duration: 648ms;
          animation-duration: 648ms;
  -webkit-transform: translateZ(12px);
          transform: translateZ(12px);
}
.box .side div:nth-child(10) {
  -webkit-animation-duration: 706ms;
          animation-duration: 706ms;
  -webkit-transform: translateZ(4px);
          transform: translateZ(4px);
}
.box .side div:nth-child(11) {
  -webkit-animation-duration: 1660ms;
          animation-duration: 1660ms;
  -webkit-transform: translateZ(27px);
          transform: translateZ(27px);
}
.box .side div:nth-child(12) {
  -webkit-animation-duration: 1086ms;
          animation-duration: 1086ms;
  -webkit-transform: translateZ(7px);
          transform: translateZ(7px);
}
.box .side div:nth-child(13) {
  -webkit-animation-duration: 1476ms;
          animation-duration: 1476ms;
  -webkit-transform: translateZ(23px);
          transform: translateZ(23px);
}
.box .side div:nth-child(14) {
  -webkit-animation-duration: 965ms;
          animation-duration: 965ms;
  -webkit-transform: translateZ(35px);
          transform: translateZ(35px);
}
.box .side div:nth-child(15) {
  -webkit-animation-duration: 1527ms;
          animation-duration: 1527ms;
  -webkit-transform: translateZ(57px);
          transform: translateZ(57px);
}
.box .side div:nth-child(16) {
  -webkit-animation-duration: 1321ms;
          animation-duration: 1321ms;
  -webkit-transform: translateZ(6px);
          transform: translateZ(6px);
}
.box .side div:nth-child(17) {
  -webkit-animation-duration: 370ms;
          animation-duration: 370ms;
  -webkit-transform: translateZ(59px);
          transform: translateZ(59px);
}
.box .side div:nth-child(18) {
  -webkit-animation-duration: 1684ms;
          animation-duration: 1684ms;
  -webkit-transform: translateZ(36px);
          transform: translateZ(36px);
}
.box .side div:nth-child(19) {
  -webkit-animation-duration: 568ms;
          animation-duration: 568ms;
  -webkit-transform: translateZ(16px);
          transform: translateZ(16px);
}
.box .side div:nth-child(20) {
  -webkit-animation-duration: 818ms;
          animation-duration: 818ms;
  -webkit-transform: translateZ(4px);
          transform: translateZ(4px);
}
.box .side div:nth-child(21) {
  -webkit-animation-duration: 44ms;
          animation-duration: 44ms;
  -webkit-transform: translateZ(56px);
          transform: translateZ(56px);
}
.box .side div:nth-child(22) {
  -webkit-animation-duration: 1739ms;
          animation-duration: 1739ms;
  -webkit-transform: translateZ(4px);
          transform: translateZ(4px);
}
.box .side div:nth-child(23) {
  -webkit-animation-duration: 1398ms;
          animation-duration: 1398ms;
  -webkit-transform: translateZ(5px);
          transform: translateZ(5px);
}
.box .side div:nth-child(24) {
  -webkit-animation-duration: 627ms;
          animation-duration: 627ms;
  -webkit-transform: translateZ(12px);
          transform: translateZ(12px);
}
.box .side div:nth-child(25) {
  -webkit-animation-duration: 321ms;
          animation-duration: 321ms;
  -webkit-transform: translateZ(51px);
          transform: translateZ(51px);
}
.box .side div:nth-child(26) {
  -webkit-animation-duration: 1229ms;
          animation-duration: 1229ms;
  -webkit-transform: translateZ(16px);
          transform: translateZ(16px);
}
.box .side div:nth-child(27) {
  -webkit-animation-duration: 590ms;
          animation-duration: 590ms;
  -webkit-transform: translateZ(16px);
          transform: translateZ(16px);
}
.box .side div:nth-child(28) {
  -webkit-animation-duration: 367ms;
          animation-duration: 367ms;
  -webkit-transform: translateZ(57px);
          transform: translateZ(57px);
}
.box .side div:nth-child(29) {
  -webkit-animation-duration: 877ms;
          animation-duration: 877ms;
  -webkit-transform: translateZ(28px);
          transform: translateZ(28px);
}
.box .side div:nth-child(30) {
  -webkit-animation-duration: 695ms;
          animation-duration: 695ms;
  -webkit-transform: translateZ(10px);
          transform: translateZ(10px);
}
.box .side div:nth-child(31) {
  -webkit-animation-duration: 1165ms;
          animation-duration: 1165ms;
  -webkit-transform: translateZ(14px);
          transform: translateZ(14px);
}
.box .side div:nth-child(32) {
  -webkit-animation-duration: 322ms;
          animation-duration: 322ms;
  -webkit-transform: translateZ(23px);
          transform: translateZ(23px);
}
.box .side div:nth-child(33) {
  -webkit-animation-duration: 563ms;
          animation-duration: 563ms;
  -webkit-transform: translateZ(41px);
          transform: translateZ(41px);
}
.box .side div:nth-child(34) {
  -webkit-animation-duration: 137ms;
          animation-duration: 137ms;
  -webkit-transform: translateZ(24px);
          transform: translateZ(24px);
}
.box .side div:nth-child(35) {
  -webkit-animation-duration: 1714ms;
          animation-duration: 1714ms;
  -webkit-transform: translateZ(17px);
          transform: translateZ(17px);
}
.box .side div:nth-child(36) {
  -webkit-animation-duration: 1313ms;
          animation-duration: 1313ms;
  -webkit-transform: translateZ(20px);
          transform: translateZ(20px);
}

HTML

Recommendation

Join Effecthub.com