Skip to content

Instantly share code, notes, and snippets.

View kobitoDevelopment's full-sized avatar

I_AM_NOT_SPAM kobitoDevelopment

View GitHub Profile
<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>
<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" />
<div class="conic-container">
<div class="conic-wrap">
<div class="conic-shadow"></div>
<div class="conic"></div>
</div>
</div>
<!-- <main>はデバッグ用 -->
<main>
<p class="gradation-text">Kakkoii</p>
</main>
<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>
<canvas id="myCanvas"></canvas>
<div class="main">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<header class="saturate"></header>
<div class="masked"></div>
<!-- デバッグ用に高さ確保 -->
<main style="height:300vh;">
<div class="masked-wrap">
<div class="masked js-mask"></div>
</div>
</main>
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;
}