generated from saicaca/fuwari
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Testing new parrallaxCard, and update to 404 page
- Loading branch information
kmanns
committed
Jan 16, 2025
1 parent
db9d9a2
commit d76896f
Showing
5 changed files
with
489 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| --- | ||
| // ParallaxCard.astro | ||
| --- | ||
|
|
||
| <script> | ||
| const UPDATE = ({ x, y }: { x: number; y: number }) => { | ||
| const root = document.documentElement; | ||
| const mapRange = (inputLower: number, inputUpper: number, outputLower: number, outputUpper: number, value: number) => { | ||
| const inputRange = inputUpper - inputLower; | ||
| const outputRange = outputUpper - outputLower; | ||
| const normalizedValue = (value - inputLower) / inputRange; | ||
| return outputLower + normalizedValue * outputRange; | ||
| }; | ||
|
|
||
| root.style.setProperty('--x', mapRange(0, window.innerWidth, -1, 1, x).toString()); | ||
| root.style.setProperty('--y', mapRange(0, window.innerHeight, -1, 1, y).toString()); | ||
| }; | ||
|
|
||
| window.addEventListener('pointermove', (e) => UPDATE({ x: e.clientX, y: e.clientY })); | ||
| </script> | ||
|
|
||
| <article> | ||
| <img src="https://assets.codepen.io/605876/do-not-copy-osaka-sky.jpeg" alt="Osaka sky" /> | ||
| <h3>Osaka</h3> | ||
| <img src="https://assets.codepen.io/605876/do-not-copy-osaka-tower.png" alt="Osaka tower" /> | ||
| <div class="blur"> | ||
| <img src="https://assets.codepen.io/605876/do-not-copy-osaka.jpeg" alt="Osaka blur effect" /> | ||
| <div style="--index:7;"></div> | ||
| </div> | ||
| <div class="content"> | ||
| <p> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 24 24" | ||
| fill="currentColor" | ||
| class="w-6 h-6" | ||
| > | ||
| <path | ||
| d="M15.75 8.25a.75.75 0 0 1 .75.75c0 1.12-.492 2.126-1.27 2.812a.75.75 0 1 1-.992-1.124A2.243 2.243 0 0 0 15 9a.75.75 0 0 1 .75-.75Z" | ||
| /> | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z" | ||
| clip-rule="evenodd" | ||
| /> | ||
| </svg> | ||
| <span>Osaka Castle</span> | ||
| </p> | ||
| <p>Osaka, Japan</p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); | ||
|
|
||
| article { | ||
| width: 600px; | ||
| aspect-ratio: 2 / 1.1; | ||
| min-height: 330px; | ||
| position: relative; | ||
| overflow: hidden; | ||
| border-radius: 4em; | ||
| max-width: calc(100% - 2rem); | ||
| background: hsl(0 0% 50%); | ||
| } | ||
|
|
||
| article > img { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 50%; | ||
| translate: -50% 0; | ||
| height: 100%; | ||
| width: 660px; | ||
| object-fit: cover; | ||
| object-position: center 43%; | ||
| user-select: none; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| article > img:first-of-type { | ||
| filter: saturate(1.5) brightness(0.9); | ||
| object-position: calc(-50% + (var(--x) * 30px)) calc(43% + (var(--y) * -20px)); | ||
| } | ||
|
|
||
| article > img:last-of-type { | ||
| object-position: calc(-50% + (var(--x) * 40px)) calc(43% + (var(--y) * -40px)); | ||
| } | ||
|
|
||
| h3 { | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 6%; | ||
| margin: 0; | ||
| font-size: 8rem; | ||
| translate: -50% 0; | ||
| text-transform: uppercase; | ||
| font-family: 'Bebas Neue', sans-serif; | ||
| color: white; | ||
| translate: calc(-50% + (var(--x) * -30px)) calc(var(--y) * -20px); | ||
| } | ||
|
|
||
| .content { | ||
| min-height: 32%; | ||
| position: absolute; | ||
| bottom: 0; | ||
| width: 100%; | ||
| color: white; | ||
| display: grid; | ||
| gap: 0.2rem; | ||
| place-items: center; | ||
| align-content: center; | ||
| padding-bottom: .5rem; | ||
| } | ||
|
|
||
| .content svg { | ||
| width: 20px; | ||
| } | ||
|
|
||
| .content p { | ||
| margin: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .content p:first-of-type::after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 1rem; | ||
| left: 50%; | ||
| width: 6ch; | ||
| background: white; | ||
| height: 1px; | ||
| translate: -50% 0; | ||
| } | ||
|
|
||
| .content p:last-of-type { | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .blur { | ||
| position: absolute; | ||
| inset: 60% 0 -26% 0; | ||
| filter: blur(20px); | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .blur img { | ||
| object-position: calc(-50% + (var(--x) * 40px)) calc(47.5% + (var(--y) * -40px)); | ||
| object-fit: cover; | ||
| left: 50%; | ||
| translate: -50% 0; | ||
| height: 330px; | ||
| position: absolute; | ||
| bottom: 25%; | ||
| width: 660px; | ||
| mask: radial-gradient(50% 100% at 50% 90%, white 50%, transparent); | ||
| filter: saturate(1.5) brightness(0.8); | ||
| } | ||
|
|
||
| :global(:root) { | ||
| --x: 0; | ||
| --y: 0; | ||
| } | ||
|
|
||
| :global(body) { | ||
| min-height: 100vh; | ||
| display: flex; | ||
| place-items: center; | ||
| justify-content: center; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| :global(body::before) { | ||
| --line: color-mix(in lch, canvasText 25%, transparent); | ||
| --size: 60px; | ||
| content: ""; | ||
| height: 100vh; | ||
| width: 100vw; | ||
| position: fixed; | ||
| background: | ||
| linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size), | ||
| linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size); | ||
| mask: linear-gradient(-15deg, transparent 60%, white); | ||
| top: 0; | ||
| z-index: -1; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| layout: 'src/layouts/Layout.astro' | ||
| published: 2025-01-15 | ||
| title: 'This is a Jan Test' | ||
| category: 'mannstech' | ||
| draft: false | ||
| lang: 'en' | ||
| --- | ||
| import ParallaxCard from 'src/components/ParallaxCard.astro' | ||
|
|
||
| <ParallaxCard /> | ||
| test |
Oops, something went wrong.