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


Dec 23 2011

Уеб дизайн с jquery

Автор:

Това е описание на някои полезни ефекти, които могат да се използват при уеб дизайн.

1. Плъзгащ се панел.

Първо трябва да включиме библиотеката jquery, някъде между <head> и </head> например чрез: <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>

Когато кликнете върху елемент с class=”button”, това ще плъзне елемента с <div id=”panel”> и ще превключи CSS class = “active” на елемента  <a>

Класът .active ще смени background-position на стрелката ( ще я обърне нагоре чрез CSS):

http://gmc-bg.com/images/slidepanel.jpg

Ето и скрипта за това:

$(document).ready(function(){ 
        $(".button").click(function(){
          $("#panel").slideToggle("slow");
          $(this).toggleClass("active");
        });        
}); 
Това е и HTML кода: 

<div id=”panel”>

<!–тук стои вашето съдаржание –>

</div>

<p><a href=”#”>Slide Panel</a></p>

2. Изчезващ ефект.

В този пример ще разгледаме как може да накараме да изчезне даден елемент, когато се кликне върху image-бутон.

Когато се кликне върху <img>, скрипта ще намери неговия родителски елемент <div> и ще анимира неговата opacity=hide със скороста с която желаем (в примера slow):

 

http://gmc-bg.com/images/delitepanel.jpg

$(document).ready(function(){

        $(".pane .delete").click(function(){
          $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
        });        
});

HTML:

<div class=”pane”>

<img class=”delete” alt=”delete” src=””></div>

 

3. Ефект на верижна анимация

В този ефект ще видим как само с няколко реда код можем да накараме обект да се движи, променяики размерите си.

http://gmc-bg.com/images/multi-animation.gif

Line 1: Когато кликнем на <a>

Line 2: анимира се <div id=”box”> с opacity=0.1, свойството left докато достигне 400px (обекта се премества надясно с 400px), а скороста е 1200 (милисекунди)

Line 3: opacity=0.4, top=160px, height=20, width=20, а скоростта е “slow” – Тук освен прозрачността на обекта се променят неговото свойство top (премества се вертикално на екрана),  а също така се променят и неговите размери.

Line 4: opacity=1, а свойствата left, height и width, приемат стойности съответно: 0, 100px и 100px, като скоростта отново е slow.

Line 5: opacity=1, а свойствата left, height и width, приемат стойности съответно: 0, 100px и 100px, като скоростта отново е slow.

Line 6: тук свойството top приема стойност 0 със скорост 0. (top=0).

Line 7: тук имаме slideUp (скорост default speed = “normal”)

Line 8: тук имаме slideDown със скорост “slow”.

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

$(document).ready(function(){ $(".run").click(function(){
 $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
  });
 });
примерен HTML: <p><a class="run" href="#">Run</a></p>

<div id=”box”> </div>

 

4. Примерен ефект на “акордеон”

http://gmc-bg.com/images/accordeon.jpg

Line 1 от кода добавя CSS клас “active” към първия <H3> елемент намиращ се в <div class=”accordion”>

(Класът .active ще премести свойството background-position на стрелката. )

Line 2:  Скрива всичките <p> елементи които не са първи в  <div class =”accordion”>

 

Когато се кликне върху <H3> елемента, тогава се прилага slideToggle на следващия <p> елемент.

 

$(document).ready(function(){

$(“.accordion h3:first”).addClass(“active”);

$(“.accordion p:not(:first)”).hide();

$(“.accordion h3”).click(function(){

$(this).next(“p”).slideToggle(“slow”)

.siblings(“p:visible”).slideUp(“slow”);

$(this).toggleClass(“active”);

$(this).siblings(“h3”).removeClass(“active”);

});

});

 

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

<div class=”accordion”>

<h3 class=”active”> Heading 1</h3>

<p>Lorem ipsum dolor sit amet……</p>

<h3> Heading 2</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…</p>

<h3> Heading 3</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…..</p>

<h3>Heading 4 </h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet …..</p>

<h3> Heading 5</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…..</p>

</div>

 

 

Rate this post