Анимированная лента Forkit.js

Для разработчиков The Witcher 3 сюжет всегда был важнее сражений с монстрами
В разговоре с порталом Culture.pl о сюжете The Witcher 3 и о том, как разработчикам удалось перенести созданный Анджеем Сапковским мир в видеоигру, Марчин Блоха из CDPR заявил, что хорошее воображение — черта многих польских студий.

Игровые новости

29.12.2016

У EA нет планов по выпуску новой Battlefield в 2017 году
Какой бы успешной ни оказалась Battlefield 1, компания EA, похоже, все-таки не будет больше рисковать с попытками сделать франчайз ежегодным.

Игровые новости

29.12.2016

Counter-Strike: Global Offensive показали на движке Unreal Engine 4
Один из игровых дизайнеров под ником fuze опубликовал двухминутный ролик, в котором продемонстрировал игровой процесс Counter-Strike: Global Offensive от Valve на движке Unreal Engine 4.

Игровые новости

28.12.2016

В сеть утекла дата релиза Red Dead Redemption 2
На просторах всемирной паутины появились фотографии рекламных материалов для Red Dead Redemption 2. И здесь сотрудники Rockstar Games указали дату выхода своей новой игры.

Игровые новости

28.12.2016

Сюжетный директор CDPR не считает The Witcher примером искусства
В интервью порталу Culture.pl сюжетный директор CD Projekt RED Марчин Блаха рассказал, почему не считает The Witcher примером искусства.

Игровые новости

25.12.2016

Цены на рекламу на Igromen.Do.Am Рекламный блок

Мини-чат

Мы Вконтакте

Статистика сайта

Онлайн всего: 1

Гостей: 1

Пользователей: 0

На сайте: Никого нету

[ Пользователи за день ]

Софт-обозрение Мультимедиа Веб - дизайн Про Ucoz SEO Продвижение Заработок Мои статьи Counter-Strike

Анимированная лента Forkit.js

Forkit.js — это экспериментальная анимационная лента, которая позволяет открывает занавес дополнительного контента.
Лучше всякого описания будет демо :)

В этот блок можно засунуть все что угодно: опросы, мини-чат, информеры или все это вместе :)

Установка:
Для начала заходим в ПУ → Управление дизайном. Далее заходим в Таблицу стилей (CSS) и в самый низ ставим:

Код

#forkit_block {
  margin: 0px;
  padding: 50px 0px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

  .forkit_color {color:#ffffff;}

  .forkit {
  position: fixed;
  right: 0;
  top: 0;
  z-index:9999;
  width: 200px;
  height: 150px;

  font-family: 'Lato', sans-serif;
  text-decoration: none;
  }
  .forkit .tag {
  display: block;
  height: 30px;
  width: 200px;

  color: #fff;
  background: #aa0000;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
  box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );

  -webkit-transform-origin: 15px 0px;
  -moz-transform-origin: 15px 0px;
  -ms-transform-origin: 15px 0px;
  -o-transform-origin: 15px 0px;
  transform-origin: 15px 0px;
  }
  .forkit .tag:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 196px;
  height: 26px;
  margin: 1px;
  border: 1px solid rgba( 255, 255, 255, 0.4 );
  }
  .forkit .string {
  display: block;
  height: 1px;
  width: 0px;
  position: absolute;

  background: rgba( 255, 255, 255, 0.7 );
  box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );

  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  }

  .forkit-curtain {
  position: fixed;
  width: 100%;
  height: 100%;
  top: -100%;
  z-index:9999;
  }

  .forkit-curtain {
  text-align: center;
  background: rgba( 0, 0, 0, 0.8 );
  padding-top: 10%;
  position: fixed;
  }
  .close-button {
  position: absolute;
  width: 32px;
  height: 32px;
  right: 20px;
  top: 20px;
  cursor: pointer;
  background:url('http://my-wos.ru/load_scripts/forkit/index.png');

Теперь заходим в верхнюю часть сайта и в самый низ ставим:

Код

<div class="forkit-curtain forkit_color" id="forkit_block">
  <div class="close-button"></div>
  Содержимое блока. Здесь может быть все, что угодно: информеры, мини-чат, реклама, новости и т.д.
  </div>
  <a class="forkit" data-text="Наведи курсор" data-text-detached="Потяни вниз >"><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Хай)"></a>
  <script src="http://my-wos.ru/load_scripts/forkit/new_1.js"></script>

На этом все.

Скрипты

06.01.2016 Автор: Димон Комментариев: 0 Рейтинг: 0.0 / 0 Просмотров: 497 Загрузок: 0

Метки: Forkit.js, Скрипты, лента, анимированная

Поделись ссылкой с друзьями:

Рейтинг Анимированная лента Forkit.js:

0 из 10
Проголосовало: 0

Нет комментариев, но вы можете стать первым, оставив свой комментарий

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

О портале Igromen.Do.Am

Контакты

В помощь пользователям