I_AM_NOT_SPAM kobitoDevelopment
kobitoDevelopment
/ html
Created
July 29, 2022 01:13
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
| <dl> | |
| <dt>ボーダー</dt> | |
| <dd>貫通</dd> | |
| </dl> |
kobitoDevelopment
/ html
Last active
July 29, 2022 05:10
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
| <script src="assets/js/script.js" type="module"></script> |
kobitoDevelopment
/ html
Last active
July 31, 2022 15:17
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
| <!-- viewboxの属性値は x,y,width,height --> | |
| <!-- (1)描画エリア=表示エリア --> | |
| <div> | |
| <svg width="400" height="400" viewBox="0, 0, 400, 400" style="background: #eee"> | |
| <circle cx="50" cy="50" r="50" fill="black" /> | |
| </svg> | |
| </div> | |
| <!-- (2)描画エリアのwidthに対して表示エリアのwidhtが半分 --> | |
| <div> |
kobitoDevelopment
/ JavaScript
Last active
July 31, 2022 15:05
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 svg = document.querySelector("#svg"); | |
| const scaleProperty = parseFloat(getComputedStyle(svg).getPropertyValue("--scale")); | |
| const rotateProperty = parseFloat(getComputedStyle(svg).getPropertyValue("--rotate")); | |
| window.addEventListener("scroll", function () { | |
| const scrollTop = window.pageYOffset || document.documentElement.scrollTop; | |
| svg.style.setProperty("--scale", scaleProperty + scrollTop / 200); | |
| svg.style.setProperty("--rotate", rotateProperty + scrollTop + "deg"); | |
| }); |
kobitoDevelopment
/ html
Created
August 1, 2022 03:07
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
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="svg"> | |
| <circle cx="12" cy="12" r="10" class="circle--1" /> | |
| <circle cx="20" cy="20" r="10" class="circle--2" /> | |
| <!-- <defs>は使用したい効果を定義できる(呼び出されるまで実行しない) --> | |
| <!-- blur 1 --> | |
| <defs> | |
| <filter id="blur1"> | |
| <feGaussianBlur in="SourceGraphics" stdDeviation="1" /> | |
| </filter> | |
| </defs> |
kobitoDevelopment
/ JavaScript
Last active
August 1, 2022 04:01
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 mouseStalker = document.querySelector(".spotlight"); | |
| // 背景 | |
| const backGround = document.querySelectorAll(".background"); | |
| backGround.forEach(function (elem, index) { | |
| elem.setAttribute("width", parseFloat(window.innerWidth)); | |
| elem.setAttribute("height", parseFloat(window.innerHeight)); | |
| }); | |
| // マウスストーカー要素の座標 |
kobitoDevelopment
/ html
Last active
August 1, 2022 16:37
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="button-wrap"> | |
| <button class="down">down</button> | |
| <button class="up">up</button> | |
| </div> | |
| <svg class="overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> | |
| <path class="overlay-path" vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z"> | |
| <!-- 下降アニメーション --> | |
| <!-- begin="hoge.click" でhogeをクリックしたらアニメーション発火という設定も可能。hogeはSVG要素に付与されたIDである必要がある --> | |
| <animate id="animation1" attributeName="d" attributeType="xml" from="M 0 0 V 0 Q 50 0 100 0 V 0 z" to="M 0 0 V 50 Q 50 100 100 50 V 0 z" begin="indefinite" dur="0.3s" calcMode="spline" keyTimes="0;1" keySplines="0.9 0 1.0 1.0" /> |
kobitoDevelopment
/ html
Created
August 2, 2022 05:08
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="track-wrapper"> | |
| <ul class="track"> | |
| <li class="track__item"> | |
| <img src="assets/images/a.jpg" alt="" /> | |
| </li> | |
| <li class="track__item"> | |
| <img src="assets/images/a.jpg" alt="" /> | |
| </li> | |
| <li class="track__item"> | |
| <img src="assets/images/a.jpg" alt="" /> |
kobitoDevelopment
/ html
Last active
June 25, 2024 12:30
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="parallax"> | |
| <div class="parallax__inner js-parallax"> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> |
kobitoDevelopment
/ html
Last active
August 3, 2022 15:07
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> | |
| <div class="blobs"> | |
| <div class="blob blob-1 js-blobTrigger js-blobTarget">menu</div> | |
| <div class="blob blob-sub blob-2 js-blobTarget">1</div> | |
| <div class="blob blob-sub blob-3 js-blobTarget">2</div> | |
| <div class="blob blob-sub blob-4 js-blobTarget">3</div> | |
| <div class="blob blob-sub blob-5 js-blobTarget">4</div> | |
| <div class="blob blob-sub blob-6 js-blobTarget">5</div> | |
| </div> |