Banner full-screen

Change working to newer/older
fug update npm modules
This commit is contained in:
Michał Gdula 2024-05-26 20:14:58 +01:00
parent 3d578f2746
commit e45e012977
6 changed files with 350 additions and 356 deletions

View file

@ -42,11 +42,14 @@ const { title} = Astro.props;
</main>
</body>
<script>
function update(element: HTMLElement) {
element.style.top = `${window.scrollY * 0.75 }px`;
// element.style.transform = `scale(${(window.scrollY * 0.0001) + 1})`;
// element.style.filter = `blur(${window.scrollY * 0.005}px)`;
}
const img = document.querySelector(".banner > img") as HTMLImageElement;
document.addEventListener("scroll", () => {
img.style.top = `${window.scrollY}px`;
img.style.transform = `scale(${(window.scrollY / 10000) + 1})`;
img.style.filter = `blur(${window.scrollY / 100}px)`;
})
document.addEventListener("scroll", () => update(img))
document.addEventListener("DOMContentLoaded", () => update(img))
</script>
</html>

View file

@ -40,14 +40,14 @@ const { post, prev, next, base } = Astro.props;
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
<path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
</svg>
Last
Newer
</a>
)}
</li>
<li>
{next && (
<a class="button" href=`${base}/${next.slug}` id="next">
Next
Older
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
</svg>