デザパ化　
フェードイン：セクション

要素がウィンドウ画面内に入ったらふわっとフェード＆スライドインする
※SPでも有効

左からフェードイン

[data-designpart-id="642f669ce4dc09621d945b16"] {
  opacity: 0;
}

JavaScriptをコピーする
<script>
const fadeLeftOffsetBottom = 100;
const fadeLeftMove = 100;
const fadeLeftTime = 800;

const fadeLeftSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b16"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateX(${-fadeLeftMove}px)`;
el.style.transition = `${fadeLeftTime}ms`;
});
};

const fadeLeft = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b16"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
}
});
};

const windowScrollFadeLeft = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeLeftOffsetBottom;

fadeLeft(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeLeftSetUp();
windowScrollFadeLeft();
</script>

右からフェードイン

[data-designpart-id="642f669ce4dc09621d945b13"] {
  opacity: 0;
}

JavaScriptをコピーする
<script>
const fadeRightOffsetBottom = 100;
const fadeRightMove = 100;
const fadeRightTime = 800;

const fadeRightSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b13"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateX(${fadeRightMove}px)`;
el.style.transition = `${fadeRightTime}ms`;
});
};

const fadeRight = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b13"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
}
});
};

const windowScrollFadeRight = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeRightOffsetBottom;

fadeRight(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeRightSetUp();
windowScrollFadeRight();
</script>

左からフェードイン

[data-designpart-id="642f669ce4dc09621d945b16"] {
  opacity: 0;
}

JavaScriptをコピーする
<script>
const fadeLeftOffsetBottom = 100;
const fadeLeftMove = 100;
const fadeLeftTime = 800;

const fadeLeftSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b16"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateX(${-fadeLeftMove}px)`;
el.style.transition = `${fadeLeftTime}ms`;
});
};

const fadeLeft = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b16"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
}
});
};

const windowScrollFadeLeft = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeLeftOffsetBottom;

fadeLeft(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeLeftSetUp();
windowScrollFadeLeft();
</script>

右からフェードイン

[data-designpart-id="642f669ce4dc09621d945b13"] {
  opacity: 0;
}

JavaScriptをコピーする
<script>
const fadeRightOffsetBottom = 100;
const fadeRightMove = 100;
const fadeRightTime = 800;

const fadeRightSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b13"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateX(${fadeRightMove}px)`;
el.style.transition = `${fadeRightTime}ms`;
});
};

const fadeRight = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b13"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
}
});
};

const windowScrollFadeRight = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeRightOffsetBottom;

fadeRight(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeRightSetUp();
windowScrollFadeRight();
</script>

左からフェードイン

[data-designpart-id="642f669ce4dc09621d945b16"] {
  opacity: 0;
}

JavaScriptをコピーする
<script>
const fadeLeftOffsetBottom = 100;
const fadeLeftMove = 100;
const fadeLeftTime = 800;

const fadeLeftSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b16"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateX(${-fadeLeftMove}px)`;
el.style.transition = `${fadeLeftTime}ms`;
});
};

const fadeLeft = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b16"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
}
});
};

const windowScrollFadeLeft = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeLeftOffsetBottom;

fadeLeft(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeLeftSetUp();
windowScrollFadeLeft();
</script>

右からフェードイン

[data-designpart-id="642f669ce4dc09621d945b13"] {
  opacity: 0;
}

JavaScriptをコピーする
<script>
const fadeRightOffsetBottom = 100;
const fadeRightMove = 100;
const fadeRightTime = 800;

const fadeRightSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b13"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateX(${fadeRightMove}px)`;
el.style.transition = `${fadeRightTime}ms`;
});
};

const fadeRight = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b13"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
}
});
};

const windowScrollFadeRight = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeRightOffsetBottom;

fadeRight(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeRightSetUp();
windowScrollFadeRight();
</script>

上から下にフェードイン

[data-designpart-id="642f669ce4dc09621d945b15"] {
  opacity: 0; 
}

JavaScriptをコピーする
<script>
const fadeDownOffsetBottom = 100;
const fadeDownMove = 100;
const fadeDownTime = 800;

const fadeDownSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b15"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateY(${-fadeDownMove}px)`;
el.style.transition = `${fadeDownTime}ms`;
});
};

const fadeDown = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b15"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateY(0)';
}
});
};

const windowScrollFadeDown = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeDownOffsetBottom;

fadeDown(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeDownSetUp();
windowScrollFadeDown();
</script>

下から上にフェードイン

[data-designpart-id="642f669ce4dc09621d945b14"] {
  opacity: 0; 
}
JavaScriptをコピーする
<script>
const fadeUpOffsetBottom = 100;
const fadeUpMove = 100;
const fadeUpTime = 800;

const fadeUpSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b14"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateY(${fadeUpMove}px)`;
el.style.transition = `${fadeUpTime}ms`;
});
};

const fadeUp = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b14"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateY(0)';
}
});
};

const windowScrollFadeUp = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeUpOffsetBottom;

fadeUp(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeUpSetUp();
windowScrollFadeUp();
</script>

上から下にフェードイン

[data-designpart-id="642f669ce4dc09621d945b15"] {
  opacity: 0; 
}

JavaScriptをコピーする
<script>
const fadeDownOffsetBottom = 100;
const fadeDownMove = 100;
const fadeDownTime = 800;

const fadeDownSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b15"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateY(${-fadeDownMove}px)`;
el.style.transition = `${fadeDownTime}ms`;
});
};

const fadeDown = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b15"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateY(0)';
}
});
};

const windowScrollFadeDown = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeDownOffsetBottom;

fadeDown(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeDownSetUp();
windowScrollFadeDown();
</script>

下から上にフェードイン

[data-designpart-id="642f669ce4dc09621d945b14"] {
  opacity: 0; 
}
JavaScriptをコピーする
<script>
const fadeUpOffsetBottom = 100;
const fadeUpMove = 100;
const fadeUpTime = 800;

const fadeUpSetUp = () => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b14"]').forEach(el => {
el.style.opacity = 0;
el.style.transform = `translateY(${fadeUpMove}px)`;
el.style.transition = `${fadeUpTime}ms`;
});
};

const fadeUp = (scrollTop, scrollBottom, fadePosition) => {
document.querySelectorAll('[data-designpart-id="642f669ce4dc09621d945b14"]').forEach(el => {
const thisPosition = el.getBoundingClientRect().top + window.scrollY;
if (fadePosition > thisPosition) {
el.style.opacity = 1;
el.style.transform = 'translateY(0)';
}
});
};

const windowScrollFadeUp = () => {
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + window.innerHeight;
const fadePosition = scrollBottom - fadeUpOffsetBottom;

fadeUp(scrollTop, scrollBottom, fadePosition);
});
window.dispatchEvent(new Event('scroll'));
};

fadeUpSetUp();
windowScrollFadeUp();
</script>

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

2023-08-23更新

CSSをコピーする
.frame-root .frame-content {
[data-designpart-id="642f669ce4dc09621d945b14"] {
opacity: 1;
}
[data-designpart-id="642f669ce4dc09621d945b15"] {
opacity: 1;
}
[data-designpart-id="642f669ce4dc09621d945b16"] {
opacity: 1;
}
[data-designpart-id="642f669ce4dc09621d945b13"] {
　opacity: 1;
}
}
JSパーツ集ロゴ

      JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

      ※必ず注意点（H列）をご確認の上閲覧ください

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.