Using color dodge blend mode on some backgrounds to create a "holographic" effect any Pokemon TCG collector will know!
Created
June 10, 2023 08:43
-
-
Save dgjungleP/5870cd3bb091268b3485debc5f3cec36 to your computer and use it in GitHub Desktop.
Pokemon Card Holo Effect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<main id=app> | |
<p>Please checkout the newer version of this; <a href="https://codepen.io/simeydotme/pen/abYWJdX" target="_blank">https://codepen.io/simeydotme/pen/abYWJdX</a></p> | |
<h1>Pokemon Card, Holo Effect</h1> | |
<section class="cards"> | |
<div class="card charizard animated"></div> | |
<div class="card pika animated"></div> | |
<div class="card eevee animated"></div> | |
<div class="card mewtwo animated"></div> | |
</section> | |
<style class="hover"></style> | |
<section class="demo"> | |
<div class="card"></div> | |
<span class="operator">+</span> | |
<div class="card"><span>color-dodge</span></div> | |
<span class="operator">+</span> | |
<div class="card"><span>color-dodge</span></div> | |
</section> | |
</main> | |
<section class="promo"> | |
<p> | |
<a href="https://codepen.io/simeydotme/pen/abYWJdX"> | |
View Version 2, much improved here | |
<img src="https://assets.codepen.io/13471/internal/screenshots/pens/abYWJdX.custom.png?version=1674760356" alt=""> | |
</a> | |
</p> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
using | |
- an animated gif of sparkles. | |
- an animated gradient as a holo effect. | |
- color-dodge mix blend mode | |
*/ | |
var x; | |
var $cards = $(".card"); | |
var $style = $(".hover"); | |
$cards | |
.on("mousemove touchmove", function(e) { | |
// normalise touch/mouse | |
var pos = [e.offsetX,e.offsetY]; | |
e.preventDefault(); | |
if ( e.type === "touchmove" ) { | |
pos = [ e.touches[0].clientX, e.touches[0].clientY ]; | |
} | |
var $card = $(this); | |
// math for mouse position | |
var l = pos[0]; | |
var t = pos[1]; | |
var h = $card.height(); | |
var w = $card.width(); | |
var px = Math.abs(Math.floor(100 / w * l)-100); | |
var py = Math.abs(Math.floor(100 / h * t)-100); | |
var pa = (50-px)+(50-py); | |
// math for gradient / background positions | |
var lp = (50+(px - 50)/1.5); | |
var tp = (50+(py - 50)/1.5); | |
var px_spark = (50+(px - 50)/7); | |
var py_spark = (50+(py - 50)/7); | |
var p_opc = 20+(Math.abs(pa)*1.5); | |
var ty = ((tp - 50)/2) * -1; | |
var tx = ((lp - 50)/1.5) * .5; | |
// css to apply for active card | |
var grad_pos = `background-position: ${lp}% ${tp}%;` | |
var sprk_pos = `background-position: ${px_spark}% ${py_spark}%;` | |
var opc = `opacity: ${p_opc/100};` | |
var tf = `transform: rotateX(${ty}deg) rotateY(${tx}deg)` | |
// need to use a <style> tag for psuedo elements | |
var style = ` | |
.card:hover:before { ${grad_pos} } /* gradient */ | |
.card:hover:after { ${sprk_pos} ${opc} } /* sparkles */ | |
` | |
// set / apply css class and style | |
$cards.removeClass("active"); | |
$card.removeClass("animated"); | |
$card.attr( "style", tf ); | |
$style.html(style); | |
if ( e.type === "touchmove" ) { | |
return false; | |
} | |
clearTimeout(x); | |
}).on("mouseout touchend touchcancel", function() { | |
// remove css, apply custom animation on end | |
var $card = $(this); | |
$style.html(""); | |
$card.removeAttr("style"); | |
x = setTimeout(function() { | |
$card.addClass("animated"); | |
},2500); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--color1: rgb(0, 231, 255); | |
--color2: rgb(255, 0, 231); | |
--back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg); | |
--charizard1: #fac; | |
--charizard2: #ddccaa; | |
--charizardfront: url(https://assets.codepen.io/13471/charizard-gx.webp); | |
--pika1: #54a29e; | |
--pika2: #a79d66; | |
--pikafront: url(https://assets.codepen.io/13471/pikachu-gx.webp); | |
--eevee1: #efb2fb; | |
--eevee2: #acc6f8; | |
--eeveefront: url(https://assets.codepen.io/13471/eevee-gx.webp); | |
--mewtwo1: #efb2fb; | |
--mewtwo2: #acc6f8; | |
--mewtwofront: url(https://assets.codepen.io/13471/mewtwo-gx.webp); | |
} | |
.card { | |
width: 71.5vw; | |
height: 100vw; | |
// width: clamp(200px, 61vh, 18vw); | |
// height: clamp(280px, 85vh, 25.2vw); | |
@media screen and (min-width: 600px) { | |
// width: 61vh; | |
// height: 85vh; | |
// max-width: 500px; | |
// max-height: 700px; | |
width: clamp(12.9vw, 61vh, 18vw); | |
height: clamp(18vw, 85vh, 25.2vw); | |
} | |
position: relative; | |
overflow: hidden; | |
margin: 20px; | |
overflow: hidden; | |
z-index: 10; | |
touch-action: none; | |
border-radius: 5% / 3.5%; | |
box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), | |
-7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, | |
0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5); | |
transition: transform 0.5s ease, box-shadow 0.2s ease; | |
will-change: transform, filter; | |
background-color: #040712; | |
background-image: var(--front); | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: 50% 50%; | |
transform-origin: center; | |
} | |
.card:hover { | |
box-shadow: -20px -20px 30px -25px var(--color1), | |
20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), | |
7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3), | |
0 55px 35px -20px rgba(0, 0, 0, 0.5); | |
} | |
.card.charizard { | |
--color1: var(--charizard1); | |
--color2: var(--charizard2); | |
--front: var(--charizardfront); | |
} | |
.card.pika { | |
--color1: var(--pika1); | |
--color2: var(--pika2); | |
--front: var(--pikafront); | |
} | |
.card.mewtwo { | |
--color1: var(--mewtwo1); | |
--color2: var(--mewtwo2); | |
--front: var(--mewtwofront); | |
} | |
.card.eevee { | |
--color1: #ec9bb6; | |
--color2: #ccac6f; | |
--color3: #69e4a5; | |
--color4: #8ec5d6; | |
--color5: #b98cce; | |
--front: var(--eeveefront); | |
} | |
.card:before, | |
.card:after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
top: 0; | |
background-repeat: no-repeat; | |
opacity: 0.5; | |
mix-blend-mode: color-dodge; | |
transition: all 0.33s ease; | |
} | |
.card:before { | |
background-position: 50% 50%; | |
background-size: 300% 300%; | |
background-image: linear-gradient( | |
115deg, | |
transparent 0%, | |
var(--color1) 25%, | |
transparent 47%, | |
transparent 53%, | |
var(--color2) 75%, | |
transparent 100% | |
); | |
opacity: 0.5; | |
filter: brightness(0.5) contrast(1); | |
z-index: 1; | |
} | |
.card:after { | |
opacity: 1; | |
background-image: url("https://assets.codepen.io/13471/sparkles.gif"), | |
url(https://assets.codepen.io/13471/holo.png), | |
linear-gradient( | |
125deg, | |
#ff008450 15%, | |
#fca40040 30%, | |
#ffff0030 40%, | |
#00ff8a20 60%, | |
#00cfff40 70%, | |
#cc4cfa50 85% | |
); | |
background-position: 50% 50%; | |
background-size: 160%; | |
background-blend-mode: overlay; | |
z-index: 2; | |
filter: brightness(1) contrast(1); | |
transition: all 0.33s ease; | |
mix-blend-mode: color-dodge; | |
opacity: 0.75; | |
} | |
.card.active:after, | |
.card:hover:after { | |
filter: brightness(1) contrast(1); | |
opacity: 1; | |
} | |
.card.active, | |
.card:hover { | |
animation: none; | |
transition: box-shadow 0.1s ease-out; | |
} | |
.card.active:before, | |
.card:hover:before { | |
animation: none; | |
background-image: linear-gradient( | |
110deg, | |
transparent 25%, | |
var(--color1) 48%, | |
var(--color2) 52%, | |
transparent 75% | |
); | |
background-position: 50% 50%; | |
background-size: 250% 250%; | |
opacity: 0.88; | |
filter: brightness(0.66) contrast(1.33); | |
transition: none; | |
} | |
.card.active:before, | |
.card:hover:before, | |
.card.active:after, | |
.card:hover:after { | |
animation: none; | |
transition: none; | |
} | |
.card.animated { | |
transition: none; | |
animation: holoCard 12s ease 0s 1; | |
&:before { | |
transition: none; | |
animation: holoGradient 12s ease 0s 1; | |
} | |
&:after { | |
transition: none; | |
animation: holoSparkle 12s ease 0s 1; | |
} | |
} | |
@keyframes holoSparkle { | |
0%, | |
100% { | |
opacity: 0.75; | |
background-position: 50% 50%; | |
filter: brightness(1.2) contrast(1.25); | |
} | |
5%, | |
8% { | |
opacity: 1; | |
background-position: 40% 40%; | |
filter: brightness(0.8) contrast(1.2); | |
} | |
13%, | |
16% { | |
opacity: 0.5; | |
background-position: 50% 50%; | |
filter: brightness(1.2) contrast(0.8); | |
} | |
35%, | |
38% { | |
opacity: 1; | |
background-position: 60% 60%; | |
filter: brightness(1) contrast(1); | |
} | |
55% { | |
opacity: 0.33; | |
background-position: 45% 45%; | |
filter: brightness(1.2) contrast(1.25); | |
} | |
} | |
@keyframes holoGradient { | |
0%, | |
100% { | |
opacity: 0.5; | |
background-position: 50% 50%; | |
filter: brightness(0.5) contrast(1); | |
} | |
5%, | |
9% { | |
background-position: 100% 100%; | |
opacity: 1; | |
filter: brightness(0.75) contrast(1.25); | |
} | |
13%, | |
17% { | |
background-position: 0% 0%; | |
opacity: 0.88; | |
} | |
35%, | |
39% { | |
background-position: 100% 100%; | |
opacity: 1; | |
filter: brightness(0.5) contrast(1); | |
} | |
55% { | |
background-position: 0% 0%; | |
opacity: 1; | |
filter: brightness(0.75) contrast(1.25); | |
} | |
} | |
@keyframes holoCard { | |
0%, | |
100% { | |
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg); | |
} | |
5%, | |
8% { | |
transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg); | |
} | |
13%, | |
16% { | |
transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg); | |
} | |
35%, | |
38% { | |
transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg); | |
} | |
55% { | |
transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg); | |
} | |
} | |
.card.eevee:hover { | |
box-shadow: 0 0 30px -5px white, 0 0 10px -2px white, | |
0 55px 35px -20px rgba(0, 0, 0, 0.5); | |
} | |
.card.eevee:hover:before, | |
.card.eevee.active:before { | |
background-image: linear-gradient( | |
115deg, | |
transparent 20%, | |
var(--color1) 36%, | |
var(--color2) 43%, | |
var(--color3) 50%, | |
var(--color4) 57%, | |
var(--color5) 64%, | |
transparent 80% | |
); | |
} | |
.demo .card { | |
background-image: var(--back); | |
font-size: 2vh; | |
} | |
.demo .card > span { | |
position: relative; | |
top: 45%; | |
} | |
.demo .card:nth-of-type(1), | |
.demo .card:nth-of-type(2), | |
.demo .card:nth-of-type(3) { | |
width: 20vh; | |
height: 27.5vh; | |
box-shadow: inset 0 0 0 1px rgba(white, 0.4), | |
0 25px 15px -10px rgba(0, 0, 0, 0.5); | |
animation: none; | |
} | |
.demo .card:nth-of-type(1), | |
.demo .card:nth-of-type(2), | |
.demo .card:nth-of-type(3) { | |
&:before, | |
&:after { | |
animation: none; | |
// opacity: 1; | |
} | |
} | |
.demo .card:nth-of-type(1) { | |
&:before, | |
&:after { | |
display: none; | |
} | |
} | |
.demo .card:nth-of-type(2) { | |
background: none; | |
&:before { | |
display: none; | |
} | |
} | |
.demo .card:nth-of-type(3) { | |
background: none; | |
&:after { | |
display: none; | |
} | |
} | |
.operator { | |
display: inline-block; | |
vertical-align: middle; | |
font-size: 6vh; | |
} | |
html, | |
body { | |
height: 100%; | |
background-color: #333844; | |
padding: 0; | |
z-index: 1; | |
transform: translate3d(0, 0, 0.1px); | |
} | |
body { | |
color: white; | |
background-color: #333844; | |
font-family: "Heebo", sans-serif; | |
text-align: center; | |
} | |
h1 { | |
display: block; | |
margin: 30px 0; | |
} | |
p { | |
margin-top: 5px; | |
font-weight: 200; | |
} | |
#app { | |
position: relative; | |
} | |
.demo, | |
.cards { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: space-evenly; | |
perspective: 2000px; | |
position: relative; | |
z-index: 1; | |
transform: translate3d(0.1px, 0.1px, 0.1px); | |
} | |
.demo { | |
flex-direction: row; | |
justify-content: center; | |
} | |
@media screen and (min-width: 600px) { | |
.cards { | |
flex-direction: row; | |
} | |
} | |
.cards .card { | |
&:nth-child(2) { | |
&, | |
&:before, | |
&:after { | |
animation-delay: 0.25s; | |
} | |
} | |
&:nth-child(3) { | |
&, | |
&:before, | |
&:after { | |
animation-delay: 0.5s; | |
} | |
} | |
&:nth-child(4) { | |
&, | |
&:before, | |
&:after { | |
animation-delay: 0.75s; | |
} | |
} | |
} | |
p { | |
font-weight: 400; | |
font-size: 18px; | |
padding: 1em; | |
background: rgba(0, 0, 0, 0.3); | |
margin-top: 0; | |
animation: rubberBand 1.5s linear 3s 1; | |
} | |
.promo { | |
margin-top: 50px; | |
} | |
.promo img { | |
margin-top: 10px; | |
max-width: 80%; | |
} | |
p a { | |
color: cyan; | |
} | |
html, | |
body, | |
main { | |
min-height: 100%; | |
} | |
@keyframes rubberBand { | |
from { | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
transform: scale3d(0.95, 1.05, 1); | |
} | |
75% { | |
transform: scale3d(1.05, 0.95, 1); | |
} | |
to { | |
transform: scale3d(1, 1, 1); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment