SHOWROOM
We value quality, sustainability, craftsmanship and joie de vivre.
Our brand mix combines outstanding details, innovation and durability.
THE GARAGE
The exclusive world of Dr. Martens
Separate showroom with all the iconic shoes of Dr. Martens



BRANDS
Dr. Martens
THE LIVING ROOM
Fashionable brand environment, style from head to toe
BRANDS
Russell Athletic
const mouseMove = document.querySelectorAll(".square"); /*.bgImage*/
let userAgentString = navigator.userAgent;
const cardList = document.querySelectorAll(".bgImage"); /*.card1*/ var card = document.querySelector(".card1"); const body = document.querySelector(".body");
var firstInteraction = true; var animationended = true;
var correctDegrees = 360; if (userAgentString.indexOf("Safari") > -1) { if (userAgentString.indexOf("Chrome") < 0) { //Safari matches Chrome console.log("SAFARI"); correctDegrees = 1; } } function handleHover(e) { [].forEach.call(mouseMove, function(element) { var rect1 = element.getBoundingClientRect(); if (e.clientX >= rect1.left - window.scrollX && e.clientX <= rect1.right - window.scrollX) { if (e.clientY >= rect1.top - window.scrollX && e.clientY <= rect1.bottom - window.scrollX) { card = element.querySelector(".bgImage"); /*.card1*/ } else { removetilt(element.querySelector(".bgImage")) } } else { removetilt(element.querySelector(".bgImage")) /*resetAnimation(e,element.querySelector(".bgImage"));*/ /*element.querySelector(".bgImage").style.transform = `perspective(${e.currentTarget.clientWidth}) rotateX(0deg) rotateY(0deg)`; element.querySelector(".card1").style.transform = `perspective(${e.currentTarget.clientWidth}) rotateX(0deg) rotateY(0deg)`;*/ } /* console.log(e.clientX.toString() + " " + (rect1.left - window.scrollX).toString() + " " + (rect1.right - window.scrollX).toString() + " / " + e.clientY.toString() + " " + (rect1.top - window.scrollX).toString() + " " + (rect1.bottom - window.scrollX).toString());*/ }); const THRESHOLD = 7; const { clientX, clientY, currentTarget } = e; const { clientWidth, clientHeight, offsetLeft, offsetTop } = card; var rect = card.getBoundingClientRect(); const horizontal = (clientX - rect.left) / clientHeight; const vertical = (clientY - rect.top) / clientWidth; const rotateX = (THRESHOLD / 2 - horizontal * THRESHOLD).toFixed(2); const rotateY = (vertical * THRESHOLD - THRESHOLD / 2).toFixed(2); const rotateTextX = rotateX*(-1.3); const rotateTextY = rotateY*(-1.3); const perspektiveText = clientWidth/3; /*console.log(clientWidth.toString() + " " + rotateY.toString() + " " + rotateX.toString());*/ const text = card.querySelector(".h1Square1"); if (animationended && firstInteraction) { animationended = false; firstInteraction = false; var cardAnimatione = card.animate([ // keyframes { transform: "perspective("+clientWidth.toString()+"px) rotateX("+(rotateY/correctDegrees).toString()+"deg) rotateY("+(rotateX/correctDegrees).toString()+"deg) scale3d(1, 1, 1)" } ], { // timing options duration: 200, iterations: 1 }); /* var textAnimation = text.animate([ // keyframes { transform: "translate(-50%, -200%)" } ], { // timing options duration: 200, iterations: 1 });*/ /* text.animate([ // keyframes { webkitTransform: `translateY(0px)` }, { webkitTransform: `perspective(${perspektiveText}px) rotateX(${rotateY+rotateTextY}deg) rotateY(${rotateX+rotateTextX}deg) scale3d(1, 1, 1)` } ], { // timing options duration: 200, iterations: 1 }); */ cardAnimatione.onfinish = event => { animationended = true; console.log("OPENING ANIMATION ENDED")
card.style.transform = "perspective("+clientWidth.toString()+"px) rotateX("+(rotateY/correctDegrees).toString()+"deg) rotateY("+(rotateX/correctDegrees).toString()+"deg) scale3d(1, 1, 1)"; //text.style.transform = "translate(-50%, -200%)";
}; } else { if (animationended) { card.style.transform = "perspective("+clientWidth.toString()+"px) rotateX("+(rotateY/correctDegrees).toString()+"deg) rotateY("+(rotateX/correctDegrees).toString()+"deg) scale3d(1, 1, 1)";
/*text.style.webkitTransform = `perspective(${perspektiveText}px) rotateX(${rotateTextY}deg) rotateY(${rotateTextX}deg) scale3d(1, 1, 1)`;*/ } } }
var currentTargetClientWidth = 350; var resetAnimationEnded = true;
function resetAnimation(card2) { if (resetAnimationEnded) { resetAnimationEnded = false; var text = card2.querySelector(".h1Square1");
var cardAnimatione = card2.animate([ // keyframes { transform: "perspective("+currentTargetClientWidth+"px) rotateX(0deg) rotateY(0deg)" } ], { // timing options duration: 200, iterations: 1 });
/*var textAnimatione = text.animate([ // keyframes { transform: "translate(-50%, -50%)" } ], { // timing options duration: 200, iterations: 1 });*/
cardAnimatione.onfinish = event => { console.log("CLOSING ANIMATION ENDED") resetAnimationEnded = true; card2.style.webkitTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card2.style.msTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card2.style.mozTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card2.style.oTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card2.style.transform = "perspective("+currentTargetClientWidth+"px) rotateX(0deg) rotateY(0deg)"; //text.style.transform = "translate(-50%, -50%)" }; } }
function removetilt(card) { var text = card.querySelector(".h1Square1");
var cardAnimatione = card.animate([ // keyframes { transform: "perspective("+currentTargetClientWidth+"px) rotateX(0deg) rotateY(0deg)" } ], { // timing options duration: 200, iterations: 1 });
/*var textAnimatione = text.animate([ // keyframes { transform: "translate(-50%, -50%)" } ], { // timing options duration: 200, iterations: 1 });*/
card.style.webkitTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card.style.msTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card.style.mozTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card.style.oTransform = "perspective(${currentTargetClientWidth}) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"; card.style.transform = "perspective("+currentTargetClientWidth+"px) rotateX(0deg) rotateY(0deg)";
/*textAnimatione.onfinish = event => { text.style.transform = "translate(-50%, -50%)" } */ }
function resetStyles(e) { currentTargetClientWidth = e.currentTarget.clientWidth; [].forEach.call(cardList, function(element) { var rect1 = element.getBoundingClientRect(); if (e.clientX >= rect1.left - window.scrollX && e.clientX <= rect1.right - window.scrollX) { if (e.clientY >= rect1.top - window.scrollY && e.clientY <= rect1.bottom - window.scrollY) { card = element; } } }); firstInteraction = true; resetAnimation(card); /* card.style.webkitTransform = `perspective(${e.currentTarget.clientWidth}) rotateX(0deg) rotateY(0deg)`; card.querySelector(".card1").style.webkitTransform = `perspective(${e.currentTarget.clientWidth}) rotateX(0deg) rotateY(0deg)`; */ } [].forEach.call(mouseMove, function(element) { element.addEventListener("mousemove", handleHover); element.addEventListener("mouseleave", resetStyles); });