Skip to content

Commit

Permalink
U
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zese07
Zese07 authored May 23, 2024
1 parent a97f06a commit c61a1ce
Show file tree
Hide file tree
Showing 3 changed files with 540 additions and 55 deletions.
80 changes: 27 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,39 @@
<img src="src/mlbb.png" alt="Mobile Legends: Bang Bang" class="logo">
<div class="center">
<div class="transparent">
<div class="top">
<img src="src/ecan.png" alt="ECANツ Icon" class="ecan-img">
<div class="ecan-txt">
<h2 style="margin-bottom: 0px; margin-top: 0px;">ECANツ</h2>
<p style="margin-top: 0px; font-size: 0.75em;">Only knows how to play Nana.</p>
<div class="info" data-tilt data-tilt-glare data-tilt-max-glare="0.35" data-tilt-max="10">
<div class="top">
<img src="src/ecan.png" alt="ECANツ Icon" class="ecan-img">
<div class="ecan-txt">
<h2 style="margin-bottom: 0px; margin-top: 0px;">ECANツ</h2>
<p style="margin-top: 0px; font-size: 0.75em;">Only knows how to play Nana.</p>
</div>
<img src="src/nana.gif" alt="Nana" class="nana-gif">
</div>
<img src="src/nana.gif" alt="Nana" class="nana-gif">
</div>
<div class="middle">
<img src="src/nana-icon.png" alt="Nana" class="nana-img">
<img src="src/rank.png" alt="Highest Rank" class="rank-img">
<p class="nana-txt">Hero Power: 4075</p>
<p class="rank-txt">Mythical Glory</p>
</div>
<div class="bottom">
<p class="skins-txt">SKINS:</p>
<div class="bottom-skins">
<img src="src/nana-cm.png" alt="Nana Clockwork Maid" class="skin">
<img src="src/nana-gp.png" alt="Nana Graveyard Party" class="skin">
<img src="src/nana-sp.png" alt="Nana Slumber Party" class="skin">
<img src="src/nana-cc.png" alt="Nana Cyclone Clash" class="skin">
<div class="middle">
<img src="src/nana-icon.png" alt="Nana" class="nana-img">
<img src="src/rank.png" alt="Highest Rank" class="rank-img">
<p class="nana-txt">Hero Power: 4075</p>
<p class="rank-txt">Mythical Glory</p>
</div>
<p class="emotes-txt">BATTLE EMOTES:</p>
<div class="bottom-emotes">
<img src="src/nana-dk.png" alt="Nana Double Kawaii!" class="emote">
<img src="src/nana-nw.png" alt="Nana's Wink" class="emote">
<div class="bottom">
<p class="skins-txt">SKINS:</p>
<div class="bottom-skins">
<img src="src/nana-cm.png" alt="Nana Clockwork Maid" class="skin">
<img src="src/nana-gp.png" alt="Nana Graveyard Party" class="skin">
<img src="src/nana-sp.png" alt="Nana Slumber Party" class="skin">
<img src="src/nana-cc.png" alt="Nana Cyclone Clash" class="skin">
</div>
<p class="emotes-txt">BATTLE EMOTES:</p>
<div class="bottom-emotes">
<img src="src/nana-dk.png" alt="Nana Double Kawaii!" class="emote">
<img src="src/nana-nw.png" alt="Nana's Wink" class="emote">
</div>
</div>
</div>
</div>
</div>

<script>
const center = document.querySelector('.center');

center.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;

const rect = center.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;

const deltaX = mouseX - centerX;
const deltaY = mouseY - centerY;

const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
const maxDistance = Math.sqrt(rect.width * rect.width / 4 + rect.height * rect.height / 4);

const maxRotation = 20;
const rotateX = (deltaY / maxDistance) * maxRotation;
const rotateY = -(deltaX / maxDistance) * maxRotation;

center.style.transform = `translate(-50%, -50%) rotateX(${rotateX}deg) rotateY(${rotateY}deg) perspective(1000px)`;
});

center.addEventListener('mouseleave', () => {
center.style.transform = `translate(-50%, -50%) rotateX(0deg) rotateY(0deg) perspective(1000px)`;
});

</script>
<script src="vanilla-tilt.js"></script>
</body>
</html>
14 changes: 12 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@ body, html {

.transparent {
width: 300px;
height: 400px;
height: 410px;
border-radius: 20px;
}

.info{
border-radius: 20px;
}

Expand All @@ -47,7 +51,9 @@ body, html {
background-color: rgba(57, 82, 123, 1);
border-top-left-radius: 20px;
border-top-right-radius: 20px;

margin-left: 0px;
margin-right: 0px;

}

.ecan-img {
Expand Down Expand Up @@ -78,6 +84,8 @@ body, html {
margin-top: 0px;
margin-bottom: 0px;
background-color: rgba(57, 87, 123, 1);
margin-left: 0px;
margin-right: 0px;
}

.nana-img {
Expand Down Expand Up @@ -121,6 +129,8 @@ body, html {
background-color: rgba(57, 92, 123, 1);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}

.skins-txt, .emotes-txt {
Expand Down
Loading

0 comments on commit c61a1ce

Please sign in to comment.