banyaha tyrout
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
| 네가 말한 1번 방식대로 하면 hover 하지 않았는데도 이미지 중간에 orange 가 보이는 사이드이펙트가 발생해. 나는 호버하기 전에는 orange 를 보여주고싶지않아. | |
| 맞습니다! 제가 제안한 1번 방식에서 `--stop: 0%`와 `--blur: 0%`가 만나면 이론상으로는 아무것도 안 보여야 하지만, 브라우저가 그라데이션의 아주 미세한 경계면을 처리하는 과정에서 1픽셀 정도의 **오렌지색 점**이 중앙에 남는 현상이 발생할 수 있습니다. | |
| 이 "사이드 이펙트"를 완벽하게 해결하면서 **평소엔 100% 숨기고, 호버할 때만 번지게** 만드는 가장 확실한 방법 2가지를 알려드릴게요. | |
| --- | |
| ### 방법 1. 시작 지점을 마이너스로 설정하기 (가장 간단함) |
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
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Black Hole Visualization</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div id="blackhole"> | |
| <div class="centerHover"><span>ENTER</span></div> | |
| </div> |
tyrout
/ chrome-css-scroll-based-animations.markdown
Created
December 19, 2025 10:48
Chrome: CSS Scroll Based Animations