» » Скрипт на верх с анимацией

Скрипт на верх с анимацией

0 804

Фото анимированная стрелка

Анимированный переход на верх - это такой же плавный и очень красивый переход "На верх", только с использованием анимации. В данном случае идёт показ анимированной стрелки, которая плавно перемещается по экрану монитора в указанном направление на якорный заголовок.

Данный скрипт используется не только для перехода На верх, но и для якорных ссылок, - что смотрится довольно эффективно.

На одну страницу сайта можно установить неограниченное количество таких ссылок с анимированным переходом на верх.

Скрипт очень простой и никаких измений в нём вам делать абсолютно не нужно, установили и забыли, единственное - это прописывать на вашей странице ссылки с разными идентификаторами (если их будет больше одной).
А стилевой файл здесь используется чисто для оформления ссылки (кнопки) перехода На верх, поэтому с установкой и использованием данного скрипта у вас проблем возникнуть не должно.

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

Как установить анимированный переход наверх

Для начала - скачайте сам скрипт по ссылке ниже, загрузите его к себе на хостинг в главную директорию, и пропишите в HTML странице, где хотите установить анимированный скрипт на верх, следующий код.

Код перед тегом </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="src/flyMe.min.js"></script>
<script type="text/javascript">
    $(function(){
        flyAll ();
    });
</script>

Создайте стилевой файл style.css и в HTML странице пропишите путь к нему:

Код для html
<link rel="stylesheet" href="style.css">

А в самом файле style.css пропишите следующий код для отображения кнопки Перехода на верх.

Код для кнопки
div#cxz_up{
    position: fixed;
    bottom: 60px;
    float: right;
    right: 10px;
    display: line;
    background: #99ccff;
    padding: 0 2px 4px 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid #6699cc;
    z-index: 1000104;
}
div#cxz_up: hover{ border: 2px solid #336699; z-index: 1000105; }
div#cxz_up p{ margin: 0; padding: 0; font-size: 24px; }
#flesh{ z-index: 1000106; }

Всё! Основные элементы у нас готовы и теперь мы перейдём непосредственно к прописанию якорных ссылок для анимированного перехода.

Любая якорная ссылка здесь имеет такой вид:
<p class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="toctext">Некий текст</span></a></p>

А ссылающийся объект (на что ссылается якорная ссылка) будет прописан так:
<span class="mw-headline" id="Section_1"></span>

Например, вы хотите сделать на странице Переход на верх, и для этого вам нужно прописать вот так:

Вставка кода
  • <span class="mw-headline" id="Section_1"></span> - прописываете в самый верх страницы, например, перед блоком вашего Меню;
  • <p class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="toctext">Некий текст</span></a></p> - прописываете в самом низу страницы перед закрывающимся тегом </body>.

Теперь рассмотрим ситуацию, когда вы захотите добавить на страницу не одну якорную ссылку. И для этого мы будем использовать такой же код, только меняя цифры в tocsection-1 и Section_1.
Например, для второй якорной ссылки и объекта мы пропишем уже такой код:

<p class="toclevel-1 tocsection-2"><a href="#Section_2"><span class="toctext">Некий текст</span></a></p>
<span class="mw-headline" id="Section_2"></span>

И последующие ссылки будут иметь идентичный вид с изменёнными идентификаторами.

Можно ли изменить "Анимированную стрелку"?
Сам не пробовал, но думаю это возможно, только с сохранением оригинальных размеров картинки, потому как они прописаны в основном скрипте.

На этом всё! Ставим Лайки, и кому что не понятно, - спрашиваем!

Скачать переход на верх с анимацией

Ссылка на файл: animaciya_verx.rar 110

Похожие новости