Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Для работы этих стрелок вам потребуется jQuery. На forumotion он стоит по умолчанию.

На forumotion работа гарантирована даже в том случае, когда пользователь отключил у себя в браузере скрипты.

Модные стрелки вверх-вниз, без картинок
Выглядит вот так:


Такой код не использует картинок и будет виден даже тогда, когда страница не загрузилась до конца или же пользователь отключил в браузере картинки.

Устанавливаем
Вставляем CSS:
Код:
.yrarrows {
position: fixed;
right: 10px;
top: 40%;
opacity: 0.5;
transition: 0.5s ease all;
-o-transition: 0.5s ease all;
-moz-transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;
}
.yrarrows .top, .yrarrows .bottom {
font-size: 24px;
padding: 5px;
background: rgba(0, 0, 0, 0.75);
font-weight: bold;
color: white !important;
text-decoration: none !important;
width: 32px;
display: block;
height: 32px;
text-align: center;
border-radius: 8px;
line-height: 32px;
margin-bottom: 5px;
}
.yrarrows:hover {
opacity: 0.9;
}

Вставляем HTML на все страницы (идёт вместе со скриптом):
Код:
<div class="yrarrows"><a title="Наверх" href="#top" class="top">↑</a><a href="#bottom" class="bottom" title="Вниз">↓</a></div>

<script type="text/javascript">
  jQuery(document).ready(function () {
  jQuery('.yrarrows .top').click(function () {
    jQuery('html, body').stop().animate({scrollLeft: 0, scrollTop:0}, 1000);
    return false;
  });
  jQuery('.yrarrows .bottom').click(function () {
    jQuery('html, body').stop().animate({scrollLeft: 0, scrollTop:jQuery('body').height() - jQuery(window).height()}, 1000);
    return false;
  });
});
</script>

Всё сохраняем.

Оформляем
В целом сильно оформить эти кнопки самостоятельно не удастся (не волнуйтесь - ниже есть вариант со своими картинками!)

Вариант с белым оформлением (заменяем css):
Код:
.yrarrows {
position: fixed;
right: 10px;
top: 40%;
opacity: 0.5;
transition: 0.5s ease all;
-o-transition: 0.5s ease all;
-moz-transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;
}
.yrarrows .top, .yrarrows .bottom {
font-size: 24px;
padding: 5px;
background: white;
font-weight: bold;
color: black !important;
text-decoration: none !important;
width: 32px;
display: block;
height: 32px;
text-align: center;
border-radius: 8px;
line-height: 32px;
margin-bottom: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.yrarrows:hover {
opacity: 0.9;
}

Стрелки-картинки
С этим кодом мы сможем указать свои картинки - так наши кнопки будут лучше сочетаться со стилем.

Вставляем CSS:
Код:
.yrarrows {
position: fixed;
right: 10px;
top: 40%;
}

И HTML:
Код:
<div class="yrarrows"><a title="Наверх" href="#top" class="top"><img src="ПРЯМАЯ ССЫЛКА НА СТРЕЛКУ ВВЕРХ" /></a><br /><a href="#bottom" class="bottom" title="Вниз"><img src="ПРЯМАЯ ССЫЛКА НА СТРЕЛКУ ВНИЗ" /></a></div>

<script type="text/javascript">
  jQuery(document).ready(function () {
  jQuery('.yrarrows .top').click(function () {
    jQuery('html, body').stop().animate({scrollLeft: 0, scrollTop:0}, 1000);
    return false;
  });
  jQuery('.yrarrows .bottom').click(function () {
    jQuery('html, body').stop().animate({scrollLeft: 0, scrollTop:jQuery('body').height() - jQuery(window).height()}, 1000);
    return false;
  });
});
</script>

Вставляем ссылки на свои стрелки.
Сохраняем.

Готово! :)

(с) Your Roll. Туториал предоставлен блоггером и кибермагом Космо Мизраил Горынычем. Любая публикация данного материала без его разрешения запрещена.

Посмотреть профиль

Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения