Скрипты

grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...
live-chat-3-v3-7-онлайн-чат-поддержки Live Chat 3 - лучший способ помочь своим клиентам. Это намного быстрее, чем электронная почта и более эффективней, чем телефон. Не оставляйте своих...
repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Фоновое изображение с эффектом скольжения JQuery

Фоновое изображение с эффектом скольжения JQuery В этом примере вы увидите как создать интересный эффект, который можно использовать в качестве динамического фонового изображения на вашем сайте. Применяя JQuery анимацию, картинка будет меняться на другую с эффектом скольжения. Для большей необычности изображения разбито на клетки, в каждой из которых происходят изменения с разными направлениями анимации и времени задержки.

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

Demo

Архив с примером

Шаг 1  HTML

index.html
<!DOCTYPE html>
<html lang="en" >
 <head>
 <meta charset="utf-8" />
 <title>Фоновое изображение с эффектом скольжения JQuery </title>
 <link href="/css/main.css" rel="stylesheet" type="text/css" />

 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="/js/main.js"></script>
 </head>
 <body>
 <div class="container" id="container">
 <ul class="nav">
 <li id="m1">Pic 1</li>
 <li id="m2">Pic 2</li>
 <li id="m3">Pic 3</li>
 <li id="m4">Pic 4</li>
 <li id="m5">Pic 5</li>
 </ul>

 <ul class="grid">
 <li id="g1">
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div>
 <div class="d5"></div>
 </li>
 <li id="g2">
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div>
 <div class="d5"></div>
 </li>
 <li id="g3">
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div>
 <div class="d5"></div>
 </li>
 <li id="g4">
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div>
 <div class="d5"></div>
 </li>
 <li id="g5">
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div>
 <div class="d5"></div>
 </li>
 <li id="g6">
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div>
 <div class="d5"></div>
 </li>
 </ul>
 </div>
 <footer>
 <h2>Фоновое изображение с эффектом скольжения JQuery </h2>

 </footer>
 </body>
</html>

 

Шаг 2 CSS

css/main.css
.nav {
 background-color:#DDD;
 list-style:none outside none;
 overflow:hidden;
 padding:5px 140px;
}
.nav li {
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;

 border:2px outset #000000;
 color:#000;
 cursor:pointer;
 float:left;
 font-size:18px;
 font-weight:bold;
 margin-right:5px;
 padding:10px;
}

.demos {
 background-color:#DDD;
 list-style:none outside none;
 overflow:hidden;
 padding:5px 165px;
}
.demos li {
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;

 border:2px outset #000000;
 color:#000;
 float:left;
 font-size:18px;
 font-weight:bold;
 margin-right:5px;
 padding:10px;
}
.demos li a {
 color:#000;
 cursor:pointer;
 display:block;
 font-size:20px;
 font-weight:bold;
 height:30px;
 line-height:30px;
 text-decoration:none;
}

.grid {
 background-color:#DDD;
 list-style:none outside none;
 width:100%;
}
.grid li {
 border:1px solid #777777;
 float:left;
 height:240px;
 width:211px;

 transition:all 0.5s linear;
 -moz-transition:all 0.5s linear;
 -o-transition:all 0.5s linear;
 -webkit-transition:all 0.5s linear;
}
.grid li div {
 transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -webkit-transition:all 0.5s ease-in-out;

 float:left;
}
.grid li .d1 {
 background:transparent url(../images/grid1.jpg) no-repeat top left;
 height:100%;
 width:211px;
}
.grid li .d2 {
 background:transparent url(../images/grid2.jpg) no-repeat top left;
 height:100%;
 width:0;
}
.grid li .d3 {
 background:transparent url(../images/grid3.jpg) no-repeat top left;
 height:100%;
 width:0;
}
.grid li .d4 {
 background:transparent url(../images/grid4.jpg) no-repeat top left;
 height:100%;
 width:0;
}
.grid li .d5 {
 background:transparent url(../images/grid5.jpg) no-repeat top left;
 height:100%;
 width:0;
}
.grid li#g2 div {
 background-position:-211px 0;
}
.grid li#g3 div {
 background-position:-422px 0;
}
.grid li#g4 div {
 background-position:0 -240px;
}
.grid li#g5 div {
 background-position:-211px -240px;
}
.grid li#g6 div {
 background-position:-422px -240px;
}

У каждого элемента клетки сетки LI есть некоторый определенный фон, но с собственными второстепенными положениями. Мы используем JQuery анимацию для изменения их положения при наведении курсора на элемент навигации.

Шаг 3 jQuery

js/main.js
$(function(){
 $(".nav li").hover(
 function () {
 $('.grid li div').stop().animate({width:"0"},0);

 var ind = $(".nav li").index(this);
 $($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0);
 $($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50);
 $($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100);
 $($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150);
 $($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200);
 $($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250);
 }
 );
});


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...