Як зробити інтро в стилі "зоряних війн".

Відео: Як зробити титри з "зоряних Воєн" в Sony Vegas

Всім привіт! Напевно серед нас є фанати Зоряних Воєн, тому сьогодні ми розглянемо, як зробити інтро в стилі відомого фільму на чистому CSS.

Насправді, все вже давно зроблено. Є така бібліотека під назвою StarWarsIntro.css, яка як раз-таки і створює потрібний нам ефект.

Перейдіть на офіційний сайт і подивіться приклад, він відразу ж запуститься в шапці сайтику.

установка

Щоб встановити таке інтро собі на сайт, не потрібно підключати ніяких скриптів. Все зроблено на чистому HTML і CSS.

Відео: Sony Vegas Pro 13 заставка у вигляді титрів з фільму Star wars

Скачайте CSS файл і додайте HTML Sample. Ви можете помістити що завгодно в `content-body`. Все інше зроблять стилі.

 
rel="Stylesheet"href="/path/to/starwarsintro.css"gt; 
 
 
class="Star-wars-intro"gt; 
 
 
class="Intro-text"gt; 
 A few days ago, during ... 
 
 
 
class="Main-logo"gt; 
src="Img / star-wars-intro.jpg"gt; 
 
 
 
class="Main-content"gt; 
 
class="Title-content"gt; 
class="Content-header"gt;EPISODES IV-VI
A Movie Marathon 
 
 
 
class="Content-body"gt; 
 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. 
 
 
 
href="./StarScroll.zip"class="Space-button"gt;Download The Code Now!

От і все! Ефект прекрасно підійде для кіно, ігри та, звичайно ж, фан-сайту. Хоча, його можна використовувати і в інших місцях, трохи підредагувавши стилі. До речі, не забудьте розібратися, як все це працює! :)

Дякую за увагу!

Поділися в соціальних мережах:

Схожі