Мобильная версияКод: Выделить всё
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()
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.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);
// 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.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();
});
});
// 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 {
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.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();
};Код: Выделить всё
.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);
}
}Код: Выделить всё
[*]
T
M
[url=https://github.com/murattasci06][i][/i][/url]
[list]
[img]https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg[/img]
Marvel
Spiderman
1
https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080
1.89 Bil. $
[*]
[img]https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg[/img]
DC
Batman
2
https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080
771 Mil. $
[*]
[img]https://wallpapercave.com/wp/wp12279011.jpg[/img]
Marvel
Guardians_of_the_Galaxy_Vol_3
3
https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080
845.4 Mil. $
[*]
[img]https://wallpaperaccess.com/full/8940499.jpg[/img]
DC
Shazam2
4
https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080
462.5 Mil. $
[*]
[img]https://images2.alphacoders.com/131/1316679.jpeg[/img]
DC
Flash
5
https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080
560.2 Mil. $
[*]
[img] https://images3.alphacoders.com/121/1213553.jpg[/img]
Marvel
Dr_Strange_2
6
https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080
955.8 Mil. $
[/list]
Здравствуйте друзья! На картинке в выпуске фиолетовая карточка перевернутый посередине. Есть две карты выше и ниже, которые совпадают с этой картой. Хотя карты перекрывают друг друга спереди и сзади, как я могу легко гарантировать, что нижняя сторона карточек, лицевая сторона которой наполовину видна, не воспроизводит трейлеры при наведении (события мыши в этом случае не будут работать)? с CSS? Я пытаюсь решить эту проблему очень простыми способами.
Код: Выделить всё
card-partially-visible {
pointer-events: none;
}
Может ли существовать готовая функция, которая обнаружит это автоматически?
Подробнее здесь: https://stackoverflow.com/questions/781 ... -the-cards
