こんにちは。
今回はスターウォーズのイントロ風のアニメーションを実装できるスタイルシート「StarWarsIntro.css」！です。
スターウォーズのイントロのようなテキストがスクロールしていくアニメーションを実装できるCSSライブラリを紹介します。
スターウォーズのイントロ風のアニメーションを実装できるスタイルシート「StarWarsIntro.css」！
StarWarsIntro.css
http://polarnotion.github.io/starwarsintro/
「StarWarsIntro.css」をダウンロードしてみよう！
http://polarnotion.github.io/starwarsintro/にアクセスして「DOWNLOAD CSS」のボタンをクリックしてダウンロードします。
「StarWarsIntro.css」を設置してみよう！
starwarsintro.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="css/starwarsintro.css"> |
html部分を記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!-- Place in Body where you'd like intro to appear --> <div class="star-wars-intro"> <!-- Blue Intro Text --> <p class="intro-text"> A few days ago, during... </p> <!-- Logo Image or Text goes in here --> <h2 class="main-logo"> <img src="img/star-wars-intro.png"> </h2> <!-- All Scrolling Content Goes in here --> <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> <!-- button or link or whatever --> <a href="./StarScroll.zip" class="space-button">Download The Code Now!</a> </div> </div> </div> |
![現場のプロが教えるWeb制作の最新常識[アップデート版] (知らないと困るWebの新ルール)](https://images-fe.ssl-images-amazon.com/images/I/51zOVlKO52L._SS200_.jpg)
現場のプロが教えるWeb制作の最新常識[アップデート版] (知らないと困るWebの新ルール)
いかがでしたか。ここぞという時に使いたいですね。
以上でスターウォーズのイントロ風のアニメーションを実装できるスタイルシート「StarWarsIntro.css」！でした。
