Jan 10 2012

Слайд ефект с jquery

Автор:

Слайд техника с Jquery

Имаме един div таг (.boxgrid) който действа като прозорец. Чрез слайд техника той се премества и остава това което е под нрго като background. От тук нататък ние можем да прилагаме различни техники за анимация и да постигаме различни слайд ефекти – да показваме или скриваме видимата част на елемента.

цена на сайт, уеб дизайн

Стъпка 1 CSS код:

Следващите редове дефинират видимата част .boxgrid. и осигуряват default позиция на изображението вътре – top left {position:absolute; top:0;left:0;}. Също така не трябва да забравяме да включим и overflow:hidden .

Ето и самият код:

.boxgrid{

width: 325px;

height: 260px;

margin:10px;

float:left;

background:#161613;

border: solid 2px #8399AF;

overflow: hidden;

position: relative;

}

.boxgrid img{

position: absolute;

top: 0;

left: 0;

border: 0;

}

 

.captionfull .boxcaption {

top: 260;

left: 0;

}

.caption .boxcaption {

top: 220;

left: 0;

}

Стъпка 2 Добавяне на анимацията

Тук са изброени няколко различни видове анимация, от които можем да си изберем тази която покрива най-добре нашите нужди:

$(document).ready(function(){

//To switch directions up/down and left/right just place a “-” in front of the top/left attribute

//Vertical Sliding

$(‘.boxgrid.slidedown’).hover(function(){

$(“.cover”, this).stop().animate({top:’-260px’},{queue:false,duration:300});

}, function() {

$(“.cover”, this).stop().animate({top:’0px’},{queue:false,duration:300});

});

//Horizontal Sliding

$(‘.boxgrid.slideright’).hover(function(){

$(“.cover”, this).stop().animate({left:’325px’},{queue:false,duration:300});

}, function() {

$(“.cover”, this).stop().animate({left:’0px’},{queue:false,duration:300});

});

//Diagnal Sliding

$(‘.boxgrid.thecombo’).hover(function(){

$(“.cover”, this).stop().animate({top:’260px’, left:’325px’},{queue:false,duration:300});

}, function() {

$(“.cover”, this).stop().animate({top:’0px’, left:’0px’},{queue:false,duration:300});

});

//Partial Sliding (Only show some of background)

$(‘.boxgrid.peek’).hover(function(){

$(“.cover”, this).stop().animate({top:’90px’},{queue:false,duration:160});

}, function() {

$(“.cover”, this).stop().animate({top:’0px’},{queue:false,duration:160});

});

//Full Caption Sliding (Hidden to Visible)

$(‘.boxgrid.captionfull’).hover(function(){

$(“.cover”, this).stop().animate({top:’160px’},{queue:false,duration:160});

}, function() {

$(“.cover”, this).stop().animate({top:’260px’},{queue:false,duration:160});

});

//Caption Sliding (Partially Hidden to Visible)

$(‘.boxgrid.caption’).hover(function(){

$(“.cover”, this).stop().animate({top:’160px’},{queue:false,duration:160});

}, function() {

$(“.cover”, this).stop().animate({top:’220px’},{queue:false,duration:160});

});

});

 

Стъпка 3. HTML код:

Има няколко класа, които ние създадохме просто за да се използват като селектори в jquery кода.

– div класа .cover се отнася за слайдванрто (движението)

– Вътре в div класа .boxgrid изображението (img) трябва винаги да е първо Например (<div> <img src=”pic.jpg”/> <div>)

ето и примерен HTML код:

<div>

<img src=”abc.jpg”/>

<div>

<h3>GMCreative</h3>

<p> web design</p>

</div>

</div>

Rate this post