• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скрипты uCoz » Выдвижная верхняя панель с красивым эффектом
Выдвижная верхняя панель с красивым эффектом
XemorDioДата: Понедельник, 04.04.2016, 08:16 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline


Красивая выдвижная панель Forkit, в содержимое этого блока можно поместить все что угодно: информеры, мини-чат, реклама, новости и т.д.
В чем чуть скрипта: в правом верхнем углу прикреплена лента, если вначале навести на неё, а потом потащить вниз, то появится блок с контентом.

Теперь, когда разобрались с функциями, приступим к установке.
Для начала заходим в ПУ → Управление дизайном. Далее заходим в Таблицу стилей (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://webo4ka.ru/Ucoz8/index_close.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://webo4ka.ru/Ucoz8/new_1_panel.js"></script>
 
trem200Дата: Понедельник, 30.05.2016, 23:16 | Сообщение # 2
Подполковник
Группа: Проверенные
Сообщений: 112
Награды: 1
Репутация: 1
Статус: Offline
Честно не думаю для кого подойдёт данный скрипт, но возможно я могу ошибаться.
 
Форум Сталкер » Web-раздел » Скрипты uCoz » Выдвижная верхняя панель с красивым эффектом
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика