qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Слайд эффект для сайта

Слайд эффект с помощью JavaScript
Просмотров: 2739  Скачан: 201 раз  Комментариев в теме: 2

Красивый слайд эффект для сайта, который реализован с помощью javascript. Такая фишка довольно популярная, думаю каждый видел на каком нибудь ресурсе, что то в этом роде.

И так, что же это за эффект такой. Все очень просто, когда вы наводите на ссылку курсор мыши, она плавно сдвигаеться в сторону ( ну или куда именно будет сдвигаться, решать уже вам), такой эффект реализованый с помощью javascript, имеет преимущество перед популярным свойством -webkit-transition, с помощью которого можно тоже плавно сдвигать эллементы, но эффект реализований с помощью javascript, будет работать во всех браузерах включая IE, а свойство -webkit-transition только в соврименных браузерах с поддержкой css3.

Шаг 1 - создание разметки

 

HTML

<div id="navigation-block">
    <ul id="sliding-navigation">
    <li class="sliding-element"><h3>Навигация</h3></li>
        <li class="sliding-element"><a href="#">Link 1</a></li>
        <li class="sliding-element"><a href="#">Link 2</a></li>
        <li class="sliding-element"><a href="#">Link 3</a></li>
        <li class="sliding-element"><a href="#">Link 4</a></li>
        <li class="sliding-element"><a href="#">Link 5</a></li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" >

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    slide("#sliding-navigation", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier){
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";
    var timer = 0;
    $(list_elements).each(function(i){
        $(this).css("margin-left","-180px");
        timer = (timer*multiplier + time);
        $(this).animate({ marginLeft: "0" }, timer);
        $(this).animate({ marginLeft: "15px" }, timer);
        $(this).animate({ marginLeft: "0" }, timer);
    });
    $(link_elements).each(function(i){
        $(this).hover(
        function(){
            $(this).animate({ paddingLeft: pad_out }, 150);
        },
        function(){
            $(this).animate({ paddingLeft: pad_in }, 150);
        });
    });
}
</script>
Материалы по теме:

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.
Интересные публикации:

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.4/5( Голосов 8 )

Комментариев в теме: (2)
↑ 0 ↓
Vladimir
Как добавить уровни и сохранение пункта после перезагрузки страницы?
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Для добавления уровней изучайте html, для сохранения пункта после перезагрузки страницы изучайте PHP.
В данном примере, показано как можно наложить данный эффект методом JS.
Если вас не устраивает, ни один из предложенных вариантов, тогда попросту обратитесь за помощью на форумы данной тематики, знающие люди вам обязательно помогу (возможно за копейку).

Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить