ページの下部からせりあがってくるテキストのアニメーションを作りたい

Question

前提・実現したいこと

あるウェブサイトをhtmlやcss、javascriptなどで作っています。今作りたいのは、ページを開いた瞬間から文字がページの最下部からせりあがってくるデザインです。映画のエンドロールのようなイメージです。文字を最下部→所定の位置に移動させる方法が知りたいです。

ソースコード

【中略】
<p class="title">タイトル</p>
【中略】

/* CSSアニメーションの指定 */
.title{
  animation: SlideIn 1.6s infinite;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    transform: translateX(？？？);
  }
  100% {
    transform: translateX(0);
  }
}

お聞きしたいこと

cssのコードに「？？？」と示したところに、ページ全体の高さ（長さ）を入れれば思った通りのアニメーションになるかと思うのですが、javascriptで```
document.documentElement.scrollHeight

Answer 1

「映画のエンドロールのようなイメージ」ということなら、ページの最下部というより、画面の最下部からせりあがってくるということですよね。
画面の最下部からということなら、vhという単位を使えばいいでしょう。100vhが画面の高さになります。

/* CSSアニメーションの指定 */
.title{
  animation: SlideIn 1.6s;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    transform: translatey(100vh);
  }
  100% {
    transform: translatey(0);
  }
}

---

ページの高さということらしいので、js の animateメソッドで。

const el = document.querySelector('.title')
const h = document.documentElement.scrollHeight; 
el.animate({
  transform: ['translatey(' + h + 'px)', 'translatey(0px)']
}, {
  duration: 3000,
  iterations: Infinity
})

ブラウザの幅を変えて高さが変化したときにも対応させる場合は、リサイズイベントからも呼び出すようにします。

Comments

[Kenthe-C]

回答ありがとうございます。
確かにエンドロールというイメージでは100vhを使えば良いように感じますが、今回は最下部から上がってくるアニメーションにしたいと考えています。

[hatena19]

回答に追記しました。

Answer 2

ページ全体の高さ（長さ）を入れれば

可変的な情報を入れたいのであれば、やはりJavaScriptで変化を監視してJavaScriptで処理もさせた方が良いです。

Comments

[Kenthe-C]

回答ありがとうございます。
よければ、CSSのkeyframeにJavaScript で編集を加える方法を教えていただけますか？