nomad/portofolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Blogposts waves

Browse source
This commit is contained in:
nomad 2025-06-05 23:08:14 +03:00
parent 31b30045f5
commit 1cea18cd66
1 changed files with 86 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/routes/(blog-article)/+layout.svelte
View file

@ -47,6 +47,42 @@
<div class="article-layout"> <div class="article-layout">
<Header showBackground /> <Header showBackground />
<div class="wave-transition">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use
href="#gentle-wave"
x="48"
y="3"
fill="rgba(var(--color--post-page-background-rgb),0.7)"
/>
<use
href="#gentle-wave"
x="-30"
y="6"
fill="rgba(var(--color--post-page-background-rgb),0.6)"
/>
<use
href="#gentle-wave"
x="48"
y="5"
fill="rgba(var(--color--post-page-background-rgb),0.9)"
/>
<use href="#gentle-wave" x="48" y="7" fill="var(--color--post-page-background)" />
</g>
</svg>
</div>
<main> <main>
<article id="article-content"> <article id="article-content">
@ -99,6 +135,56 @@
.article-layout { .article-layout {
--body-background-color: var(--color--post-page-background); --body-background-color: var(--color--post-page-background);
background-color: var(--color--post-page-background); background-color: var(--color--post-page-background);
position: relative;
}
.wave-transition {
height: 40px;
width: 100%;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
z-index: 1;
svg {
position: relative;
width: 100%;
height: 100%;
}
.parallax > use {
animation: move-forever 15s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
@media screen and (prefers-reduced-motion: reduce) {
.parallax > use {
animation: none;
}
}
} }
.crest-wrapper { .crest-wrapper {