Created
November 5, 2024 09:10
-
-
Save chenglou/1e5cfe243996ab2c88d01cdd5e56aeba to your computer and use it in GitHub Desktop.
More test for https://x.com/_chenglou/status/1853718759053422676
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| * { | |
| font-family: monospace; | |
| } | |
| .box { | |
| position: absolute; | |
| border-radius: 8px; | |
| } | |
| /* Add new styles for strips */ | |
| .horizontal-strip { | |
| width: 300px; | |
| height: 40px; | |
| left: 150px; | |
| } | |
| .vertical-strip { | |
| width: 40px; | |
| height: 200px; | |
| } | |
| .horizontal-label { | |
| -webkit-user-select: none; | |
| user-select: none; | |
| position: absolute; | |
| right: 100%; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| margin-right: 10px; | |
| } | |
| .vertical-label { | |
| -webkit-user-select: none; | |
| user-select: none; | |
| position: absolute; | |
| bottom: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| white-space: nowrap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="strip1" class="box horizontal-strip" style="top: 100px;"> | |
| <span class="horizontal-label">Baseline</span> | |
| </div> | |
| <div id="strip2" class="box vertical-strip" style="left: 200px; top: 20px;"> | |
| <span class="vertical-label">1x raf</span> | |
| </div> | |
| <div id="strip3" class="box vertical-strip" style="left: 280px; top: 20px;"> | |
| <span class="vertical-label">2x raf</span> | |
| </div> | |
| <script> | |
| const strip1 = document.getElementById('strip1') | |
| const strip2 = document.getElementById('strip2') | |
| const strip3 = document.getElementById('strip3') | |
| const display1 = document.getElementById('display1') | |
| const display2 = document.getElementById('display2') | |
| strip1.style.top = strip2.style.top = strip3.style.top = '100px' | |
| strip1.style.background = strip2.style.background = strip3.style.background = '#ff69b4' | |
| let strip1State = 0, strip2State = 0, strip3State = 0, strip4State = 0 | |
| function togglePosition(element, boxState) { | |
| const positions = ['300px', '100px'] | |
| element.style.top = positions[boxState % positions.length] | |
| } | |
| let time1 | |
| window.addEventListener('click', () => { | |
| time1 = performance.now() | |
| togglePosition(strip1, strip1State) | |
| strip1State++ | |
| }) | |
| window.addEventListener('click', () => { | |
| requestAnimationFrame((time2) => { | |
| togglePosition(strip2, strip2State) | |
| strip2State++ | |
| }) | |
| }) | |
| window.addEventListener('click', () => { | |
| requestAnimationFrame(() => { | |
| requestAnimationFrame((time3) => { | |
| togglePosition(strip3, strip3State) | |
| strip3State++ | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment