Кнопка "Наверх" для сайта CSS3 + JQuery
 | |
| Кнопка с функцией поднятие страницы вверх, где также присутствует красивый эффект исчезновение и появление ее, все благодаря CSS3 и JQuery. Она по умолчанию будет с правой стороны, что пришлось добавить один стиль, это когда при наведение пропадала стрелка и появлялся клик. Размер вы сами можете выставить, так как с ней идут стили и безусловно оттенок цвета, что она шла зеленой, но сделал в сеней гамме. Отлично подойдет под любую тематическую площадку, так как на ней только стрелка светлая указана, что вы можете сменить ее и поставить что то свое. Когда увидел ее, то подумал что простая, но JQuery заинтересовал и решил поставить и посмотреть ее в работе. И здесь она мне напомнила одну кнопку вверх, которая также сделана, только под другим дизайн, а вот эффект почти одинаковый, что можете теперь выбрать, какая вам больше подойдет. Исчезать она также будет плавно, а точнее не просто произвел клик и страница поднялась, а здесь она на какой то момент остается и съезжает, что красиво и оригинально смотрится и это называется волновой эффект. Установка ее не очень сложная, можно все поместить в низ сайта или стили прописать в CSS, что так и сделаем. Так она визуально смотрится на ресурсе в зеленом цвете.  Здесь уже в синем, что выставлено и по установке под таким будет.  Приступаем к установке: Этот скрипт ставим в низ сайта: Код <script src="http://zornet.ru/zorner_ru_1/Abter/knopki/material-scrolltop.js"></script> <button class="material-scrolltop" type="button"></button> <script> $(document).ready(function() { $('body').materialScrollTop({ revealElement: 'header', revealPosition: 'bottom', onScrollEnd: function() { console.log('Scrolling End'); } }); }); </script> В стили CSS прописываем: Код .material-scrolltop { cursor:pointer; display: block; position: fixed; width: 0; height: 0; bottom: 23px; right: 23px; padding: 0; overflow: hidden; outline: none; border: none; border-radius: 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); cursor: hand; border-radius: 50%; background: #4c73af; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1); -ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1); -moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1); -o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1); } .material-scrolltop:hover { background-color: #4c73af; text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5); } .material-scrolltop::before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; border-radius: 100%; background: #415d8a; } .material-scrolltop:active::before { width: 120%; padding-top: 120%; -webkit-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .material-scrolltop.reveal { width: 56px; height: 56px; } .material-scrolltop span { display: block; font-size: 25px; color: #fff; } .material-scrolltop, .material-scrolltop::before { background-image: url(http://zornet.ru/zorner_ru_1/Abter/knopki/top-arrow.svg); background-position: center 50%; background-repeat: no-repeat; } На этом вся установка, что ссылка в стилях идет, она как раз отвечает за светлую стрелку, здесь точно не скажу, подойдет формат PNG, чтоб можно было поменять на что то оригинальное. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
