Главная » Файлы » Прочие скрипты » jQuery

Креативная анимированная панель "Вверх" на CSS3 и jQuery by Apocalypse для uCoz
14.07.14, 19:43:46



Было скучно, и моя скука вылилась вот в такой полёт фантазии. Быть может, моя панелька пригодится кому-нибудь smile

Для начала посмотрите ДЕМО

Установка:

Сразу после < /head > на нужных страницах вставляйте:
Код
<div class="apotopscrollpanel" title="Вверх">
  <div class="aposcrollarrow0"></div>
  <div class="aposcrollarrow1"></div>
  <div class="aposcrollarrow2"></div>
  <div class="aposcrollarrow3"></div>
  <div class="aposcrollarrow4"></div>
</div>

<script>
  document.onscroll = function() {
  if($('head').offset().top > 100) {
  $('.apotopscrollpanel').fadeIn(300);
  } else {
  $('.apotopscrollpanel').fadeOut(100);
  };
};

$(function() {
  $('.apotopscrollpanel').click(function() {
  $('html,body').animate({scrollTop: 0}, 300);
  });  
});
</script>


Далее в самый низ вашего css вставьте:
Код
.apotopscrollpanel div {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.apotopscrollpanel:hover .aposcrollarrow0 {
  margin-top:45px;
}
.apotopscrollpanel:hover .aposcrollarrow1 {
  margin-top:40px;
}
.apotopscrollpanel:hover .aposcrollarrow2 {
  margin-top:25px;
}
.apotopscrollpanel:hover .aposcrollarrow3 {
  margin-top:15px;
}
.apotopscrollpanel:hover .aposcrollarrow4 {
  margin-top:7px;
}
.apotopscrollpanel {
  position: fixed;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 50px;
  bottom: 0px;
  left: 0px;
  z-index: 50;
  cursor:pointer;
  display:none;
}
.aposcrollarrow0 {
  width: 70%;
  margin-left: -40%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #949494 transparent;
  position: absolute;
  left: 50%;
  margin-top:40px;
  z-index: 55;
}
.aposcrollarrow1 {
  width: 54%;
  margin-left: -32%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #D1D1D1 transparent;
  position: absolute;
  left: 50%;
  margin-top:30px;
  z-index: 55;
}
.aposcrollarrow2 {
  width: 34%;
  margin-left: -22%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #E0E0E0 transparent;
  position: absolute;
  left: 50%;
  margin-top:20px;
  z-index: 55;
}
.aposcrollarrow3 {
  width: 16%;
  margin-left: -13%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #F3F3F3 transparent;
  position: absolute;
  left: 50%;
  margin-top:10px;
  z-index: 55;
}
.aposcrollarrow4 {
  width: 0;
  margin-left: -5%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #FFFFFF transparent;
  position: absolute;
  margin-top: 0px;
  left: 50%;
  z-index: 55;
}


Усё. Материал разработан Apocalypse

ApoTeam © 2014

Категория: jQuery | Добавил: Apocalypse | Теги: Apocalypse, вверх, by, на, Анимированная, креативная, JQuery, панель, CSS3, для
Просмотров: 932 | Загрузок: 0 | Комментарии: 5 | Рейтинг: 1.0/4
Всего комментариев: 5
0
Слав, стили к body убери, а то мало ли, кто - нибудь не допрет) Спасибо за скрипт, довольно креативно, а главное минимум нагрузки.

0
Убрал стили  happy

0
в firefox mozilla , не работает , а так СУПЕР-забрал.спасибо

0
Материал отредактировал. Лиса наотрез отказывалась понимать событие scrollTop(). Заменил на альтернативу. Теперь работает везде

0
нормуль

Имя *:
Email: