Анимированная лента Forkit.js - Скрипты Разное - web мастеру ucoz
Приветствую Вас Прохожий | RSS Суббота, 25.03.2017, 00:55
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 6
Гостей: 6
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

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

Анимированная лента Forkit.js Анимированная, лента, Forkit Видео уроки ucozjs
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>


На этом все.

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 3092 | Комментарии: 1 | Рейтинг: 3.4/8 | |Категория: Скрипты Разное | Добавил: Яндекс | Дата: 19.03.2015 | Скачали: 0 | Теги: Forkitjs, лента, анимированная
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 1
1 P0MAH   Дата: 14.02.2016  Время: 15:20   [№ 15525]
У меня что-то не работает


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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Комплексный прогон сайт...

51

2 Нужны дизайнеры

1

3 Вакансия копирайтера/пе...

1

4 Верстка

13

5 Файловик. Уникальные те...

1

6 Продажа ручного рерайта...

0

7 Куплю сайты с трафиком

0

8 Баннер 88х31

11

9 Оцените макет на тему W...

7

10 Оценка картинки

6


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2017


Кнопка 88х31 сайта ucozon.ru