Мобильная версияКод: Выделить всё
[*] href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Game Cards App
#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); /* Altın sarısı rengi ve parıltılı efekt */
background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); /* Arkaplan gradienti */
}
.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; /* Yukarıdaki boşluğu ayarlayın */
}
.tm-container {
display: flex;
justify-content: center;
align-items: center; /* Eğer dikey merkezleme de istiyorsanız */
/* Diğer gerekli stil tanımlamaları */
}
.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; /* Harf aralarına 10 piksel boşluk ekler */
font-weight: bold; /* Metni kalın yapar */
}
#gameCardLink span:last-child {
font-size: 0.79em; /* ® simgesini küçült */
vertical-align: super; /* ® simgesini yukarı taşı */
opacity: 0.9;
font-weight: bold; /* Metni kalın yapar */
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Siyah gölge ekler */
}
#loading-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://wallpapercrafter.com/desktop1/516243-black-holes-blue-black-holes-space-1080P.jpg");
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; /* Genişliği viewport'un %25'i yapar */
height: 12vw; /* Yüksekliği de viewport'un %25'i yapar */
animation: spin 2s linear infinite; /* Burada spin animasyonunu kullanıyoruz */
position: absolute; /* Pozisyonu mutlaka absolute olarak ayarlamalısınız. */
left: 44%; /* X ekseninde ortalamak için sayfanın yarısı kadar sola kaydırın. */
top: 46%; /* Y ekseninde ortalamak için sayfanın yarısı kadar yukarı kaydırın. */
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]
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");
$(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() {
flipSound.currentTime = 0;
flipSound.play();
});
$(".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");
flipSound.play();
}
setTimeout(function() {
card.removeClass('flipping');
}, 1000); // Adjust the timeout to match your animation duration
}
});
// Prevent sound on back side click
$(".card__back").click(function(e) {
e.stopPropagation();
});
});
// Body's hoover effect
// Portal effect
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();
};
https://drive.google.com/file/d/1OVCaKDnXj-TrPMTFHWDvF- QzLsWB6OKG/view?usp=drive_link
Привет друзья! Пока карты перевернуты обратной стороной, при первом щелчке левой кнопкой мыши по зеленому пространству позади них назначается звук слышно, как повернуть карту обратно. Обычно этот звук здесь не слышен. Этот звук не появляется при последующих нажатиях. В коде:
Код: Выделить всё
$(".card__front").click(function() {
flipSound.currentTime = 0;
flipSound.play();
});
Я надеялся, что звук вращения карты будет слышно только тогда, когда карта поворачивается назад. Вероятно, у меня есть ошибка, которую опытные люди легко заметят.
Подробнее здесь: https://stackoverflow.com/questions/781 ... n-space-un
