[ { "path": "index.html", "content": "\n\n\n \n \n \n\n \n \n \n \n \n\n \n \n \n \n Star Wars Intro\n\n \n\n\n \n
\n\n \n

\n A few days ago, during...\n

\n\n \n

\n \n

\n\n \n
\n\n
\n

StarWarsIntro.css
A New Crawl

\n\n
\n\n

\n After years of galactic silence, civilization is on the brink of more Star Wars movies. Now, with the Force already awaken, the people of Earth seek solace in creating websites, memes, and presentations that need the intro crawl we've come to know and love. Make cooler stuff, faster, with our simple CSS library for the Star Wars Intro Crawl.\n

\n\n
\n\n \n Download StarWarsIntro.css\n \n
\n
\n
\n\n
\n
\n
\n

StarWarsIntro.css

\n

A CSS Library for the Star Wars Intro Crawl

\n\n

\n Download CSS\n Product Hunt\n

\n\n

What is this?

\n

Star Wars Intro is a small CSS Library to build your own Star Wars-esk intro. Use it for a movie marathon you're hosting, a browser game intro, a fan site, or pretty much anything else. If you're not interested in Star Wars and/or think it's lame, we've included something you might find interesting.

\n\n

Requirements

\n
\n
\n

To install the Star Wars Into you'll need:

\n
    \n
  • HTML
    • \n
  • CSS
    • \n
\n
\n
\n
\n That's right, the Star Wars Intro doesn't require and javascript or other dependancies.\n
\n
\n
\n\n

Installation

\n

The installation process is simple. Download the css file and add the html sample. You can put anything you want inside of the 'content-body'. The CSS will do the rest.

\n\n 
\n<!-- Place in document head -->\n<link rel=\"stylesheet\" href=\"/path/to/starwarsintro.css\">\n\n<!-- Place in Body where you'd like intro to appear -->\n<div class=\"star-wars-intro\">\n\n  <!-- Blue Intro Text -->\n  <p class=\"intro-text\">\n    A few days ago, during...\n  </p>\n\n  <!-- Logo Image or Text goes in here -->\n  <h2 class=\"main-logo\">\n    <img src=\"img/star-wars-intro.png\">\n  </h2>\n\n  <!-- All Scrolling Content Goes in here -->\n  <div class=\"main-content\">\n\n    <div class=\"title-content\">\n      <p class=\"content-header\">EPISODES IV-VI<br/>A Movie Marathon</p>\n\n      <br>\n\n      <p class=\"content-body\">\n        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.\n      </p>\n\n      <!-- button or link or whatever -->\n      <a href=\"./StarScroll.zip\" class=\"space-button\">Download The Code Now!</a>\n        \n    </div>\n  </div>\n</div>
\n\n
\n May the Force be with you \n
\n
\n
\n
\n\n
\n \n
\n

Get more free plugins.

\n

Let us send more free stuff, right to your inbox.

\n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n Should be Empty: \n
\n
\n
\n \n \n
\n
\n
\n\n \n\n \n \n\n\n" }, { "path": "starwarsintro.css", "content": "/*\nName: StarWarsIntro.css\nURI: polarnotion.github.io/starwarsintro\nAuthor: Polar Notion\nAuthor URI: http://polarnotion.com/\nDescription: A simple CSS library for creating a Star Wars Intro Crawl. May the Force be with you.\nVersion: 1.0\n*/\n\nbody, html{\n height: 100%;\n min-height: 100vh;\n margin: 0px;\n}\n\n.star-wars-intro {\n background: url(\"img/stars-bg.jpg\") center center;\n background-size: cover;\n width: 100%;\n height: 100%;\n font-family: \"Droid Sans\", arial, verdana, sans-serif;\n font-weight: 700;\n color: #EBD71C;\n background-color: #000;\n overflow: hidden;\n position: relative;\n}\n\n.star-wars-intro p.intro-text {\n position: relative;\n max-width: 16em;\n font-size: 200%;\n font-weight: 400;\n margin: 20% auto;\n color: #4ee;\n opacity: 0;\n z-index: 1;\n text-align: center;\n -webkit-animation: intro 2s ease-out;\n -moz-animation: intro 2s ease-out;\n -ms-animation: intro 2s ease-out;\n -o-animation: intro 2s ease-out;\n animation: intro 2s ease-out;\n}\n\n.star-wars-intro .main-content{\n margin-left: auto;\n margin-right: auto;\n position: absolute;\n z-index: 3;\n width: 98%;\n height: 50em;\n bottom: 0;\n font-size: 80px;\n font-weight: bold;\n text-align: justify;\n overflow: hidden;\n transform-origin: 50% 100%;\n transform: perspective(350px) rotateX(25deg);\n}\n\n.star-wars-intro .main-content:after {\n position: absolute;\n content: ' ';\n top: 0;\n bottom: 60%;\n background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);\n pointer-events: none;\n}\n\n.star-wars-intro .space-button {\n color: #EBD71C;\n border: 12px solid #EBD71C;\n padding: 20px;\n background: transparent;\n text-decoration: none;\n margin: 0 auto;\n display: block;\n text-align: center;\n}\n\n.star-wars-intro .space-button:hover {\n background-color: #D2BE03;\n border-color: #D2BE03;\n color: black;\n}\n\n.star-wars-intro .space-button:active,\n.star-wars-intro .space-button:focus {\n background-color: #B8A40A;\n border-color: #B8A40A;\n color: black;\n}\n\n.star-wars-intro .title-content {\n position: absolute;\n top: 100%;\n animation: scroll 120s linear 4s forwards;\n}\n\n.star-wars-intro .title-content > .content-header {\n text-align: center;\n}\n\n/* Main Image Styles */\n\n.star-wars-intro .main-logo {\n position: absolute;\n width: 2.6em;\n left: 50%;\n top: 20vh;\n font-size: 10em;\n text-align: center;\n margin-left: -1.3em;\n line-height: 0.8em;\n letter-spacing: -0.05em;\n color: #000;\n text-shadow: -2px -2px 0 #EBD71C, 2px -2px 0 #EBD71C, -2px 2px 0 #EBD71C, 2px 2px 0 #EBD71C;\n opacity: 0;\n z-index: 1;\n -webkit-animation: logo 5s ease-out 2.5s;\n -moz-animation: logo 5s ease-out 2.5s;\n -ms-animation: logo 5s ease-out 2.5s;\n -o-animation: logo 5s ease-out 2.5s;\n animation: logo 5s ease-out 2.5s;\n}\n\n.star-wars-intro .main-logo > img {\n max-width: 100%;\n}\n\n@-webkit-keyframes intro {\n 0% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { opacity: 0; }\n}\n\n@-moz-keyframes intro {\n 0% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { opacity: 0; }\n}\n\n@-ms-keyframes intro {\n 0% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { opacity: 0; }\n}\n\n@-o-keyframes intro {\n 0% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { opacity: 0; }\n}\n\n@keyframes intro {\n 0% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { opacity: 0; }\n}\n\n\n@-webkit-keyframes logo {\n 0% { -webkit-transform: scale(1); opacity: 1; }\n 50% { opacity: 1; }\n 100% { -webkit-transform: scale(0.1); opacity: 0; }\n}\n\n@-moz-keyframes logo {\n 0% { -moz-transform: scale(1); opacity: 1; }\n 50% { opacity: 1; }\n 100% { -moz-transform: scale(0.1); opacity: 0; }\n}\n\n@-ms-keyframes logo {\n 0% { -ms-transform: scale(1); opacity: 1; }\n 50% { opacity: 1; }\n 100% { -ms-transform: scale(0.1); opacity: 0; }\n}\n\n@-o-keyframes logo {\n 0% { -o-transform: scale(1); opacity: 1; }\n 50% { opacity: 1; }\n 100% { -o-transform: scale(0.1); opacity: 0; }\n}\n\n@keyframes logo {\n 0% { transform: scale(1); opacity: 1; }\n 50% { opacity: 1; }\n 100% { transform: scale(0.1); opacity: 0; }\n}\n\n@keyframes scroll {\n 0% { top: 100%; }\n 100% { top: -170%; }\n}\n\n@media screen and (max-width: 720px) {\n .star-wars-intro .main-content {\n font-size: 35px;\n }\n .star-wars-intro .title-content {\n position: absolute;\n top: 100%;\n animation: scroll 100s linear 4s forwards;\n }\n}\n" } ]