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

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

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

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

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

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

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

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

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

Код перед тегом </head>

<link rel="stylesheet" href="css.css">

Код перед тегом </body>

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/jаvascript" src="flyMe.min.js"></script>
<script type="text/jаvascript">
    $(function(){
        flyAll ();
    });
</script>

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

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

Сразу после тега <body> пропишите код:

<span id="Section_1"></span>

А внизу страницы перед тегом </body> пропишите:

<p class="toclevel-1 tocsection-1"><a href="#Section_1">Перейти наверх</a></p>

Это и будет являтся ссылкой для анимированного перехода наверх.

И точно таким же образом вы делаете анимированные переходы для якорных ссылок, только изменяете ID.

Для простого примера

    // Якорная ссылка
<p class="toclevel-2 tocsection-2"><a href="#Section_2">Перейти к заголовку</a></p>

    // Ссылающийся объект
<p id="Section_2">Заголовок</p>

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

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

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

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

Комментарии 0
Добавить комментарий