<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Images from Dribbble: https://dribbble.com/Rishavmalla -->
<div class="container">
<h1 class="heading">3D Parallax Hover Effect</h1>
<div class="card">
<div class="card__item">
<h2 class="card__item-title">Time for a vacation</h2>
<a href="https://dribbble.com/shots/2792589-Time-for-a-vacation" title="Time for a vacation">
<div class="atvImg">
<img src="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/2792589/for_dribbble-01.png">
<div class="atvImg-layer" data-img="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/2792589/for_dribbble-01.png"></div>
</div>
</a>
</div>
<div class="card__item">
<h2 class="card__item-title">Singha Durbar</h2>
<a href="https://dribbble.com/shots/2787693-Singha-Durbar" title="Singha Durbar">
<div class="atvImg">
<img src="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/2787693/singha_durbar_final-02-02-02.png">
<div class="atvImg-layer" data-img="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/2787693/singha_durbar_final-02-02-02.png"></div>
</div>
</a>
</div>
<div class="card__item">
<h2 class="card__item-title">Little Miss Sunshine</h2>
<a href="https://dribbble.com/shots/3002552-Little-Miss-Sunshine" title="Little Miss Sunshine">
<div class="atvImg">
<img src="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/3002552/little_miss_sunshine-01.png">
<div class="atvImg-layer" data-img="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/3002552/little_miss_sunshine-01.png"></div>
</div>
</a>
</div>
</div>
</div>
<script>
/*
* atvImg
* Copyright 2015 Drew Wilson
* http://drewwilson.com
*
* Version 1.1 - Updated: Oct. 26, 2015
*/
function FastClick(e, t) {
function n(e, t) {
return function() {
return e.apply(t, arguments)
}
}
var i;
t = t || {}, this.trackingClick = !1, this.trackingClickStart = 0, this.targetElement = null, this.touchStartX = 0, this.touchStartY = 0, this.lastTouchIdentifier = 0, this.touchBoundary = t.touchBoundary || 10, this.layer = e, this.tapDelay = t.tapDelay || 200, FastClick.notNeeded(e) || (deviceIsAndroid && (e.addEventListener("mouseover", n(this.onMouse, this), !0), e.addEventListener("mousedown", n(this.onMouse, this), !0), e.addEventListener("mouseup", n(this.onMouse, this), !0)), e.addEventListener("click", n(this.onClick, this), !0), e.addEventListener("touchstart", n(this.onTouchStart, this), !1), e.addEventListener("touchmove", n(this.onTouchMove, this), !1), e.addEventListener("touchend", n(this.onTouchEnd, this), !1), e.addEventListener("touchcancel", n(this.onTouchCancel, this), !1), Event.prototype.stopImmediatePropagation || (e.removeEventListener = function(t, n, i) {
var a = Node.prototype.removeEventListener;
"click" === t ? a.call(e, t, n.hijacked || n, i) : a.call(e, t, n, i)
}, e.addEventListener = function(t, n, i) {
var a = Node.prototype.addEventListener;
"click" === t ? a.call(e, t, n.hijacked || (n.hijacked = function(e) {
e.propagationStopped || n(e)
}), i) : a.call(e, t, n, i)
}), "function" == typeof e.onclick && (i = e.onclick, e.addEventListener("click", function(e) {
i(e)
}, !1), e.onclick = null))
}
function atvImg() {
function e(e, t, n, i, a, s) {
var c = o.scrollTop || r.scrollTop,
l = o.scrollLeft,
d = t ? e.touches[0].pageX : e.pageX,
u = t ? e.touches[0].pageY : e.pageY,
h = n.getBoundingClientRect(),
v = n.clientWidth || n.offsetWidth || n.scrollWidth,
p = n.clientHeight || n.offsetHeight || n.scrollHeight,
m = 320 / v,
f = .52 - (d - h.left - l) / v,
g = .52 - (u - h.top - c) / p,
k = u - h.top - c - p / 2,
C = d - h.left - l - v / 2,
E = (f - C) * (.07 * m),
y = (k - g) * (.1 * m),
S = "rotateX(" + y + "deg) rotateY(" + E + "deg)",
I = Math.atan2(k, C),
T = 180 * I / Math.PI - 90;
0 > T && (T += 360), -1 != n.firstChild.className.indexOf(" over") && (S += " scale3d(1.07,1.07,1.07)"), n.firstChild.style.transform = S, s.style.background = "linear-gradient(" + T + "deg, rgba(255,255,255," + (u - h.top - c) / p * .4 + ") 0%,rgba(255,255,255,0) 80%)", s.style.transform = "translateX(" + f * a - .1 + "px) translateY(" + g * a - .1 + "px)";
for (var w = a, F = 0; a > F; F++) i[F].style.transform = "translateX(" + f * w * (2.5 * F / m) + "px) translateY(" + g * a * (2.5 * F / m) + "px)", w--
}
function t(e, t) {
t.firstChild.className += " over"
}
function n(e, t, n, i, a) {
var o = t.firstChild;
o.className = o.className.replace(" over", ""), o.style.transform = "", a.style.cssText = "";
for (var r = 0; i > r; r++) n[r].style.transform = ""
}
var i = document,
a = i.documentElement,
o = i.getElementsByTagName("body")[0],
r = i.getElementsByTagName("html")[0],
s = window,
c = i.querySelectorAll(".atvImg"),
l = c.length,
d = "ontouchstart" in s || navigator.msMaxTouchPoints;
if (!(0 >= l))
for (var u = 0; l > u; u++) {
var h = c[u],
v = h.querySelectorAll(".atvImg-layer"),
p = v.length;
if (!(0 >= p)) {
for (; h.firstChild;) h.removeChild(h.firstChild);
var m = i.createElement("div"),
f = i.createElement("div"),
g = i.createElement("div"),
k = i.createElement("div"),
C = [];
h.id = "atvImg__" + u, m.className = "atvImg-container", f.className = "atvImg-shine", g.className = "atvImg-shadow", k.className = "atvImg-layers";
for (var E = 0; p > E; E++) {
var y = i.createElement("div"),
S = v[E].getAttribute("data-img");
y.className = "atvImg-rendered-layer", y.setAttribute("data-layer", E), y.style.backgroundImage = "url(" + S + ")", k.appendChild(y), C.push(y)
}
m.appendChild(g), m.appendChild(k), m.appendChild(f), h.appendChild(m);
var I = h.clientWidth || h.offsetWidth || h.scrollWidth;
h.style.transform = "perspective(" + 3 * I + "px)", d ? (s.preventScroll = !1, function(i, a, o, r) {
h.addEventListener("touchmove", function(t) {
s.preventScroll && t.preventDefault(), e(t, !0, i, a, o, r)
}), h.addEventListener("touchstart", function(e) {
s.preventScroll = !0, t(e, i)
}), h.addEventListener("touchend", function(e) {
s.preventScroll = !1, n(e, i, a, o, r)
})
}(h, C, p, f)) : ! function(i, a, o, r) {
h.addEventListener("mousemove", function(t) {
e(t, !1, i, a, o, r)
}), h.addEventListener("mouseenter", function(e) {
t(e, i)
}), h.addEventListener("mouseleave", function(e) {
n(e, i, a, o, r)
})
}(h, C, p, f)
}
}
}
var deviceIsAndroid = navigator.userAgent.indexOf("Android") > 0,
deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent),
deviceIsIOS4 = deviceIsIOS && /OS 4_\d(_\d)?/.test(navigator.userAgent),
deviceIsIOSWithBadTarget = deviceIsIOS && /OS ([6-9]|\d{2})_\d/.test(navigator.userAgent);
FastClick.prototype.needsClick = function(e) {
switch (e.nodeName.toLowerCase()) {
case "button":
case "select":
case "textarea":
if (e.disabled) return !0;
break;
case "input":
if (deviceIsIOS && "file" === e.type || e.disabled) return !0;
break;
case "label":
case "video":
return !0
}
return /\bneedsclick\b/.test(e.className)
}, FastClick.prototype.needsFocus = function(e) {
switch (e.nodeName.toLowerCase()) {
case "textarea":
return !0;
case "select":
return !deviceIsAndroid;
case "input":
switch (e.type) {
case "button":
case "checkbox":
case "file":
case "image":
case "radio":
case "submit":
return !1
}
return !e.disabled && !e.readOnly;
default:
return /\bneedsfocus\b/.test(e.className)
}
}, FastClick.prototype.sendClick = function(e, t) {
var n, i;
document.activeElement && document.activeElement !== e && document.activeElement.blur(), i = t.changedTouches[0], n = document.createEvent("MouseEvents"), n.initMouseEvent(this.determineEventType(e), !0, !0, window, 1, i.screenX, i.screenY, i.clientX, i.clientY, !1, !1, !1, !1, 0, null), n.forwardedTouchEvent = !0, e.dispatchEvent(n)
}, FastClick.prototype.determineEventType = function(e) {
return deviceIsAndroid && "select" === e.tagName.toLowerCase() ? "mousedown" : "click"
}, FastClick.prototype.focus = function(e) {
var t;
deviceIsIOS && e.setSelectionRange && 0 !== e.type.indexOf("date") && "time" !== e.type ? (t = e.value.length, e.setSelectionRange(t, t)) : e.focus()
}, FastClick.prototype.updateScrollParent = function(e) {
var t, n;
if (t = e.fastClickScrollParent, !t || !t.contains(e)) {
n = e;
do {
if (n.scrollHeight > n.offsetHeight) {
t = n, e.fastClickScrollParent = n;
break
}
n = n.parentElement
} while (n)
}
t && (t.fastClickLastScrollTop = t.scrollTop)
}, FastClick.prototype.getTargetElementFromEventTarget = function(e) {
return e.nodeType === Node.TEXT_NODE ? e.parentNode : e
}, FastClick.prototype.onTouchStart = function(e) {
var t, n, i;
if (e.targetTouches.length > 1) return !0;
if (t = this.getTargetElementFromEventTarget(e.target), n = e.targetTouches[0], deviceIsIOS) {
if (i = window.getSelection(), i.rangeCount && !i.isCollapsed) return !0;
if (!deviceIsIOS4) {
if (n.identifier === this.lastTouchIdentifier) return e.preventDefault(), !1;
this.lastTouchIdentifier = n.identifier, this.updateScrollParent(t)
}
}
return this.trackingClick = !0, this.trackingClickStart = e.timeStamp, this.targetElement = t, this.touchStartX = n.pageX, this.touchStartY = n.pageY, e.timeStamp - this.lastClickTime < this.tapDelay && e.preventDefault(), !0
}, FastClick.prototype.touchHasMoved = function(e) {
var t = e.changedTouches[0],
n = this.touchBoundary;
return Math.abs(t.pageX - this.touchStartX) > n || Math.abs(t.pageY - this.touchStartY) > n ? !0 : !1
}, FastClick.prototype.onTouchMove = function(e) {
return this.trackingClick ? ((this.targetElement !== this.getTargetElementFromEventTarget(e.target) || this.touchHasMoved(e)) && (this.trackingClick = !1, this.targetElement = null), !0) : !0
}, FastClick.prototype.findControl = function(e) {
return void 0 !== e.control ? e.control : e.htmlFor ? document.getElementById(e.htmlFor) : e.querySelector("button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea")
}, FastClick.prototype.onTouchEnd = function(e) {
var t, n, i, a, o, r = this.targetElement;
if (!this.trackingClick) return !0;
if (e.timeStamp - this.lastClickTime < this.tapDelay) return this.cancelNextClick = !0, !0;
if (this.cancelNextClick = !1, this.lastClickTime = e.timeStamp, n = this.trackingClickStart, this.trackingClick = !1, this.trackingClickStart = 0, deviceIsIOSWithBadTarget && (o = e.changedTouches[0], r = document.elementFromPoint(o.pageX - window.pageXOffset, o.pageY - window.pageYOffset) || r, r.fastClickScrollParent = this.targetElement.fastClickScrollParent), i = r.tagName.toLowerCase(), "label" === i) {
if (t = this.findControl(r)) {
if (this.focus(r), deviceIsAndroid) return !1;
r = t
}
} else if (this.needsFocus(r)) return e.timeStamp - n > 100 || deviceIsIOS && window.top !== window && "input" === i ? (this.targetElement = null, !1) : (this.focus(r), this.sendClick(r, e), deviceIsIOS4 && "select" === i || (this.targetElement = null, e.preventDefault()), !1);
return deviceIsIOS && !deviceIsIOS4 && (a = r.fastClickScrollParent, a && a.fastClickLastScrollTop !== a.scrollTop) ? !0 : (this.needsClick(r) || (e.preventDefault(), this.sendClick(r, e)), !1)
}, FastClick.prototype.onTouchCancel = function() {
this.trackingClick = !1, this.targetElement = null
}, FastClick.prototype.onMouse = function(e) {
return this.targetElement ? e.forwardedTouchEvent ? !0 : e.cancelable && (!this.needsClick(this.targetElement) || this.cancelNextClick) ? (e.stopImmediatePropagation ? e.stopImmediatePropagation() : e.propagationStopped = !0, e.stopPropagation(), e.preventDefault(), !1) : !0 : !0
}, FastClick.prototype.onClick = function(e) {
var t;
return this.trackingClick ? (this.targetElement = null, this.trackingClick = !1, !0) : "submit" === e.target.type && 0 === e.detail ? !0 : (t = this.onMouse(e), t || (this.targetElement = null), t)
}, FastClick.prototype.destroy = function() {
var e = this.layer;
deviceIsAndroid && (e.removeEventListener("mouseover", this.onMouse, !0), e.removeEventListener("mousedown", this.onMouse, !0), e.removeEventListener("mouseup", this.onMouse, !0)), e.removeEventListener("click", this.onClick, !0), e.removeEventListener("touchstart", this.onTouchStart, !1), e.removeEventListener("touchmove", this.onTouchMove, !1), e.removeEventListener("touchend", this.onTouchEnd, !1), e.removeEventListener("touchcancel", this.onTouchCancel, !1)
}, FastClick.notNeeded = function(e) {
var t, n;
if ("undefined" == typeof window.ontouchstart) return !0;
if (n = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [, 0])[1]) {
if (!deviceIsAndroid) return !0;
if (t = document.querySelector("meta[name=viewport]")) {
if (-1 !== t.content.indexOf("user-scalable=no")) return !0;
if (n > 31 && window.innerWidth <= window.screen.width) return !0
}
}
return "none" === e.style.msTouchAction ? !0 : !1
}, FastClick.attach = function(e, t) {
return new FastClick(e, t)
}, "undefined" != typeof define && define.amd ? define(function() {
return FastClick
}) : "undefined" != typeof module && module.exports ? (module.exports = FastClick.attach, module.exports.FastClick = FastClick) : window.FastClick = FastClick, document.addEventListener("touchstart", function() {}, !0), atvImg();
</script>
@import url("https://fonts.googleapis.com/css?family=Amaranth|Dancing+Script");
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: #43cea2;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #43cea2, #185a9d);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #43cea2, #185a9d);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Dancing Script', cursive;
}
.heading {
text-align: center;
color: #fff;
font-size: 60px;
font-family: 'Amaranth', sans-serif;
}
.card {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 960px;
margin: 0 auto;
padding: 50px 20px 0;
}
.card__item {
width: 29%;
margin: 10px 20px;
}
.card__item-title {
text-align: center;
color: #fff;
font-weight: normal;
font-size: 20px;
letter-spacing: 1px;
}
.atvImg {
border-radius: 5px;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
width: 100%;
height: 350px;
display: inline-block;
}
.atvImg img {
border-radius: 5px;
box-shadow: 0 2px 8px rgba(14, 21, 47, 0.25);
}
.atvImg-container {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
transition: all 0.2s ease-out;
}
.atvImg-container.over .atvImg-shadow {
box-shadow: 0 45px 100px rgba(14, 21, 47, 0.4), 0 16px 40px rgba(14, 21, 47, 0.4);
}
.atvImg-layers {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden;
transform-style: preserve-3d;
}
.atvImg-rendered-layer {
position: absolute;
width: 104%;
height: 104%;
top: -2%;
left: -2%;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-size: cover;
transition: all 0.1s ease-out;
}
.atvImg-shadow {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
transition: all 0.2s ease-out;
box-shadow: 0 8px 30px rgba(14, 21, 47, 0.6);
}
.atvImg-shine {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%);
}
