Вступительные титры из Star Wars на JS+CSS3
Вдохновленный недавно законченым курсом «Learn Jquery in 30 days» и статьей про генерацию изображения в виде кода матрицы, решил прокачать свой js до уровня чуть выше плинтуса, попробовать заработать инвайт и сделать что-нибудь интересное, что-то что можно показать, не сгорая от желания провалится под землю, такому искушенному сообществу как хабр.
Итак, подопытным были выбраны вступительные титры любмого мной цикла «Звездные Войны». В процессе гуляния интернетами, в поисках чьих-нибудь наработок ничего сначала найдено не было. Ну и хорошо, а то затея закончилась бы еще даже не начавшись.
Для создания анимации были выбраны Jquery(что не удивительно, ввиду предпосылок для всей этой затеи) и замечательные CSS3 свойства transform3d. Выбраны они были несмотря на долгое, безрезультатное битье челом в поисковую строку гугла в поисках костылей для кроссбраузерности. Добится идентичной работы в разных браузерах, даже в рамках одного движка(webkit) так и не удалось. Chrome наотрез отказывается показывать титры у нижнего края экрана, и они волшебным образом появляются только на середине анимации, в то время же как Safari исправно все показывает. Firefox заметно подтормаживает, но анимацию тоже отображает правильно.
Оговорюсь сразу, ни времени ни желания подгонять под различные разрешения у меня не было. Поэтому рассчитывалось все под мой рабочий монитор 1600×900. Если что-то где-то не там выскочит, не обессудьте.
Начнем с html-разметки
Весь JS это обычный набор таймеров, приправленный банальнейшими jquery-методами. Как я говорил раньше, на светлый путь познания JS я только вступил, поэтому за говнокод просьба не пинать.
Так как голый JQuery не умеет работать со свойством scale, то для анимации уменьшения картинки был подключен JQuery UI, который позволяет использовать scale в эффектах.
CSS
Здесь интересна только небольшая часть.
Значения свойства (-префикс-)transform были найдены методом научного тыка анализа.
rotateX указывает на наклон элемента относительно оси Х (проще говоря относительно горизонтальной плоскости монитора), translateY определяет смещение по оси Y, translateZ как можно догадаться определяет смещение относительно оси Z.
perspective определяет глубину переспективы, perpective-origin указывает на позицию наблюдателя относительно нашего текста. Эти свойства указываются для родительського элемента узлов с которыми мы работаем.
Рабочий пример*
* Chrome наотрез отказывается показывать титры у нижнего края экрана, и они волшебным образом появляются только на середине анимации, в то время же как Safari исправно все показывает. Firefox заметно подтормаживает, но анимацию тоже отображает правильно.
В процессе гугления материалов наткнулся на реализацию титров на чистом css без js. Тут
Очень хочется услышать советы по поводу гармонизации всего этого хазяйства, улучшению кода, полезных костылей и прочего.
PS Отдельно хочется написать о работе Safari с элементом audio. Я, честно говоря, на некоторе время завис, наблюдая в консоли:
«TypeError: ‘undefined’ is not a function (evaluating ‘document.getElementsTagName(‘audio’)’)».
Поблуждав между спецификацией элемента audio и гуглом — выснил, что Safari не поддерживает audio без установленного в системе QuickTime. Вот вам и standalone-приложение.
Как сделать интро в стиле "Звёздных Войн".
Всем привет! Наверняка среди нас есть фанаты Звёздных Войн, поэтому сегодня мы рассмотрим, как сделать интро в стиле известного фильма на чистом CSS.
На самом деле, все уже давно сделано. Есть такая библиотека под названием StarWarsIntro.css, которая как раз-таки и создает нужный нам эффект.
Перейдите на официальный сайт и посмотрите пример, он сразу же запустится в шапке сайтика.
Установка
Чтобы установить такое интро себе на сайт, не нужно подключать никаких скриптов. Все сделано на чистом HTML и CSS.
Скачайте CSS файл и добавьте HTML Sample. Вы можете поместить что угодно в 'content-body'. Все остальное сделают стили.
<!— Поместите в шапке документа —>
<link rel=»stylesheet» href=»/path/to/starwarsintro.css»>
<!— Поместите в Body, где вы хотите, чтобы было интро —>
<div >
<!— Синий интро текст —>
<p >
A few days ago, during.
</p>
<!— Логотип или текст находятся здесь —>
<h2 >
<img src=»https://myrusakov.ru/img/star-wars-intro.png»>
</h2>
<!— Весь прокручивающийся контент пишется здесь —>
<div >
<p >
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» >Download The Code Now!</a>
Вот и все! Эффект прекрасно подойдет для кино, игры и, конечно же, фан-сайта. Хотя, его можно использовать и в других местах, немного подредактировав стили. Кстати, не забудьте разобраться, как все это работает! 🙂
Спасибо за внимание!
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 1 ):
Работает, круто, но. КАК Я ДЕЛАЛ СВОЙ САЙТ БЕЗ ЄТОГО. Зачем єта клевая фигня? Сделать нет где а не делать — совесть мучает(
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Шести частям «Звездных войн» сделали титры в стиле «Мандалорца»: фото
У сериала «Мандалорец» — а вслед за ним и у «Книги Бобы Фетта» — интересно сделаны титры: по сути, это галерея концепт-артов шоу. Реддитор cubbyarts попробовал представить, как могли бы выглядеть аналогичные титры основных фильмов вселенной «Звездных войн».
Сейчас готовы титры для шести фильмов франшизы, всего планируется создать одиннадцать галерей. Все концепты — официальные, cubbyarts занимается только подбором актов и добавлением надписей.
Как создать текст с прокруткой из звездных войн в PowerPoint
Создание вступления для PowerPoint с использованием подписи «Звездных войн» для сканирования текста во время вступительной сцены — отличный способ увлечь аудиторию, заинтересовать ее и вовлечь в вашу презентацию.
Создание вводного сканирования Star Wars в PowerPoint
Перво-наперво вам нужно добавить изображение ясного звездного ночного неба в качестве фона нашего слайда. Найдите изображение в Интернете или, если удача на вашей стороне и у вас есть хорошая камера, выйдите на улицу и сделайте ее сами.
После того, как вы поместили изображение в PowerPoint, вам нужно будет вставить текстовое поле, чтобы мы могли ввести наш вводный текст. Чтобы добавить текстовое поле, сначала щелкните вкладку «Вставить».
Затем нажмите кнопку «Текстовое поле».
Щелкните и перетащите, чтобы нарисовать текстовое поле. Убедитесь, что вы немного увеличили размер текстового поля.
Убедитесь, что изображение расположено за текстом. Когда будете готовы, введите текст, который должен отображаться.
Стиль шрифта немного изменился в более поздних фильмах, но если вы хотите хотя бы внимательно имитировать стиль текста оригинальной версии 1977 года, вам нужно установить шрифт на следующее:
Цвет: золотой (красный 250, зеленый 190, синий 0)
Стиль шрифта: News Gothic MT; Смелый
Размер шрифта: 44 пт.
Выравнивание: оправдать
После изменения настроек у вас должно получиться что-то вроде этого:
Пришло время изменить перспективу текста. Сначала выберите текстовое поле.
Затем перейдите на вкладку «Формат» и нажмите кнопку «Текстовые эффекты».
В появившемся раскрывающемся меню выберите «3-D Rotation».
Появится другое меню. Здесь выберите вариант «Умеренно расслабленная перспектива» в группе «Перспектива».
Затем вернитесь в меню, в котором мы выбрали нашу перспективу, но на этот раз выберите «Параметры вращения 3-D» внизу.
С правой стороны появится панель «Форматировать фигуру». Внизу измените значение «Поворот по оси Y» на 320 градусов и параметр «Перспектива» на 80 градусов.
Следующая часть немного сложна — вам нужно расположить текстовое поле так, чтобы верх текста находился внизу слайда. Также необходимо убедиться, что текст находится по центру. Для этого щелкните и перетащите текстовое поле. Отрегулируйте ширину текстового поля так, чтобы верхняя строка текста была такой же ширины (или почти такой же ширины), что и ваш слайд.
Затем перейдите на вкладку «Анимация» и щелкните стрелку вниз в правом нижнем углу группы «Анимация».
Внизу появившегося меню выберите «Дополнительные пути движения».
Появится меню «Изменить траекторию движения». Здесь выберите «Вверх», а затем нажмите «ОК».
Вы увидите, что появятся красная и зеленая стрелки, обозначающие конец и начало анимации соответственно. Щелкните и перетащите красную стрелку в самый верх слайда. Удерживайте клавишу Shift при перетаскивании, чтобы линия оставалась прямой.
Теперь перейдите в группу «Advanced Animations» и выберите опцию «Add Animation».
Выберите анимацию «Увеличение / уменьшение» из группы «Акцент».
Вернитесь в группу «Расширенная анимация» и выберите «Панель анимации».
В правой части окна появится панель, отображающая выбранные анимации. Здесь дважды щелкните анимацию «Вверх».
Появится окно с несколькими вариантами анимации «Вверх». Здесь измените настройки «Плавное начало» и «Плавный конец» на ноль, а затем нажмите «ОК».
Затем дважды щелкните анимацию «Увеличить / Уменьшить» в списке, чтобы открыть окно ее настроек. В разделе «Настройки» щелкните стрелку рядом с параметром «Размер». В появившемся раскрывающемся меню введите «10%» в поле «Пользовательский» и нажмите Enter.
Перейдите на вкладку «Время» и щелкните стрелку рядом с параметром «Пуск». Выберите «С предыдущим» и нажмите «ОК».
Теперь вам нужно настроить длину анимации «Вверх». По умолчанию продолжительность анимации составляет всего две секунды, что слишком быстро.
Чтобы настроить время, нажмите и возьмитесь за конец цветной полосы рядом с анимацией. Время зависит от того, сколько текста у вас есть. Мы установим наш на 30 секунд.
Сделайте то же самое для анимации увеличения / уменьшения.
Теперь нам нужно добавить фигуру, которая использует то же изображение, что и фон. Перейдите на вкладку «Вставка» и выберите «Фигуры» в группе «Иллюстрации».
Появится раскрывающееся меню. Выберите «Прямоугольник» из группы «Прямоугольники».
Нарисуйте прямоугольник так, чтобы он закрывал верхнюю половину слайда.
Теперь нам нужно удалить контур прямоугольника. Убедитесь, что фигура выбрана, затем перейдите на вкладку «Главная» и нажмите «Контур фигуры».
В появившемся раскрывающемся меню выберите «Без контура».
Далее нам нужно придать форме то же изображение, что и фон. Для этого вернитесь в группу «Рисование» и выберите «Заливка формы».
В раскрывающемся меню выберите «Изображение». Найдите изображение, которое вы использовали в качестве фона, и выберите его.
Теперь у вас будет то, что кажется одним сплошным фоном. Смысл фигуры в том, чтобы текст исчез за ней.
Если бы вы сейчас воспроизвели слайд-шоу, текст внезапно исчез бы. Чтобы получился более плавный выход, придайте вашей форме мягкие края. Для этого выберите фигуру, перейдите на вкладку «Формат» и выберите «Эффекты рисунка» в группе «Стили рисунков».
В раскрывающемся меню выберите «Мягкие края».
В группе «Варианты мягких краев» выберите последний вариант для самых мягких краев.