ブートストラップ技術

ブートストラップは、すぐに使用できる多くのコンポーネントから選択できる人気のあるフレームワークです。ブートストラップは、視差スクロールを実装するためのコードを最適化できます。

この章では、Jumbotronコンポーネントを使用して視差スクロールを実装する方法を例を挙げて説明します。

Bootstrap4 Jumbotronを使用した全角視差ページ

ユーザーに大きな「行動を促す」ボックスが表示され、割引やセールに関するコンテンツが含まれているWebサイトを想像してください。通常、ジャンボトロンはそのような場所でアプリケーションを見つけます。ユーザーの注意を引くのに役立つ大きな箱です。

Bootstrapの1つのコンポーネントのみを使用しているため、この例では個別のCSSファイルを作成しません。 HTMLコードに飛び込みましょう。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
         integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
         crossorigin = "anonymous">

      <style>
         .jumbotron{
            margin:15px 30px 0px 30px;
            border-radius:10px;
            background:
            linear-gradient(
               rgba(0, 0, 250, 0.25),
               rgba(125, 250, 250, 0.45)),
               url(img/ruin.jpg);

            background-repeat: no-repeat;
            background-attachment: fixed;
            color:white !important;
            height:440px;
         }
         .page-scroll {
            height:5000px;
         }
         .lead {
            font-family:raleway;
            font-weight:100;
            margin-top:-10px;
         }
      </style>
   </head>

   <body>
      <div class = "jumbotron jumbotron-fluid">
         <div class = "container">
            <h1 class = "display-2">Jumbotron Example</h1>
            <p class = "lead">Example text for parallax using jumbotron</p>
         </div>
      </div>
      <div class = "page-scroll"> </div>
   </body>

</html>

コードの分析

*line 6* はBootstrap 4ライブラリを参照します。 ジャンボトロンのマージンと境界半径を *line 8から11* に指定しています。

33行目で見ることができるように、特定のイメージをロードする大きなボックスを表示するために、jumbotronクラスでdivを作成しています。今回は画像の直接URLがないため、ダウンロードした画像を使用することに注意してください。サンプルの任意の高解像度画像をダウンロードして、 line 16 で指定できます。

上記のコードを実行すると表示される出力を以下に示します-

ジャンボトロンの例

Parallax-scrolling-in-web-design-bootstrap-technique

ブートストラップ技術

Bootstrap4 Jumbotronを使用した全角視差ページ

コードの分析