Сегодня мы хотим рассказать вам о том, как создать интересный эффект скользящего фонового изображения. У нас получится нечто вроде фотогалереи. Мы подготовили 3 демо для различных эффектов. Пожалуйста, обратите внимание на то, что наше демо работает во всех браузерах, где есть поддержка используемых CSS3-параметров.
Этап 1. HTML-код
Здесь у нас весь код нашего демо. Мы использовали 5 фотографий – по количеству элементов «навигации», которые вы можете здесь видеть.
Index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Cool Background Image Sliding effect with jQuery | Script Tutorials</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> <ul class="demos"> <li><a href="index.html">Demo 1</a></li> <li><a href="index2.html">Demo 2</a></li> <li><a href="index3.html">Demo 3</a></li> </ul> </div> <footer> <h2>Cool Background Image Sliding effect with jQuery</h2> <a href="http://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </footer> </body> </html>
Этап 2. CSS-код
Теперь давайте перейдем к нашим 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 «animate» для того, чтобы сместить эти позиции при переключении изображений (при помощи навигации).
Этап 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); } ); });
Как видно, все довольно просто.
Демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Завершение
Все остальные демо очень похожи, в них есть лишь незначительные изменения в стилях и коде javascript. Вы можете поэкспериментировать с этими демо. Удачи.
Вернуться назад
|