log101/acayip-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pan effect

Browse Source
This commit is contained in:
log101 2024-08-25 17:32:32 +03:00
parent fbe7481edc
commit f37eee66c8
1 changed files with 82 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
index.html
View File

@ -18,9 +18,12 @@
flex-direction: column;
align-items: center;
gap: 8px;
border: 1px solid black;
border: 1px solid white;
padding: 24px 48px;
gap: 24px;
transition-property: transform;
transition-duration: 100ms;
}
#logo-container {
@ -41,31 +44,92 @@
.reverse {
transform: scaleX(-1);
}
@media (prefers-color-scheme: light) {
#logo {
border: 1px solid black;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="logo-container">
<div id="logo">
<div id="brand-reversed" class="brand-name reverse">
<p>A</p>
<p>C</p>
<p>A</p>
<p>Y</p>
<p>İ</p>
<p>P</p>
</div>
<img width="624" height="624" src="/acayip-logo.png" />
<div id="brand" class="brand-name">
<p>A</p>
<p>C</p>
<p>A</p>
<p>Y</p>
<p>İ</p>
<p>P</p>
<div id="pan-container" style="padding: 20px">
<div id="logo">
<div id="brand-reversed" class="brand-name reverse">
<p>A</p>
<p>C</p>
<p>A</p>
<p>Y</p>
<p>İ</p>
<p>P</p>
</div>
<img width="624" height="624" src="/acayip-logo.png" />
<div id="brand" class="brand-name">
<p>A</p>
<p>C</p>
<p>A</p>
<p>Y</p>
<p>İ</p>
<p>P</p>
</div>
</div>
</div>
</div>
<script>
let constrain = 600;
let panContainer = document.getElementById("pan-container");
let ex1Layer = document.getElementById("logo");
function transforms(x, y, el) {
let box = el.getBoundingClientRect();
let calcX = -(y - box.y - box.height / 2) / constrain;
let calcY = (x - box.x - box.width / 2) / constrain;
return (
"perspective(100px) " +
" rotateX(" +
calcX +
"deg) " +
" rotateY(" +
calcY +
"deg) "
);
}
function resetTransform(x, y, el) {
return (
"perspective(100px) " + " rotateX(0deg) " + " rotateY(0deg) "
);
}
function transformElement(el, xyEl) {
el.style.transform = transforms.apply(null, xyEl);
}
function resetElement(el, xyEl) {
el.style.transform = resetTransform.apply(null, xyEl);
}
panContainer.onmousemove = function (e) {
let xy = [e.clientX, e.clientY];
let position = xy.concat([ex1Layer]);
window.requestAnimationFrame(function () {
transformElement(ex1Layer, position);
});
};
panContainer.onmouseleave = function (e) {
let xy = [0, 0];
let position = xy.concat([ex1Layer]);
window.requestAnimationFrame(function () {
resetElement(ex1Layer, position);
});
};
</script>
</body>
</html>