Слайд ефект с jquery
Имаме един div таг (.boxgrid) който действа като прозорец. Чрез слайд техника той се премества и остава това което е под нрго като background. От тук нататък ние можем да прилагаме различни техники за анимация и да постигаме различни слайд ефекти – да показваме или скриваме видимата част на елемента.
Следващите редове дефинират видимата част .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>
