The problem of not detecting the overlap status of the cards
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>Game Cards App</title>
<link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png">
<style>
#main-content {
display: none;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%);
animation: shine 4s linear infinite;
color: white;
font-family: "Lato";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 15px;
text-align: center;
overflow-x: hidden;
}
.card {
float: left;
position: relative;
width: calc(33.33% - 30px + 9.999px);
height: 340px;
margin: 0 30px 30px 0;
perspective: 1000;
}
.card:first-child .card__front {
background:#5271C2;
}
.card__front img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card:first-child .card__num {
text-shadow: 1px 1px rgba(52, 78, 147, 0.8)
}
.card:nth-child(2) .card__front {
background:#35a541;
}
.card:nth-child(2) .card__num {
text-shadow: 1px 1px rgba(34, 107, 42, 0.8);
}
.card:nth-child(3) {
margin-right: 0;
}
.card:nth-child(3) .card__front {
background: #bdb235;
}
.card:nth-child(3) .card__num {
text-shadow: 1px 1px rgba(129, 122, 36, 0.8);
}
.card:nth-child(4) .card__front {
background: #db6623;
}
.card:nth-child(4) .card__num {
text-shadow: 1px 1px rgba(153, 71, 24, 0.8);
}
.card:nth-child(5) .card__front {
background: #3e5eb3;
}
.card:nth-child(5) .card__num {
text-shadow: 1px 1px rgba(42, 64, 122, 0.8);
}
.card:nth-child(6) .card__front {
background: #aa9e5c;
}
.card:nth-child(6) .card__num {
text-shadow: 1px 1px rgba(122, 113, 64, 0.8);
}
.card:last-child {
margin-right: 0;
}
.card__flipper {
cursor: pointer;
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
border: 3.5px solid rgba(255, 215, 0, 0.6);
background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5));
}
.card__front, .card__back {
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 340px;
}
.card__front {
transform: rotateY(0);
z-index: 2;
overflow: hidden;
}
.card__back {
transform: rotateY(180deg) scale(1.1);
background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934);
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.card__back span {
font-weight: bold;
color: white;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card__name {
font-size: 32px;
line-height: 0.9;
font-weight: 700;
}
.card__name span {
font-size: 14px;
}
.card__num {
font-size: 100px;
margin: 0 8px 0 0;
font-weight: 700;
}
@media (max-width: 700px) {
.card__num {
font-size: 70px;
}
}
@media (max-width: 700px) {
.card {
width: 100%;
height: 290px;
margin-right: 0;
float: none;
}
.card .card__front,
.card .card__back {
height: 290px;
overflow: hidden;
}
}
/* Demo */
main {
text-align: center;
}
main h1, main p {
margin: 0 0 12px 0;
}
main h1 {
margin-top: 12px;
font-weight: 300;
}
.fa-github {
color: white;
font-size: 50px;
margin-top: 8px;
}
.tm-container {
display: flex;
justify-content: center;
align-items: center;
}
.tm-letter {
display:inline-block;
font-size:30px;
margin: 0 5px;
margin-top: 10px;
opacity: 0;
transform: translateY(0);
animation: letter-animation 6s ease-in-out infinite;
}
@keyframes letter-animation {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
10%, 40%, 60%, 90% {
opacity: 1;
transform: translateY(-10px);
}
20%, 80% {
opacity: 1;
transform: translateY(0);
}
}
#m-letter {
animation-delay: 1.5s;
}
a {
position: relative;
display: inline-block;
padding: 0px;
}
a::before {
content: '';
position: absolute;
top: 50%; /* Orta konumu */
left: 50%; /* Orta konumu */
transform: translate(-50%, -50%); /* Merkezden düzgün bir şekilde ayarlamak için */
width: 50px;
height: 45px;
border-radius: 50%;
box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8);
filter: blur(4px) brightness(1.5);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: -1;
}
a:hover::before {
opacity: 1;
}
body.hoverEffect {
background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a);
}
#gameCard {
width: 300px;
height: 450px;
margin: 50px auto;
padding: 20px;
border-radius: 15px;
box-shadow:
0 0 50px 10px #FFD700, /* Altın sarısı glow */
0 0 100px 20px #0000FF, /* Mavi glow */
0 0 150px 30px #000033; /* Koyu mavi shadow */
background: rgba(0,0,0,0.7); /* Slightly transparent black to make the ambilight effect visible behind the card */
color:#FFD700; /* Altın sarısı text */
text-align: center;
border: 3px solid #FFD700; /* Altın sarısı border */
}
#gameCardLink span {
font-size: 18px;
margin-right: 5px;
font-weight: bold;
}
#gameCardLink span:last-child {
font-size: 0.79em;
vertical-align: super;
opacity: 0.9;
font-weight: bold;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
#loading-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url('data:image/jpeg;base64,/');
background-repeat: no-repeat;
background-size: cover ;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader {
border-top: 9px solid #00a2ed;
border-radius: 80%;
width: 12vw;
height: 12vw;
animation: spin 2s linear infinite;
position: absolute;
left: 44%;
top: 46%;
transform: translate(-50%, -50%) rotate(0deg);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loading-animation">
<div class="loader"></div>
</div>
<div id="main-content">
<div class="tm-container">
<div class="tm-letter" id="t-letter">T</div>
<div class="tm-letter" id="m-letter">M</div>
</div>
<audio id="flipSound" preload="auto">
<source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav">
</audio>
<main>
<div id="gameCardLink">
<span>G</span>
<span>a</span>
<span>m</span>
<span>e</span>
<span> </span>
<span> </span>
<span>C</span>
<span> </span>
<span>a</span>
<span> </span>
<span>r</span>
<span> </span>
<span>d</span>
<span> </span>
<span>s</span>
<span>®</span>
</div>
<p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p>
</main>
<ul>
<li class="card" >
<div class="card__flipper">
<div class="card__front">
<img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman">
<p class="card__name"><span>Marvel</span><br>Spiderman</p>
<p class="card__num">1</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" />
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>1.89 Bil. $</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman">
<p class="card__name"><span>DC</span><br>Batman</p>
<p class="card__num">2</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>771 Mil. $</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3">
<p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p>
<p class="card__num">3</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>845.4 Mil. $</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam">
<p class="card__name"><span>DC</span><br>Shazam2</p>
<p class="card__num">4</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>462.5 Mil. $</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash">
<p class="card__name"><span>DC</span><br>Flash</p>
<p class="card__num">5</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>560.2 Mil. $</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2">
<p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p>
<p class="card__num">6</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>955.8 Mil. $</span>
</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var Flipper = (function() {
var card = $('.card');
var flipper = card.find('.card__flipper');
var win = $(window);
var flip = function() {
var thisCard = $(this);
var thisFlipper = thisCard.find('.card__flipper');
var offset = thisCard.offset();
var xc = win.width() / 2;
var yc = win.height() / 2;
var docScroll = $(document).scrollTop();
var cardW = thisCard.outerWidth() / 2;
var cardH = thisCard.height() / 2;
var transX = xc - offset.left - cardW;
var transY = docScroll + yc - offset.top - cardH;
// if (offset.top > card.height()) transY = docScroll - offset.top + cardH;
if (win.width() <= 700) transY = 0;
if (card.hasClass('active')) unflip();
thisCard.css({'z-index': '3'}).addClass('active');
thisFlipper.css({
'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
'-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
'-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
}).addClass('active');
return false;
};
var unflip = function(e) {
card.css({'z-index': '1'}).removeClass('active');
flipper.css({
'transform': 'none',
'-webkit-transform': 'none',
'-ms-transform': 'none'
}).removeClass('active');
};
var bindActions = function() {
card.on('click', flip);
win.on('click', unflip);
}
var init = function() {
bindActions();
};
return {
init: init
};
}());
Flipper.init();
</script>
<script>
<!-- HOOVER FOR TRAILER -->
let hoverTimeout;
$('.card').hover(function() {
const currentCard = $(this);
hoverTimeout = setTimeout(() => {
currentCard.find('.card__front').hide();
currentCard.find('.iframe').show();
var src = currentCard.find('.iframe').attr("src");
currentCard.find('.iframe').attr("src", src);
currentCard.find('.iframe').on('click', function() {
$(this).requestFullscreen();
});
}, 5000); // 5000 milliseconds (5 seconds)
}, function() {
clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds
$(this).find('.card__front').show();
$(this).find('.iframe').hide();
var src = $(this).find('.iframe').attr("src");
if (src) {
$(this).find('.iframe').attr("src", src.replace('?autoplay=1', ''));
}
});
</script>
<script>
var cardFlags = {};
$(document).ready(function() {
var flipSound = document.getElementById("flipSound");
$(".card__front").click(function() {
console.log('Kart önüne tıklandı', event.target);
flipSound.currentTime = 0;
flipSound.play();
console.log('dönüş sesi çalındı', event.target);
});
$(".card").click(function() {
var card = $(this);
var cardId = card.find(".card__num").text();
console.log(cardId);
if (!card.hasClass('flipping')) {
card.addClass('flipping');
if (!card.hasClass("flipped")) {
console.log("is card flag true or false", cardId);
if (!cardFlags[cardId]) {
startAnimation(div);
console.log("started");
cardFlags[cardId] = true;
card.addClass("flipped");
}
// Adding canvas to back-side
var div = document.querySelector('.flipped .card__flipper.active .card__back');
var canvas = document.getElementsByClassName('p5Canvas')[0];
if (div && canvas) {
div.appendChild(canvas);
canvas.style.position = 'absolute';
}
} else {
console.log("stopped");
card.removeClass("flipped");
}
setTimeout(function() {
card.removeClass('flipping');
}, 1000);
}
});
// Prevent sound on back side click
$(".card__back").click(function(e) {
e.stopPropagation();
});
});
</script>
<script>
// Body's hoover effect
document.getElementById("gameCardLink").addEventListener("mouseover", function() {
document.body.classList.add("hoverEffect");
});
document.getElementById("gameCardLink").addEventListener("mouseout", function() {
document.body.classList.remove("hoverEffect");
});
</script>
<script>
// Portal effect
var p5Instance;
function startAnimation(div) {
// adding canvas to back-side
var canvas = document.getElementsByClassName('p5Canvas')[0];
if (div && canvas) {
div.appendChild(canvas);
canvas.style.position = 'absolute';
}
const sketch = (p) => {
const createParticleSystem = (location) => {
const origin = location.copy();
const particles = [];
const addParticle = velocity => {
const rand = p.random(0, 1);
if (rand <= .3) {
particles.push(createSparkParticle(origin, velocity.copy()));
} else {
particles.push(createParticle(origin, velocity.copy()));
}
};
const applyForce = force => {
particles.forEach(particle => {
particle.applyForce(force);
});
};
const run = () => {
particles.forEach((particle, index) => {
particle.move();
particle.draw();
if (particle.isDead()) {
particles.splice(index, 1);
}
});
};
return {
origin,
addParticle,
run,
applyForce
};
};
const createSparkParticle = (locationP, velocity) => {
const particle = createParticle(locationP, velocity);
let fade = 255;
const draw = () => {
p.colorMode(p.HSB);
p.stroke(16, 62, 100, fade);
const arrow = velocity.copy().normalize().mult(p.random(2, 4));
const direction = p5.Vector.add(particle.location, arrow);
p.line(particle.location.x, particle.location.y, direction.x, direction.y);
};
const move = () => {
particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4)));
particle.velocity.add(particle.acc);
particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4)));
particle.acc.mult(0);
fade -= 5;
};
return {
...particle,
draw,
move
}
}
const createParticle = (locationP, velocity) => {
const acc = p.createVector(0, 0);
const location = locationP.copy();
let fade = 255;
const fadeMinus = p.randomGaussian(15, 2);
let ligther = 100;
let situate = 62;
const draw = () => {
p.colorMode(p.HSB)
p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade);
const arrow = velocity.copy().mult(2);
const direction = p5.Vector.add(location, arrow);
p.line(location.x, location.y, direction.x, direction.y);
};
const move = () => {
velocity.add(acc);
location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1)));
acc.mult(0);
fade -= fadeMinus;
ligther -= 8;
situate += 8;
};
const applyForce = force => {
acc.add(force);
};
const isDead = () => {
if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) {
return true;
} else {
return false;
}
};
return {
draw,
move,
applyForce,
isDead,
velocity,
location,
acc
};
};
const createMover = () => {
const location = p.createVector(p.width / 2, p.height / 2);
const velocity = p.createVector(0, 0);
const acc = p.createVector(0, 0);
const mass = 10;
let angle = 0;
let angleVelocity = 0;
let angleAcc = 0;
let len = 100;
const particleSystems = [
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location)
];
const getGotoVector = angle => {
const radius = p.map(angleVelocity, 0, 0.3, 0, 80);
const goToVector = p.createVector(
location.x + radius * p.cos(angle),
location.y + radius * p.sin(angle)
);
return goToVector;
};
const draw = () => {
const goToVector = getGotoVector(angle);
particleSystems.forEach(particleSystem => {
particleSystem.run();
});
};
const renderParticleSystem = () => {
particleSystems.forEach(particleSystem => {
const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI));
const prepencular = p.createVector(
(goToVector.y - location.y)*-1,
(goToVector.x - location.x)
);
prepencular.normalize();
prepencular.mult(angleVelocity * 70);
particleSystem.origin.set(goToVector);
particleSystem.addParticle(prepencular);
const gravity = p.createVector(0, 0.3);
particleSystem.applyForce(gravity);
});
};
const move = () => {
angleAcc = 0.005;
angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32);
angle += angleVelocity;
angleAcc = 0;
renderParticleSystem();
};
return {
draw,
move
};
};
let mover;
p.setup = function() {
p.createCanvas(230, 320);
p.clear();
mover = createMover();
}
p.draw = function() {
p.clear();
mover.move();
mover.draw();
}
};
p5Instance = new p5(sketch);
}
</script>
<script>
// hiding and showing loading animation
function hideLoadingAnimation() {
console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor");
var loadingAnimation = document.getElementById("loading-animation");
var mainContent = document.getElementById("main-content");
loadingAnimation.style.display = "none";
mainContent.style.display = "block";
}
window.onload = function() {
console.log("Sayfa tamamen yüklendi");
hideLoadingAnimation();
};
</script>
</html>
Hello friends, In the picture on the issue, there is a purple card turned upside down in the middle. There are 2 cards above and below that overlap with this card. While the cards overlap each other front and back, how can I easily ensure that the bottom side of the cards, whose front side is half visible, does not play trailers with hover (mouse events will not work in this case)? with css? I am trying to solve this problem with very simple approaches.
card-partially-visible {
pointer-events: none;
}
Does something like this make sense? If so, how should you determine if it is partially visible? Could there be a ready-made function that will detect it automatically?
Solution
Here is the live version- https://overlap-status.tiiny.site/
The way the your code works, I could find only one way to track the overlapping without making drastic changes to your code. Z-index isn't enough as it can identify only the active card and not the cards that are being overlapped. Your code uses transform: translate3d() to displace the cards, so I utilised it.
The solution: First, find the active card by getElementsByClassName('active'), then get the values inside the style.transform and extract the translate3d() coordinations from it using slice and split. Then destructure them for further use. This gives you values of x and y of translate3d(). Now use the value of 'y' to check if the card is overlapping with the other two cards and if yes, then remove the hover event from these two cards. If after another click, the active card isn't overlapping with the cards anymore, then add the hover event back to the cards. I have named your anonymous hover functions, so I could use them with on() and off() methods. Also, this can be fine-tuned further by manipulating the checking values against the y.
Following code doesn't include the '// Portal effect' script code. I have removed it because of Stackoverflow's character limit. You need to add it back.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>Game Cards App</title>
<link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png">
<style>
.card-partially-visible {
pointer-events: none;
}
#main-content {
display: none;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%);
animation: shine 4s linear infinite;
color: white;
font-family: "Lato";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 15px;
text-align: center;
overflow-x: hidden;
}
.card {
float: left;
position: relative;
width: calc(33.33% - 30px + 9.999px);
height: 340px;
margin: 0 30px 30px 0;
perspective: 1000;
}
.card:first-child .card__front {
background:#5271C2;
}
.card__front img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card:first-child .card__num {
text-shadow: 1px 1px rgba(52, 78, 147, 0.8)
}
.card:nth-child(2) .card__front {
background:#35a541;
}
.card:nth-child(2) .card__num {
text-shadow: 1px 1px rgba(34, 107, 42, 0.8);
}
.card:nth-child(3) {
margin-right: 0;
}
.card:nth-child(3) .card__front {
background: #bdb235;
}
.card:nth-child(3) .card__num {
text-shadow: 1px 1px rgba(129, 122, 36, 0.8);
}
.card:nth-child(4) .card__front {
background: #db6623;
}
.card:nth-child(4) .card__num {
text-shadow: 1px 1px rgba(153, 71, 24, 0.8);
}
.card:nth-child(5) .card__front {
background: #3e5eb3;
}
.card:nth-child(5) .card__num {
text-shadow: 1px 1px rgba(42, 64, 122, 0.8);
}
.card:nth-child(6) .card__front {
background: #aa9e5c;
}
.card:nth-child(6) .card__num {
text-shadow: 1px 1px rgba(122, 113, 64, 0.8);
}
.card:last-child {
margin-right: 0;
}
.card__flipper {
cursor: pointer;
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
border: 3.5px solid rgba(255, 215, 0, 0.6);
background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5));
}
.card__front, .card__back {
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 340px;
}
.card__front {
transform: rotateY(0);
z-index: 2;
overflow: hidden;
}
.card__back {
transform: rotateY(180deg) scale(1.1);
background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934);
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.card__back span {
font-weight: bold; /* Metni kalın yap */
color: white; /* Beyaz renk */
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card__name {
font-size: 32px;
line-height: 0.9;
font-weight: 700;
}
.card__name span {
font-size: 14px;
}
.card__num {
font-size: 100px;
margin: 0 8px 0 0;
font-weight: 700;
}
@media (max-width: 700px) {
.card__num {
font-size: 70px;
}
}
@media (max-width: 700px) {
.card {
width: 100%;
height: 290px;
margin-right: 0;
float: none;
}
.card .card__front,
.card .card__back {
height: 290px;
overflow: hidden;
}
}
/* Demo */
main {
text-align: center;
}
main h1, main p {
margin: 0 0 12px 0;
}
main h1 {
margin-top: 12px;
font-weight: 300;
}
.fa-github {
color: white;
font-size: 50px;
margin-top: 8px;
}
.tm-container {
display: flex;
justify-content: center;
align-items: center;
}
.tm-letter {
display:inline-block;
font-size:30px;
margin: 0 5px;
margin-top: 10px;
opacity: 0;
transform: translateY(0);
animation: letter-animation 6s ease-in-out infinite;
}
@keyframes letter-animation {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
10%, 40%, 60%, 90% {
opacity: 1;
transform: translateY(-10px);
}
20%, 80% {
opacity: 1;
transform: translateY(0);
}
}
#m-letter {
animation-delay: 1.5s;
}
a {
position: relative;
display: inline-block;
padding: 0px;
}
a::before {
content: '';
position: absolute;
top: 50%; /* Orta konumu */
left: 50%; /* Orta konumu */
transform: translate(-50%, -50%);
width: 50px;
height: 45px;
border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */
box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8);
filter: blur(4px) brightness(1.5); /
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: -1;
}
a:hover::before {
opacity: 1;
}
body.hoverEffect {
background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a);
}
#gameCard {
width: 300px;
height: 450px;
margin: 50px auto;
padding: 20px;
border-radius: 15px;
box-shadow:
0 0 50px 10px #FFD700,
0 0 100px 20px #0000FF,
0 0 150px 30px #000033;
background: rgba(0,0,0,0.7);
color:#FFD700;
text-align: center;
border: 3px solid #FFD700;
}
#gameCardLink span {
font-size: 18px;
margin-right: 5px;
font-weight: bold;
}
#gameCardLink span:last-child {
font-size: 0.79em;
vertical-align: super;
opacity: 0.9;
font-weight: bold;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
#loading-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url('data:image/jpeg;base64,/);
background-repeat: no-repeat;
background-size: cover ;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader {
border-top: 9px solid #00a2ed;
border-radius: 80%;
width: 12vw;
height: 12vw;
animation: spin 2s linear infinite;
position: absolute;
left: 44%;
top: 46%; /
transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loading-animation">
<div class="loader"></div>
</div>
<div id="main-content">
<div class="tm-container">
<div class="tm-letter" id="t-letter">T</div>
<div class="tm-letter" id="m-letter">M</div>
</div>
<audio id="flipSound" preload="auto">
<source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav">
</audio>
<main>
<div id="gameCardLink">
<span>G</span>
<span>a</span>
<span>m</span>
<span>e</span>
<span> </span> <!-- Boşluk eklemek için span ekledik -->
<span> </span>
<span>C</span>
<span> </span>
<span>a</span>
<span> </span>
<span>r</span>
<span> </span>
<span>d</span>
<span> </span>
<span>s</span>
<span>®</span>
</div>
<p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p>
</main>
<ul>
<li id='spider' class="card" >
<div class="card__flipper">
<div class="card__front">
<img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman">
<p class="card__name"><span>Marvel</span><br>Spiderman</p>
<p class="card__num">1</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" />
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>1.89 Bil. $</span>
</div>
</div>
</li>
<li id='batman' class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman">
<p class="card__name"><span>DC</span><br>Batman</p>
<p class="card__num">2</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>771 Mil. $</span>
</div>
</div>
</li>
<li id='guard' class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3">
<p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p>
<p class="card__num">3</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>845.4 Mil. $</span>
</div>
</div>
</li>
<li id='shazam' class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam">
<p class="card__name"><span>DC</span><br>Shazam2</p>
<p class="card__num">4</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>462.5 Mil. $</span>
</div>
</div>
</li>
<li id='flash' class="card">
<div class="card__flipper">
<div class="card__front">
<img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash">
<p class="card__name"><span>DC</span><br>Flash</p>
<p class="card__num">5</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>560.2 Mil. $</span>
</div>
</div>
</li>
<li id='strange' class="card">
<div class="card__flipper">
<div class="card__front">
<img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2">
<p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p>
<p class="card__num">6</p>
</div>
<iframe class="frame"
width="225"
height="340"
src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
<circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
</svg>
<span>955.8 Mil. $</span>
</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var Flipper = (function() {
var card = $('.card');
var flipper = card.find('.card__flipper');
var win = $(window);
var flip = function() {
var thisCard = $(this);
var thisFlipper = thisCard.find('.card__flipper');
var offset = thisCard.offset();
var xc = win.width() / 2;
var yc = win.height() / 2;
var docScroll = $(document).scrollTop();
var cardW = thisCard.outerWidth() / 2;
var cardH = thisCard.height() / 2;
var transX = xc - offset.left - cardW;
var transY = docScroll + yc - offset.top - cardH;
// if (offset.top > card.height()) transY = docScroll - offset.top + cardH;
if (win.width() <= 700) transY = 0;
if (card.hasClass('active')) unflip();
thisCard.css({'z-index': '3'}).addClass('active');
thisFlipper.css({
'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
'-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
'-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
}).addClass('active');
return false;
};
var unflip = function(e) {
card.css({'z-index': '1'}).removeClass('active');
flipper.css({
'transform': 'none',
'-webkit-transform': 'none',
'-ms-transform': 'none'
}).removeClass('active');
};
var bindActions = function() {
card.on('click', flip);
win.on('click', unflip);
}
var init = function() {
bindActions();
};
return {
init: init
};
}());
Flipper.init();
</script>
<script>
<!-- HOOVER FOR TRAILER -->
var hoverTimeout;
function onHover() {
const currentCard = $(this);
hoverTimeout = setTimeout(() => {
currentCard.find('.card__front').hide();
currentCard.find('.iframe').show();
var src = currentCard.find('.iframe').attr("src");
currentCard.find('.iframe').attr("src", src);
currentCard.find('.iframe').on('click', function() {
$(this).requestFullscreen();
});
}, 5000); // 5000 milliseconds (5 seconds)
}
function onHoverTime() {
clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds
$(this).find('.card__front').show();
$(this).find('.iframe').hide();
var src = $(this).find('.iframe').attr("src");
if (src) {
$(this).find('.iframe').attr("src", src.replace('?autoplay=1', ''));
}
};
</script>
<script>
var cardFlags = {};
$(document).ready(function() {
var flipSound = document.getElementById("flipSound");
// Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın.
$(".card__front").click(function() {
flipSound.currentTime = 0;
flipSound.play();
});
$(".card").click(function() {
var card = $(this);
var cardId = card.find(".card__num").text();
// Check if the card is not already flipping to avoid multiple flips
if (!card.hasClass('flipping')) {
card.addClass('flipping');
// Check if the front side is facing the viewer
if (!card.hasClass("flipped")) {
if (!cardFlags[cardId]) {
startAnimation(div);
cardFlags[cardId] = true;
card.addClass("flipped");
}
// Adding canvas to back-side
var div = document.querySelector('.flipped .card__flipper.active .card__back');
var canvas = document.getElementsByClassName('p5Canvas')[0];
if (div && canvas) {
div.appendChild(canvas);
canvas.style.position = 'absolute';
}
} else {
card.removeClass("flipped");
}
setTimeout(function() {
card.removeClass('flipping');
}, 1000);
}
});
// Prevent sound on back side click
$(".card__back").click(function(e) {
e.stopPropagation();
});
});
</script>
<script>
// Body's hoover effect
document.getElementById("gameCardLink").addEventListener("mouseover", function() {
document.body.classList.add("hoverEffect");
});
document.getElementById("gameCardLink").addEventListener("mouseout", function() {
document.body.classList.remove("hoverEffect");
});
</script>
<script>
let ind = document.getElementsByClassName("card");
ind.forEach(c=> c.addEventListener('click', ))
</script>
<script>
// hiding and showing loading animation
function hideLoadingAnimation() {
var loadingAnimation = document.getElementById("loading-animation");
var mainContent = document.getElementById("main-content");
loadingAnimation.style.display = "none";
mainContent.style.display = "block";
}
window.onload = function() {
hideLoadingAnimation();
};
</script>
<script>
let xt, yt;
document.addEventListener('click', ()=>{
let cord = document.getElementsByClassName('active')[1].style.transform;
[cx,cy,...rest]= cord.slice(12).split('px, ');
console.log(cx,cy)
})
</script>
<script> $('.card').on( "mouseenter", onHover).on( "mouseleave", onHoverTime );
</script>
<script>
$(document.body).on('click', function(){
if ( $("#batman").off( "mouseenter", onHover)){
$('#batman, #flash').hover(onHover, onHoverTime);
console.log('yes');
}
})
</script>
<script>
$(".card").click(function(){
let cord = document.getElementsByClassName('active')[1].style.transform;
[cx,cy,...rest]= cord.slice(12).split('px, ');
console.log(cx,cy);
if ((cy<=300)&&(cy>=100)||((cy>(-300))&&(cy<(-60)))){
$("#batman").off( "mouseenter", onHover);
$("#flash").off( "mouseenter", onHover);
console.log('offed');
let hoverTimeout;
}
else{
console.log('on');
$('#batman, #flash').hover(onHover, onHoverTime);
}
});
</script>
</html>
- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors