Кнопка с функцией вверх и вниз для uCoz
 | |
| Сейчас кнопка, которая поднимает и опускает страницу, играет на сайте большую роль. Это безусловно удобность, и когда она не сильно выделяется, то это редкость, что можно увидеть на ресурсе. Просто она идет под фон сайта и видно только саму стрелку, но когда на ее наводишь, то она появляется. Здесь не просто идет замена, а одна уходит по своему эффекту в бок и к примеру с верху появляется другая. Установка: Этот код нужно поставить в низ сайта: Код <div id="polus"><span class="up_down"></span></div> Потом CSS: Код #polus.up > .up_down {width: 15px;height: 15px;float: left;margin: 0px 27px 0px 27px;background: url('http://zornet.ru/ZORNET/drental/up_down.png');} #polus.down > .up_down {width: 15px;height: 15px;float: left;margin: 0px 27px 0px 27px;background: url('http://zornet.ru/ZORNET/drental/up_down.png') 0px -14px;} #polus.up, #polus.down {left: 0px;top: 80px;width: 70px;position: fixed;cursor: pointer;z-index: 9999;} /*animated*/ .animated { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } И остается js, сто также ставим в низ сайта. Код <script> var polusElem = document.getElementById('polus'); var pageYLabel = 0; polusElem.onclick = function() { var pageY = window.pageYOffset || document.documentElement.scrollTop; switch(this.className) { case 'up animated fadeInDown': pageYLabel = pageY; window.scrollTo(0, 0); this.className = 'down animated fadeInUp '; break; case 'down animated fadeInUp ': window.scrollTo(0, pageYLabel); this.className = 'up animated fadeInDown'; } } window.onscroll = function() { var pageY = window.pageYOffset || document.documentElement.scrollTop; var innerHeight = document.documentElement.clientHeight; switch(polusElem.className) { case '': if (pageY > innerHeight) { polusElem.className = 'up animated fadeInDown'; } break; case 'up animated fadeInDown': if (pageY < innerHeight) { polusElem.className = ''; } break; case 'down animated fadeInUp ': if (pageY > innerHeight) { polusElem.className = 'up animated fadeInDown'; } break; }} </script> Работает не сказать что плавно, но очень удобно. Источник: http://kanavas.at.ua/ | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
