so

by damzaky

HTML

<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 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?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"...

CSS

#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),...

JavaScript

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();

var hoverTimeout = {};

function onHover() {
  const currentCard = $(this);

  if (hoverTimeout[currentCard.attr('id')] === undefined) {
    hoverTimeout[currentCard.attr('id')] = [];
  }

  hoverTimeout[currentCard.attr('id')].push(setTimeout(() => {
    currentCard.find('.card__front').hide();
    currentCard.find('iframe').show();
    var src = currentCard.find('iframe').attr("src");
  ...