Заглавная страница

Добро пожаловать на сюжетную Вики «Зари»!

   <a href="/wiki/Основной_сюжет" class="zarya-card" data-tilt>

           <img src="/images/ сюжет.jpg" alt="Основной сюжет">

Основной сюжет

   </a>

   <a href="/wiki/Места" class="zarya-card" data-tilt>

Места

   </a>

   <a href="/wiki/Персонажи" class="zarya-card" data-tilt>

           <img src="/images/ персонажи.jpg" alt="Персонажи">

Персонажи

   </a>

   <a href="/wiki/Предметы" class="zarya-card" data-tilt>

Предметы

   </a>

<script> document.addEventListener("DOMContentLoaded", () => {

   const cards = document.querySelectorAll('.zarya-card');
   
   cards.forEach(card => {
       card.addEventListener('mousemove', (e) => {
           const rect = card.getBoundingClientRect();
           const x = e.clientX - rect.left; 
           const y = e.clientY - rect.top;  
           
           const centerX = rect.width / 2;
           const centerY = rect.height / 2;
           
           const rotateX = ((y - centerY) / centerY) * -10; 
           const rotateY = ((x - centerX) / centerX) * 10;  
           
           card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
       });
       
       card.addEventListener('mouseleave', () => {
           card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)';
       });
   });

}); </script>