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


  • 様々なスニペットがまとめられたサイト「LittleSnippets.net」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • さまざまなスタイルのCSSボタンをコレクションした「Buttons」
  • CSSで出力できるドット絵ジェネレーター「Pixel Art to CSS」
RELATED POSTS
  • コピペするだけで使えるCSSボタンジェネレーターまとめ
  • リアルな水滴を表現できる「Rain & Water Effect Experiments」
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • 【jQuery】エフェクトが魅力的なスライダー「jQuery Hero Slider Plugin」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • ページをめくるようなエフェクトを実装できる「Page Flip Layout」
RECENT POSTS
  • バナーデザイン制作で参考になるバナー広告ギャラリーサイト12選
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選