Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/index.html

Created March 11, 2021 21:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cferdinandi/0a4b74311657cce744f87785108dedb5 to your computer and use it in GitHub Desktop.
Save cferdinandi/0a4b74311657cce744f87785108dedb5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Monster flip card</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="card-container">
<button class="card card--front" data-monster="monster1" aria-label="Open the Door"></button>
<div class="card card--back">
<div class="screen-reader" aria-live="polite"></div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
Raw
script.js
const card = document.querySelector(".card-container");
const cardFront = document.querySelector(".card--front");
const cardBack = document.querySelector(".card--back");
card.addEventListener("click", e => {
const monster = e.target.closest("[data-monster]");
if (!monster) return;
card.classList.add("card--clicked");
// setTimeout(() => card.removeChild(cardFront), 500);
card.addEventListener('transitionend', function () {
cardFront.remove();
let sr = cardBack.querySelector('.screen-reader');
sr.textContent = monster.getAttribute('data-monster') + ' was behind the door';
});
});
Raw
style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
}
.card-container {
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 300px;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 1000px;
background: none;
/* border:none; */
}
.card-container.card--clicked .card--front {
transform: rotateY(-180deg);
}
.card-container.card--clicked .card--back {
transform: rotateY(0deg);
cursor: not-allowed;
}
.card {
position: absolute;
height: 100%;
width: 100%;
background-position: 50% 50%;
background-size: 90%;
background-repeat: no-repeat;
backface-visibility: hidden;
transition: 1.5s;
cursor: pointer;
}
.card--front {
background-image: url(https://gist.githubusercontent.com/cferdinandi/b216c6c06685a381ec5bd547410d76c1/raw/ea404869e2c3b02738b36ccb9d82921f80cbf2bd/door.svg);
transform: rotateY(0deg);
background-color: transparent;
border: none;
}
.card--back {
background-image: url(https://gist.githubusercontent.com/cferdinandi/b216c6c06685a381ec5bd547410d76c1/raw/ea404869e2c3b02738b36ccb9d82921f80cbf2bd/monster1.svg);
transform: rotateY(180deg);
}
/**
* Remove all animations and transitions for people that prefer not to see them
*/
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/*
* Hide only visually, but have it available for screen readers:
* @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.screen-reader {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap; /* 1 */
width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment