kobitoDevelopment

<!-- 画像パスに画像が存在しない場合は表示しない -->
<img src="assets/images/icon.ng" onerror="this.remove()" alt="画像">
<!-- 画像パスに画像が存在しない場合はダミー画像を表示する -->
<img src="assets/images/icon.ng" onerror="this.onerror=null;this.src='ダミー画像パス'" alt="画像">

kobitoDevelopment

<p class="hoge">ほげ</p>
<p class="fuga">scaleだけ操作(class着脱)</p>
<p class="piyo">translateXだけ操作(class着脱)</p>
<p class="foo">JSからrotateだけ操作</p>

kobitoDevelopment

<div class="reflect">
  <!-- テキストでも画像でも可 -->
  <p class="reflect-item reflect-target">反射</p>
  <p class="reflect-item reflect-content">反射</p>
</div>

kobitoDevelopment

/* スクロールアニメーションを設定 */

// アニメーションさせる要素を取得
const count = document.querySelector(".count");
// スクロール率を取得
let scrollPercent = 0;

// 線形補完 第一引数:開始時 第二引数:終了時 第三引数:上限
function lerp(x, y, a) {

kobitoDevelopment

const hoge = document.querySelector(".hoge");
let speed = 0;
let rotation = 0;
window.addEventListener("wheel", function (event) {
  speed += event.deltaY * 0.02;
});

function rot() {
  speed *= 0.93; // requestAnimationFrameの呼び出しで+される数値を小さくし続ける
  rotation += speed;

kobitoDevelopment

const parallaxAll = document.querySelectorAll(".js-parallax");
const parallaxCover1 = document.querySelector(".parallax-cover-1");
const parallaxCover1Content = document.querySelector(".js-parallax1");
const parallaxCover1Item = document.querySelector(".parallax-item1");
const parallaxCover2 = document.querySelector(".parallax-cover-2");
const parallaxCover2Content = document.querySelector(".js-parallax2");
const parallaxCover2Item = document.querySelector(".parallax-item2");
const parallaxCover3 = document.querySelector(".parallax-cover-3");
const parallaxCover3Content = document.querySelector(".js-parallax3");
let windowHeight = window.innerHeight;

kobitoDevelopment

/* スクロールアニメーションを設定 */
// スクロール率を取得
let scrollPercent = 0;
const scrollHeight = document.documentElement.scrollHeight; // ページの総スクロール量を取得
const clientHeight = document.documentElement.clientHeight; // デバイス表示領域の高さを取得
document.body.onscroll = function () {
  const scrollTop = document.documentElement.scrollTop; //ブラウザ際上部からのスクロール量を取得
  scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; // 何%スクロールしているかを算出
};
// アニメーションさせる要素を取得

kobitoDevelopment

//
const myCanvas = document.getElementById("myCanvas");

//scene
const scene = new THREE.Scene();

//sizes
const sizes = {
  width: innerWidth,
  height: innerHeight,

kobitoDevelopment

<div class="parallax">
  <div class="parallax__inner js-parallax">
    <!-- img1はiphone本体画像、img2はiphone画面内コンテンツ画像 -->
    <div class="parallax-item1"><img src="assets/images/img1.png" alt=""></div>
    <div class="parallax-item2"><img src="assets/images/img2.png" alt=""></div>
  </div>
</div>
<div class="parallax-end"></div>

kobitoDevelopment

const parallax = document.querySelector(".parallax");
const parallaxContent = document.querySelector(".js-parallax");
const parallaxEnd = document.querySelector(".parallax-end");
let windowHeight = window.innerHeight;
let isIntersecting;

/* パララックス要素が画面内にある場合のみスクロールイベントを発火 開始 */
const observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {