WithScope

В днешни времена технологиите са в разгара на развитието си. Интернет е гигантът, в който има милиарди уеб сайтове с информация за различни бизнеси.

Интернет вече е най-доброто място където може да намери човек нужната информация, за каквато и да било услуга. Почти всеки бизнес има уеб сайт. Някои имат уеб сайт, от който имат полза, а други просто се хвалят с него без да се замислят защо им е по точно. Той е лицето на бизнеса ви пред света и работи 24 часа в денонощието.

Уеб сайтът е друга голяма крачка на бизнеса.

Един уеб сайт трябва да бъде полезен на вас и на потребителите, а не просто да съществува.

Един креативен уеб дизайн и добре подреден уеб сайт, би бил от голяма полза за вас. Ако сайтът ви е добре оптимизиран за търсачи и излиза на предни позиции, той трябва да се поддържа добре и да се обновява с ново и уникално съдържание. В противен случай той ще слиза по стълбицата на търсачките и ще преминава на по долни позиции. Целта не е това нали?

В България има добри студия за уеб дизайн. Можете да изберете подходящото за вас. Преди да изберете фирмата, която ще изработи вашия уеб сайт се запознайте много добре с нея. Разгледайте, какво точно включва офертата. Направете съпоставка между няколко фирми за уеб дизайн и след това действайте.

Собствениците на бизнес в България все още се страхуват да направят тази еднократна (при някои студиа за уеб дизайн) инвестиция. Несъмнено е че рекламата в радиото и телевизията постепенно стихва. Всеки започва да рекламира в интернет. Дали чрез собствен сайт, социални мрежи или блогове като този. Винаги съм бил на мнение, че за да бъде сериозен един бизнес не трябва да се спира само на социалните мрежи. Не е лошо да се рекламира там, но ако ще рекламирате там рекламирайте вашият сайт, а не директно вашия продукт.  Това е така защото потребителите ще запомнят вашия сайт и ще го посещават по-често, от колкото да се връщат в социалните мрежи и да скролират безбройните постове за да намерят нужната информация.

За да имате упешен бизнес трябва да имате и успешно изграден уеб сайт!

Слайд техника с 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>

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

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):

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

$(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):

$(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. Ефект на верижна анимация

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

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. Примерен ефект на “акордеон”

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>