лёгкий и эффектный JavaScript-скрипт для сайта. При прокрутке страницы вниз появляется стилизованная кнопка в форме ракеты. При наведении активируется анимация пламени из сопла (CSS-анимация с градиентом и blur).
Клик — плавная прокрутка к верху страницы. Работает без зависимостей, адаптивно, не нагружает производительность.


Код
<div id="MrScrollUp" style="display: block; right: 49.5px;">  
  <div class="MrScrollUp1" style="opacity: 0; display: block; background-position: -62px 0px;"></div>  
  <div class="MrScrollUp2"></div>  
  </div>  
  <style>  
  #MrScrollUp div{  
  width:62px;  
  overflow:hidden;  
  position:absolute;  
  left:0;  
  top:0;  
  margin:0;  
  padding:0}  

  #MrScrollUp .MrScrollUp1{  
  background:url(/img/MrScrollUp_raketa.png) no-repeat -62px 0;  
  opacity:0;  
  height:250px;  
  display:none;  
  z-index:1}  
  #MrScrollUp .MrScrollUp2{  
  background:transparent;  
  cursor:pointer;  
  display:block;  
  z-index:2;  
  height:150px}  

  #MrScrollUp{  
  z-index:11;  
  width:62px;  
  height:250px;  
  display:block;  
  overflow:hidden;  
  cursor:default;  
  position:fixed;  
  right:370px;  
  top:95%;  
  background:url(/img/MrScrollUp_raketa.png) no-repeat 0 0px;  
  margin:-125px 0 0;  
  padding:0  
  }  
  </style>  
  <script type="text/javascript" src="/js/MrScrollUp_raketa.js"></script>
Кнопка наверх в виде ракеты с эффектом огня скрипт для сайта
Размер: 13.4 Kb

Комментарии

Минимальная длина комментария - 50 знаков. комментарии модерируются
HTMLSTART » CSS3 - JS - SVG Примеры » Кнопки Вверх и Низ » Кнопка наверх в виде ракеты с эффектом огня скрипт для сайта