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

23.10.2015
jQuery

thumb_mylicense_3-1-1_3-8613809 MyLicense 3.1.1 – менеджер лицензий для ваших PHP скриптов. С помощью этой системы вы сможете выдавать и контролировать лицензии ваших программ… Система для построения социальных сетей, это может быть сеть предприятия где сотрудники могут взаимодействовать друг с другом, это может быть… thumb_74-splatter-brushes-1824332 Набор из 74 кистей для программы Photoshop от дизайн журнала Layerform. Это высоко детализированные кисти брызг для создания интересных графических… thumb_51-watercolor-brushes-by-layerform-7596113 Набор высококачественных акварельных кистей для программы Photoshop от дизайн журнала Layerform. Кисти высокого разрешения 300 точек на дюйм, большинство…

Опубликовано в jQuery

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

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

Demo

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

Шаг 1  HTML

       Фоновое изображение с эффектом скольжения JQuery
  • Pic 1
  • Pic 2
  • Pic 3
  • Pic 4
  • Pic 5

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

Шаг 2 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

$(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);  }  ); });
Метки: ,