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


  • スクロール連動のエフェクトを実装できるライブラリ「AOS」
  • あると便利なスクロールアニメーションライブラリ11選
  • CSSで作成する吹き出しとデザインのアイデア
  • 日本の契約書のためのCSSライブラリ「Keiyaku CSS」
  • CSSグラデーションの作成に役立つジェネレーター・Webサービス11選
RELATED POSTS
  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
  • 【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン
  • 【jQuery】商品一覧ページなどで効果的に使える「Product Preview Slider」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
RECENT POSTS
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】 無料で使えるフリー動画素材サイト10選
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法