Сегодня я хочу показать вам, как создать титры на вашем сайте с помощью плагина для библиотеки JQuery .

Как сделать титры на сайте с помощью 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.

Вот такие интересные титры можно сделать у себя на сайте. Как их сделать я только что показал, а где применять, думаю, вы придумаете. До свидания.