【CSS】スターウォーズのイントロを表現できるライブラリ「starwarsintro.css」

スターウォーズで有名な奥行感のあるスクロールテキストを実装できるCSSライブラリ。アイデア次第ではインパクトのある面白いコンテンツが作れそうです。

Star Wars Intro

使い方はダウンロードした「starwarsintro.css」を読み込ませます。

CSS File
<link href="/css/starwarsintro.css" rel="stylesheet" type="text/css">

あとは以下のようにhtmlを記述すれば完成です。

html
<!-- Place in document head -->
<link rel="stylesheet" href="/path/to/starwarsintro.css">

<div class="star-wars-intro">

  <!-- 最初に表示される青字テキスト -->
  <p class="intro-text">
    A few days ago, during...
  </p>

  <!-- 続いて表示される画像かテキスト -->
  <h2 class="main-logo">
    <img src="img/star-wars-intro.png">
  </h2>

  <!-- スクロール表示されるコンテンツ -->
  <div class="main-content">

    <div class="title-content">
      <p class="content-header">EPISODES IV-VI<br/>A Movie Marathon</p>

      <br>

      <p class="content-body">
        After years of galactic silence, civilization is on the brink of a new Star Wars release. Now, with the Force preparing to awaken, the people of Earth seek solace in films of old. With nowhere to turn, they gather in great numbers and watch the original trilogy without rest. Three films. 6 hours. 24 minutes. Popcorn. Slushies. Total elation.
      </p>

      <a href="./StarScroll.zip" class="space-button">Download The Code Now!</a>
        
    </div>
  </div>
</div>


\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • フォントを調べる時に役に立つツール・サイト10選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選
  • 人物の線画イラストをダウンロードできるフリー素材サイト7選
  • イラスト素材サイト「イラストAC」の使い方 (商用利用可)
  • 【2024年3月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )