Как сделать титры на сайте с помощью JQuery.
Сегодня я хочу показать вам, как создать титры на вашем сайте с помощью плагина для библиотеки JQuery.
Зайдите по ссылке: http://epichail.com/endcredits/fim.html И нажмите кнопку "Open Credits", чтобы просмотреть пример того, как это будет выглядеть.
Чтобы скачать необходимые файлы, перейдите по ссылке: https://github.com/malkafly/endcredits/ и нажмите кнопку "Download ZIP", чтобы скачать ZIP архив. Создадим html страничку следующего содержания:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="jumbotron-narrow.css" rel="stylesheet">
<link href="endcredits.css" rel="stylesheet">
</head>
<body>
<a href="#creditos" name="creditos">ссылка</a>
<div id="titles">
<div id="credits">
<div id="the-end">PetPaw.co</div>
<br />
<h1>Cast</h1>
<dl>
<dt>Founder</dt>
<dd>Daniel Malkafly</dd>
<dt>Creative</dt>
<dd>Fabio Munhoz</dd>
<dt>Operations</dt>
<dd>Gabriela Cardoso</dd>
<dt>Business</dt>
<dd>Isabela Cardoso</dd>
<dt>Sales</dt>
<dd>Alex Pinto</dd>
<dt>Social Media</dt>
<dd>Felippe Linhares</dd>
<dt>Tecnical Suport</dt>
<dd>Danilo Costa</dd>
<dt>Developer #1</dt>
<dd>Rafael Albuquerque</dd>
<dt>Developer #2</dt>
<dd>Adrian Borsati</dd>
<dt>Data Base Analysis</dt>
<dd>Leandro Miyabayashi</dd>
<dt>Designer #1</dt>
<dd>Lucas Isvairosvikh</dd>
<dt>Map markers</dt>
<dd>Loraine Vilches</dd>
<dt>Infrastructure</dt>
<dd>Vinicius Moreira</dd>
<dt>Turkey partner</dt>
<dd>Ozgür Dinçer</dd>
</dl>
<h1>Moderators</h1>
<dl>
<dt>Lead Moderator</dt>
<dd>Paloma Perachini</dd>
<dt>Moderator analysis</dt>
<dd>Gabriela Cardoso</dd>
<dt>Moderator #1</dt>
<dd>Gisele Souza</dd>
<dt>Moderator #2</dt>
<dd>Frank Alma</dd>
<dt>Moderator #3</dt>
<dd>Joe Magnata</dd>
</dl>
<h1>Special Thanks</h1>
<p>Cachorro Verde, Cantinho Animal, Diego Carneiro, Maitê Lima, Seiti Kaziami, Cecília Amodeo, FotoPet, Bruno Kenj, Juliana GM, Silvia Valadares, Lucas Romão, and more...</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="endcredits.js"></script>
</body>
</html>
Мы подключаем нужные нам стили и скрипты и создаем ссылку c атрибутом name и href равным creditos. При клике по этой ссылке и будут начинаться наши титры, которые, кстати, пишутся в div'ах с id=titles и credits. В h1 пишутся заголовки, а в dl и dt список. Можно также писать какие-то описания в теге p и вставлять изображения с помощью тега img.
Вот такие интересные титры можно сделать у себя на сайте. Как их сделать я только что показал, а где применять, думаю, вы придумаете. До свидания.
-
Создано 03.06.2014 20:21:34
-
Михаил Русаков
Комментарии (8):
Здравствуйте! А не могли бы вы посвятить следующую статью РНР?
Ответить
Вас интересует что-нибудь конкретное?
Ответить
Ну например было бы неплохо, если бы Вы написали статью про создание класса для проверки данных или глобального класса.
Ответить
А что именно проверять будем? Не писать же про проверку всего, что можно. А вообще, такое, думаю, Вы можете и сами написать, если знаете php на достаточном уровне. Ведь для каждого сайта свои проверки. В скором времени планируется цикл статей по созданию простого движка с нуля, используя шаблон проектирования MVC. Думаю, будет интересно.
Ответить
А когда, примерно, начнется цикл этот статей? Было бы очень интересно.
Ответить
Ближе к концу этого месяца. Числах в 20-ых.
Ответить
Кстати, было бы неплохо, если бы Вы написали статью про паттерн ''Адаптер'' на php
Ответить
Хорошо, скоро будет.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.