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>
На этом все.
Взято с сайта
My-WoS.ru Материал подготовил: Endless.