nurmuhammet/postshop-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

404 add animation

Browse Source
This commit is contained in:
Mekan1206
2026-02-09 22:41:53 +05:00
parent 43272bb1b1
commit 8f49fe0124
1 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
resources/views/errors/404.blade.php
View File

@@ -63,7 +63,7 @@
/* change to alternating star opacities */
.all-stars {
animation: blinkblink 7s linear infinite;
animation: blinkblink 4s linear infinite;
}
@keyframes blinkblink {
@@ -72,6 +72,25 @@
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-25px);
}
100% {
transform: translateY(0px);
}
}
.floating-object {
animation: float 3s ease-in-out infinite;
transform-box: fill-box;
}
.moon {}
input[type=text] {
@@ -100,7 +119,7 @@
<div class="notfound-copy">
<svg aria-labelledby="404" alt="404 Page not found" class="not-found">
<title id="svgtitle1">404 Page not found</title>
<g class="404-text">
<g class="404-text floating-object">
<g opacity=".5" fill="#3B3D3D">
<path
d="M320.1 209.5c0 7.2-6 12.5-13.7 12.5s-13.7-5.4-13.7-12.5v-16.3h-43.8c-8.4 0-14.1-6.4-14.1-13.5 0-.8.8-4.4 2-7L275 84.5c2-4.8 7.2-7.8 12.3-7.8 6.8 0 13.7 6 13.7 12.9 0 1.2 0 2.6-.8 4.4-11.5 26.7-20.9 47.6-32.4 74.2h24.9v-30.4c0-7.2 6-12.5 13.7-12.5 7.4 0 13.7 5.4 13.7 12.5v30.4h2.6c7.6 0 13.3 5.8 13.3 12.3 0 7-5.8 12.5-13.3 12.5h-2.6v16.5zM436.9 123.9v54.7c0 24.3-16.3 43.6-46 43.6s-46-19.3-46-43.6v-54.7c0-26.3 13.9-47.4 46-47.4 32.1.1 46 21.2 46 47.4zm-64.3-1.4v56.1c0 11.3 6.4 19.1 18.3 19.1s18.3-7.8 18.3-19.1v-56.1c0-12.7-5.2-21.7-18.3-21.7s-18.3 9-18.3 21.7zM535 209.5c0 7.2-6 12.5-13.7 12.5s-13.7-5.4-13.7-12.5v-16.3h-43.8c-8.4 0-14.1-6.4-14.1-13.5 0-.8.8-4.4 2-7l38.2-88.2c2-4.8 7.2-7.8 12.3-7.8 6.8 0 13.7 6 13.7 12.9 0 1.2 0 2.6-.8 4.4-11.5 26.7-20.9 47.6-32.4 74.2h24.9v-30.4c0-7.2 6-12.5 13.7-12.5 7.4 0 13.7 5.4 13.7 12.5v30.4h2.6c7.6 0 13.3 5.8 13.3 12.3 0 7-5.8 12.5-13.3 12.5H535v16.5z" />
@@ -137,6 +156,7 @@
</g>
<!-- Moon shadow -->
<g class="moon">
<g class="floating-object">
<path opacity=".5" fill="#3B3D3D" d="M122.7 373.9L-237.1 744l283.8 269.4 279.9-492.8z" />
<!-- Moon color base -->
<g fill="#D1D5D6">
@@ -171,7 +191,38 @@
</g>
</g>
</g>
</g>
</svg>
<script>
// Use requestAnimationFrame for smooth animation performance
let rafId = null;
document.addEventListener('mousemove', (e) => {
if (rafId) return;
rafId = requestAnimationFrame(() => {
const width = window.innerWidth;
const height = window.innerHeight;
const mouseX = e.clientX;
const mouseY = e.clientY;
const xVal = (mouseX - width / 2) / width;
const yVal = (mouseY - height / 2) / height;
const moon = document.querySelector('.moon');
const stars = document.querySelector('.all-stars');
const notFound = document.querySelector('.notfound-copy');
// Parallax factors - adjust multipliers to control speed/depth
if (moon) moon.style.transform = `translate(${xVal * 40}px, ${yVal * 40}px)`;
if (stars) stars.style.transform = `translate(${xVal * 20}px, ${yVal * 20}px)`;
// Inverse movement for foreground to create depth
if (notFound) notFound.style.transform = `translate(${xVal * -30}px, ${yVal * -30}px)`;
rafId = null;
});
});
</script>
</body>
</html>