-
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.
- Loading branch information
1 parent
aed1407
commit f763b87
Showing
22 changed files
with
420 additions
and
187 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 |
|---|---|---|
| @@ -1,42 +1,156 @@ | ||
| #root { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| @layer demo { | ||
| .compare { | ||
| display: grid; | ||
|
|
||
| > * { | ||
| grid-area: 1 / 1; | ||
| } | ||
|
|
||
| > section { | ||
| display: grid; | ||
| place-content: center; | ||
| } | ||
| } | ||
|
|
||
| .before { | ||
| clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); | ||
| } | ||
|
|
||
| .after { | ||
| clip-path: inset(0 0 0 var(--pos, 50%)); | ||
| } | ||
|
|
||
| input[type='range'] { | ||
| z-index: 1; | ||
| appearance: none; | ||
| appearance: none; | ||
| background: transparent; | ||
| cursor: pointer; | ||
|
|
||
| &::-webkit-slider-thumb { | ||
| appearance: none; | ||
| width: 4px; | ||
| height: 100dvh; | ||
| background-color: CanvasText; | ||
| } | ||
|
|
||
| &::-moz-range-thumb { | ||
| appearance: none; | ||
| width: 4px; | ||
| height: 100dvh; | ||
| background-color: CanvasText; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @layer demo.support { | ||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| } | ||
|
|
||
| html { | ||
| block-size: 100%; | ||
| color-scheme: dark light; | ||
| } | ||
|
|
||
| body { | ||
| min-block-size: 100%; | ||
| font-family: system-ui, sans-serif; | ||
| display: grid; | ||
| } | ||
|
|
||
| img { | ||
| max-block-size: 80dvh; | ||
| } | ||
| } | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: 'Figtree', sans-serif; | ||
| } | ||
|
|
||
| body { | ||
| display: grid; | ||
| place-content: center; | ||
| min-height: 100vh; | ||
| background: #000; | ||
| } | ||
|
|
||
| .container { | ||
| position: relative; | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr 1fr 1fr; | ||
| gap: 1em; | ||
| width: 800px; | ||
| height: 500px; | ||
| transition: all 400ms; | ||
| } | ||
|
|
||
| .container:hover .box { | ||
| filter: grayscale(100%) opacity(24%); | ||
| } | ||
|
|
||
| .box { | ||
| position: relative; | ||
| background: var(--img) center center; | ||
| background-size: cover; | ||
| transition: all 400ms; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| .container .box:hover { | ||
| filter: grayscale(0%) opacity(100%); | ||
| } | ||
| .logo:hover { | ||
| filter: drop-shadow(0 0 2em #646cffaa); | ||
|
|
||
| .container:has(.box-1:hover) { | ||
| grid-template-columns: 3fr 1fr 1fr 1fr 1fr; | ||
| } | ||
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
|
|
||
| .container:has(.box-2:hover) { | ||
| grid-template-columns: 1fr 3fr 1fr 1fr 1fr; | ||
| } | ||
|
|
||
| .container:has(.box-3:hover) { | ||
| grid-template-columns: 1fr 1fr 3fr 1fr 1fr; | ||
| } | ||
|
|
||
| .container:has(.box-4:hover) { | ||
| grid-template-columns: 1fr 1fr 1fr 3fr 1fr; | ||
| } | ||
|
|
||
| .container:has(.box-5:hover) { | ||
| grid-template-columns: 1fr 1fr 1fr 1fr 3fr; | ||
| } | ||
|
|
||
| @keyframes logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| .box:nth-child(odd) { | ||
| transform: translateY(-16px); | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| a:nth-of-type(2) .logo { | ||
| animation: logo-spin infinite 20s linear; | ||
| } | ||
| .box:nth-child(even) { | ||
| transform: translateY(16px); | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| .box::after { | ||
| content: attr(data-text); | ||
| position: absolute; | ||
| bottom: 20px; | ||
| background: #000; | ||
| color: #fff; | ||
| padding: 10px 10px 10px 14px; | ||
| letter-spacing: 4px; | ||
| text-transform: uppercase; | ||
| transform: translateY(60px); | ||
| opacity: 0; | ||
| transition: all 400ms; | ||
| } | ||
|
|
||
| .read-the-docs { | ||
| color: #888; | ||
| .box:hover::after { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| transition-delay: 400ms; | ||
| } |
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 |
|---|---|---|
| @@ -1,35 +1,76 @@ | ||
| import { useState } from 'react' | ||
| import reactLogo from './assets/react.svg' | ||
| import viteLogo from '/vite.svg' | ||
| import './App.css' | ||
| import React, { useState } from 'react'; | ||
| import Roboto from './assets/Roboto.svg'; | ||
| import Runner from './assets/Runner.svg'; | ||
| import img1 from './assets/img-1.jpg'; | ||
| import img2 from './assets/img-2.jpg'; | ||
| import img3 from './assets/img-3.jpg'; | ||
| import img4 from './assets/img-4.jpg'; | ||
| import img5 from './assets/img-5.jpg'; | ||
| import './app.css'; | ||
|
|
||
| function App() { | ||
| const [count, setCount] = useState(0) | ||
| const peoples = [ | ||
| { | ||
| img: img1, | ||
| name: 'Renji' | ||
| }, | ||
| { | ||
| img: img2, | ||
| name: 'Sora' | ||
| }, | ||
| { | ||
| img: img3, | ||
| name: 'Kaito' | ||
| }, | ||
| { | ||
| img: img4, | ||
| name: 'Tsuki' | ||
| }, | ||
| { | ||
| img: img5, | ||
| name: 'Mitsui' | ||
| } | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <a href="https://vitejs.dev" target="_blank"> | ||
| <img src={viteLogo} className="logo" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <h1>Vite + React</h1> | ||
| <div className="card"> | ||
| <button onClick={() => setCount((count) => count + 1)}> | ||
| count is {count} | ||
| </button> | ||
| <p> | ||
| Edit <code>src/App.tsx</code> and save to test HMR | ||
| </p> | ||
| </div> | ||
| <p className="read-the-docs"> | ||
| Click on the Vite and React logos to learn more | ||
| </p> | ||
| </> | ||
| ) | ||
| } | ||
| export default function App() { | ||
| const [rangeValue, setRangeValue] = useState<string>('50'); | ||
|
|
||
| export default App | ||
| return ( | ||
| <> | ||
| <div | ||
| className='compare' | ||
| style={ | ||
| { | ||
| '--pos': `${rangeValue}%` | ||
| } as React.CSSProperties | ||
| } | ||
| > | ||
| <section className='before'> | ||
| <img src={Runner} /> | ||
| </section> | ||
| <section className='after'> | ||
| <img src={Roboto} /> | ||
| </section> | ||
| <input | ||
| type='range' | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setRangeValue(e.target.value) | ||
| } | ||
| /> | ||
| </div> | ||
| <div className='container'> | ||
| {peoples.map((item, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`box box-${index + 1}`} | ||
| style={ | ||
| { | ||
| '--img': `url(${item.img})` | ||
| } as React.CSSProperties | ||
| } | ||
| data-text={item.name} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.