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

66
index.html
View File

@ -18,9 +18,12 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
border: 1px solid black; border: 1px solid white;
padding: 24px 48px; padding: 24px 48px;
gap: 24px; gap: 24px;
transition-property: transform;
transition-duration: 100ms;
} }
#logo-container { #logo-container {
@ -41,12 +44,19 @@
.reverse { .reverse {
transform: scaleX(-1); transform: scaleX(-1);
} }
@media (prefers-color-scheme: light) {
#logo {
border: 1px solid black;
}
}
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title> <title>Vite + TS</title>
</head> </head>
<body> <body>
<div id="logo-container"> <div id="logo-container">
<div id="pan-container" style="padding: 20px">
<div id="logo"> <div id="logo">
<div id="brand-reversed" class="brand-name reverse"> <div id="brand-reversed" class="brand-name reverse">
<p>A</p> <p>A</p>
@ -67,5 +77,59 @@
</div> </div>
</div> </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> </body>
</html> </html>