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


  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • 様々なスニペットがまとめられたサイト「LittleSnippets.net」
  • 【CSS】borderで枠線を作成する方法 -初心者向け-
  • 【CSS】text-shadowの使用例をまとめたサイト「Trendy CSS Text Shadows」
  • CSSグラデーションの作成に役立つジェネレーター・Webサービス11選
RELATED POSTS
  • 様々なエフェクトを実装できるパーティクルエンジン「Proton」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • CSSで作成する吹き出しとデザインのアイデア
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)