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

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

ОБСУЖДЕНИЕ

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

Слайд эффект с помощью JavaScript
Просмотров: 2770  Скачан: 202 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

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

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

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

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

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

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....
Интересные публикации:

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

EbuyEbuy

Ebuy - это шаблон интернет магазина, который полюбился многим за свою простоту в использовании и надёжность....

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

Красивые кнопки на css3Красивые кнопки на css3

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Кнопка с анимационным фоном на 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
Обновить