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
| <div class="split-wrap"> | |
| <p class="split-base">split test</p><!-- サイズ確保用 --> | |
| <p class="split split-top" aria-hidden="true">split test</p> | |
| <p class="split split-bottom" aria-hidden="true">split test</p> | |
| </div> |
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 class="filter-header"> | |
| <button class="menu">三</button> | |
| </header> | |
| <div class="content"></div> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
| <defs> | |
| <filter id="goo"> | |
| <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> | |
| <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -7" result="goo" /> | |
| <feBlend in="SourceGraphic" in2="goo" /> |
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
| <div class="conic-container"> | |
| <div class="conic-wrap"> | |
| <div class="conic-shadow"></div> | |
| <div class="conic"></div> | |
| </div> | |
| </div> |
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
| <!-- <main>はデバッグ用 --> | |
| <main> | |
| <p class="gradation-text">Kakkoii</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
| <div class="glitch"> | |
| <p class="origin">Glitch</p> | |
| <p class="text text-1" aria-hidden="true">Glitch</p> | |
| <p class="text text-2" aria-hidden="true">Glitch</p> | |
| <p class="text text-3" aria-hidden="true">Glitch</p> | |
| <p class="text text-4" aria-hidden="true">Glitch</p> | |
| </div> |
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
| <canvas id="myCanvas"></canvas> | |
| <div class="main"> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
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 class="saturate"></header> |
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
| <div class="masked"></div> |
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
| <!-- デバッグ用に高さ確保 --> | |
| <main style="height:300vh;"> | |
| <div class="masked-wrap"> | |
| <div class="masked js-mask"></div> | |
| </div> | |
| </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
| const text = document.querySelector(".js-text"); | |
| const startX = Number(text.getAttribute("dx")); | |
| let currentX = 0; | |
| let totalX; | |
| console.log(startX); | |
| function motionPathAnimation() { | |
| if (totalX < -600) { | |
| currentX = 0; | |
| totalX = startX - currentX; | |
| } |