【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>

  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • CSSで実装するローディングアニメーション「Single Element CSS Spinners」
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
  • マルチボックスのフルスクリーンメニュー「Multibox Menu」
RELATED POSTS
  • 立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
  • 世界の国旗をCSSとdivのみで実装する「CSS Flags」
  • Youtubeのヘッダー・フッターを消す「PrettyEmbed.js」
  • 画像に3Dブラーのホバーエフェクトを掛けられる「tiltfx.js」
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】