Проблема не определения статуса перекрытия карт
<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.info('Kart önüne tıklandı', event.target);
flipSound.currentTime = 0;
flipSound.play();
console.info('dönüş sesi çalındı', event.target);
});
$(".card").click(function() {
var card = $(this);
var cardId = card.find(".card__num").text();
console.info(cardId);
if (!card.hasClass('flipping')) {
card.addClass('flipping');
if (!card.hasClass("flipped")) {
console.info("is card flag true or false", cardId);
if (!cardFlags[cardId]) {
startAnimation(div);
console.info("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.info("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.info("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.info("Sayfa tamamen yüklendi");
hideLoadingAnimation();
};
</script>
</html>
Привет друзья! На картинке в выпуске посередине перевернутая фиолетовая карточка. Есть две карты выше и ниже, которые совпадают с этой картой. Пока карты перекрывают друг друга спереди и сзади, как я могу легко гарантировать, что нижняя сторона карточек, лицевая сторона которой наполовину видна, не воспроизводит трейлеры при наведении (события мыши в этом случае работать не будут)? с CSS? Я пытаюсь решить эту проблему с помощью очень простых подходов.
card-partially-visible {
pointer-events: none;
}
Имеет ли что-то подобное смысл? Если да, то как определить, видно ли оно частично? Может ли быть готовая функция, которая определит это автоматически?
Возможно, вы сможете проверить z-индекс карточек при наведении курсора мыши с помощью JS, а затем условно добавить стиль CSS ко всем остальным карточкам, используя класс или что-то в этом роде. Но я не уверен, как вы создаете z-индекс карточек Forefront, он каким-то образом динамический или жестко запрограммирован?
—
16.03.2024 21:42
@dale Landry, индекс класса Z карты отображается как auto
—
16.03.2024 21:48
@murattaşçı Следует остановить только две перекрывающиеся карты, или остановка всех остальных подойдет? В последнем случае мы можем сделать это с помощью z-index. Если нет, нам нужно отслеживать, перекрываются карты или нет.
—
16.03.2024 21:53
Собственно, я пытаюсь сделать так, чтобы трейлер не начинался с пылесоса на картах, лицо которых наполовину видно, когда любые две карты накладываются друг на друга лицом к лицу. Я использую функцию Hoover только на картах, лицевая сторона которых полностью видна. @Акшай
—
16.03.2024 21:59
Интересно, возможно, отслеживать положение карточек слева/сверху и т. д. и смотреть, не перекрываются ли они, так же, как если бы вы использовали обнаружение столкновений. ну, определение «верхней» карты должно иметь более высокий z-индекс, в вашем примере кода вы жестко кодируете это как 9999. Итак, если вы проверите левое положение каждой карты по отношению к окну или родительскому элементу div, то вы сможете определить, какие из них «сталкиваются», используя z-индекс в качестве «верхней» карты. Я предполагаю, что эти карты представляют собой видео, которые воспроизводятся автоматически, верно?
—
16.03.2024 22:31
Да, именно так, видео воспроизводится автоматически, когда вы ждете 5 секунд, наведя курсор мыши на лицевую часть карты. @дейл лэндри
—
16.03.2024 22:41
PS... пылесос != наведите курсор.
—
18.03.2024 20:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
249
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Если вы переместите 3D-переход от .card__flipper к самому .card, вы сможете задать любые псевдоэлементы .card.active, ::before и ::after, которые будут закрывать карты позади.
В рабочем примере ниже я сделал псевдоэлементы полупрозрачными красными (т. е. rgba(255, 0, 0, 0.5)), чтобы вы могли их видеть, но обычно вы просто делаете псевдоэлементы прозрачными: rgba(0, 0, 0, 0).
Рабочий пример:
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'}).css({
'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
}).addClass('active');
thisFlipper.addClass('active');
return false;
};
var unflip = function(e) {
card.css({'z-index': '1'}).css({
'transform': 'none'
}).removeClass('active');
flipper.removeClass('active');
};
var bindActions = function() {
card.on('click', flip);
win.on('click', unflip);
}
var init = function() {
bindActions();
};
return {
init: init
};
}());
Flipper.init();
<!-- HOOVER FOR TRAILER -->
let hoverTimeout;
$('.card').hover(function() {
const currentCard = $(this); // Store the current card element in a variable
hoverTimeout = setTimeout(() => {
currentCard.find('.card__front').hide();
currentCard.find('.iframe').show();
var src = currentCard.find('.iframe').attr("src");
currentCard.find('.iframe').attr("src", src);
// Add fullscreen functionality
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', ''));
}
});
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() {
console.info('Kart önüne tıklandı', event.target);
flipSound.currentTime = 0;
flipSound.play();
console.info('dönüş sesi çalındı', event.target);
});
$(".card").click(function() {
var card = $(this);
var cardId = card.find(".card__num").text();
console.info(cardId);
// 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")) {
console.info("is card flag true or false", cardId);
if (!cardFlags[cardId]) {
startAnimation(div);
console.info("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.info("stopped");
card.removeClass("flipped");
}
setTimeout(function() {
card.removeClass('flipping');
}, 1000);
}
});
// Prevent sound on back side click
$(".card__back").click(function(e) {
e.stopPropagation();
});
});
// 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");
});
// 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);
}
// hiding and showing loading animation
function hideLoadingAnimation() {
console.info("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.info("Sayfa tamamen yüklendi");
hideLoadingAnimation();
};.card.active::before,
.card.active::after {
content: '';
position: relative;
z-index: 12;
display: block;
height: 260px;
background-color: rgb(255, 0, 0, 0.5);
}
.card.active::before {
margin-top: -260px;
}
#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;
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.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;
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));
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.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); }
}<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">
<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 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>Не имеет смысла, в приведенном выше примере пользовательский интерфейс кажется странным образом сломанным: если вы коснетесь области чтения, карта снова станет активной. Такое поведение непостоянно, когда вы нажимаете на карты слева/справа... не уверен, что это желательно – ожидаемо.
—
18.03.2024 20:37
@Роко К. Бульян, идея решения показалась креативной, если вас интересует данный ответ, но да, это нарушает пользовательский интерфейс. Внешний вид и оригинальное движение карт искажены.
—
18.03.2024 20:46
Ответ принят как подходящий
Вот живая версия- https://overlap-status.tiiny.site/
Судя по тому, как работает ваш код, я смог найти только один способ отслеживать перекрытие, не внося радикальных изменений в ваш код. Z-индекса недостаточно, поскольку он может идентифицировать только активную карту, а не карты, которые перекрываются. В вашем коде используется transform: translate3d() для перемещения карточек, поэтому я воспользовался им.
Решение: сначала найдите активную карту по getElementsByClassName('active'), затем получите значения внутри style.transform и извлеките из нее координаты translate3d(), используя slice и split. Затем деструктурируйте их для дальнейшего использования. Это дает вам значения x и y из translate3d(). Теперь используйте значение «y», чтобы проверить, перекрывается ли карта с двумя другими карточками, и если да, то удалите событие hover из этих двух карточек. Если после еще одного щелчка активная карточка больше не перекрывается с карточками, добавьте событие наведения обратно к карточкам. Я назвал ваши анонимные функции при наведении, чтобы можно было использовать их с методами on() и off(). Кроме того, это можно дополнительно настроить, манипулируя проверочными значениями по отношению к y.
Следующий код не включает код сценария «// Эффект портала». Я удалил его из-за ограничения количества символов в Stackoverflow. Вам нужно добавить его обратно.
<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.info(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.info('yes');
}
})
</script>
<script>
$(".card").click(function(){
let cord = document.getElementsByClassName('active')[1].style.transform;
[cx,cy,...rest]= cord.slice(12).split('px, ');
console.info(cx,cy);
if ((cy<=300)&&(cy>=100)||((cy>(-300))&&(cy<(-60)))){
$("#batman").off( "mouseenter", onHover);
$("#flash").off( "mouseenter", onHover);
console.info('offed');
let hoverTimeout;
}
else{
console.info('on');
$('#batman, #flash').hover(onHover, onHoverTime);
}
});
</script>
</html>
Спасибо за ответ @Akshay, это обновление действительно для всех совпадений между 6 картами? Кроме того, можете ли вы поделиться всем кодом в виде ссылки на диск?
—
20.03.2024 12:43
@murattaşçı Да, это работает для всех карт. Посетите действующий сайт, если это то, что вы ищете, я загружу его куда-нибудь и поделюсь ссылкой.
—
20.03.2024 12:47
Да, это то, что я хотел, идеально.
—
20.03.2024 15:31
Спасибо. Рад, что это сработало. Вот полный код. github.com/akshyapatil/overlap/blob/main/index.html
—
20.03.2024 16:18
Другие вопросы по теме
Алгоритм преобразования пути SVG в многоугольник пути клипа CSS
Как центрировать текст внизу страницы с помощью CSS?
CSS: блок отображения, первый элемент выровнен неправильно
Каков правильный тип ввода поля для ввода CSS или JavaScript, чтобы избежать нежелательных символов?
Css – как выровнять элемент гибкого центра?
Я работаю над проектом портфолио в Angular 17. Мои Html-классы не вступают в силу
Прокрутите до DIV при нажатии на другой странице и откройте раскрывающийся список часто задаваемых вопросов
JS, проблема со звуком вращения карты, когда вы нажимаете на зеленое пространство под картой, когда она повернута за спину
Как передать реквизиты в модуль CSS в React?
CSS использует Calc для получения секунд в зависимости от ширины области просмотра
Похожие вопросы
Req.body возвращает ReadableStream на моем маршруте NextJS
Запросить Uniswap с помощью GraphQL для получения цены ETH
RTK-запрос: следует ли использовать один и тот же запрос для разных конечных точек, если все они имеют одинаковую структуру данных?
Использование предварительного кэширования рабочего поля для нескольких страниц/маршрута генерирует кеш, но не может найти совпадение
Снова показать варианты ответа, оставив выбор в Qualtrics, используя Javascript
Solr DataImportHandler с использованием ScriptTransformer: функциональность JavaScript сильно ограничена
Каков правильный тип ввода поля для ввода CSS или JavaScript, чтобы избежать нежелательных символов?
Как создать пользовательский компонент выбора с параметрами, передаваемыми в виде HTML вместо реквизита в Vue 3?
Как получить таблицу с сайта github.com с помощью скрипта приложения Google Cheerio
Css – как выровнять элемент гибкого центра?
Ух ты, это чертовски кусок кода. Но нет, вам придется написать что-то подобное самостоятельно, определяя перекрытие ограничивающих рамок, используя некоторые базовые геометрические математические вычисления.