Created
September 2, 2025 20:47
-
-
Save raison00/87621a5e1048f9bd6baab7dcfd7351a3 to your computer and use it in GitHub Desktop.
CoordinatorLayout
This file contains hidden or 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
| <header> | |
| <section id="profile"> | |
| <img id="avatar" src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Me"> | |
| <h1>Jane Doe</h1> | |
| <p id="description">Hi! I'm Jane Doe. I work at Super Lorem Ipsum Inc. Morbi vehicula orci vel ipsum pharetra iaculis.</p> | |
| </scrion> | |
| </header> | |
| <main> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel felis lorem. Ut eleifend sit amet leo a hendrerit. Phasellus et lacus porta metus sollicitudin euismod. Sed pharetra orci nulla, id porta velit molestie eu. Curabitur tempor, augue in eleifend volutpat, lectus mi fringilla nisl, sit amet condimentum risus lectus vitae lectus. Quisque convallis metus sed sagittis posuere. Morbi commodo laoreet augue, in sollicitudin est consectetur ac. Morbi rhoncus est nec sem suscipit, ac sollicitudin nisl feugiat. Donec consequat ipsum augue, sed tempus leo consequat sit amet. Integer at tellus massa.</p> | |
| <p>Aliquam erat volutpat. Fusce in diam neque. Praesent sit amet lacus feugiat, porttitor ante eu, maximus diam. Aliquam non est nec est laoreet vestibulum sit amet molestie ex. Sed blandit massa eu convallis convallis. Cras aliquet laoreet sollicitudin. Cras blandit gravida velit. Nulla lobortis dolor mi, ac ornare tellus convallis ut. In egestas sapien nisi, sed viverra leo dictum nec. Suspendisse ac risus tellus. Donec vestibulum a justo nec porta. Morbi elementum augue magna, sit amet ornare ligula faucibus vel. Phasellus rutrum quam et tellus malesuada, in pellentesque leo hendrerit. Integer eget dolor odio. Nullam eget justo vitae est mattis convallis.</p> | |
| </main> |
This file contains hidden or 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
| window.CSS.registerProperty({ | |
| name: `--scroll-y`, | |
| syntax: '<number>', | |
| inherits: true, | |
| initialValue: 0, | |
| }); | |
| function updateScrollProp() { | |
| document.body.style.setProperty('--scroll-y', window.scrollY); | |
| window.requestAnimationFrame(updateScrollProp); | |
| } | |
| updateScrollProp(); |
This file contains hidden or 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
| @import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700"); | |
| :root { | |
| --scroll-y: 0; | |
| } | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: url('https://images.unsplash.com/photo-1588685723157-4bcbf57fba57?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ') no-repeat; | |
| background-size: calc(max(150% - 0.5% * var(--scroll-y), 100%)); | |
| background-position: 50% calc(max(100% - 0.25% * var(--scroll-y), 80%)); | |
| padding-top: calc(15rem - var(--scroll-y) * 0.1rem); | |
| text-align: center; | |
| font-family: Merriweather, serif; | |
| overflow: hidden; | |
| transition: all 0.5s ease-in-out; | |
| $s: calc(max(20% - 0.05% * var(--scroll-y), 5%)); | |
| $a: calc(max(1.0 - 0.001 * var(--scroll-y), 0.7)); | |
| $color: hsla(100, $s, 50%, $a); | |
| #avatar { | |
| display: inline-block; | |
| border-radius: 50%; | |
| border: 0.5rem solid $color; | |
| margin-top: -5rem; | |
| margin-bottom: 1rem; | |
| max-width: 10rem; | |
| opacity: calc(100% - 1% * var(--scroll-y)); | |
| margin-bottom: calc(-0.2rem * var(--scroll-y)); | |
| transform: scale(calc(max(1.0 - 0.005 * var(--scroll-y), 0.0))) ; | |
| transition: all 0.5s ease-in-out 0.25s; | |
| } | |
| #profile { | |
| background-color: $color; | |
| color: #fff; | |
| max-height: calc(max(30rem - 0.1rem * var(--scroll-y), 5rem)); | |
| transition: min-height 0.5s ease-in-out; | |
| } | |
| h1 { | |
| font-size: calc(max(200% - 0.2% * var(--scroll-y), 120%)); | |
| font-weight: bold; | |
| padding: 1rem 0; | |
| } | |
| #description { | |
| line-height: 1.5; | |
| transition: all 0.5s ease-in-out; | |
| transform: translateY(calc(0.01rem * var(--scroll-y))); | |
| padding-bottom: 1.5rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| main { | |
| margin-top: 30rem; | |
| padding: 3rem; | |
| font-size: 150%; | |
| font-family: 'Courier', monospace; | |
| line-height: 1.5; | |
| p { | |
| margin: 1rem; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment