Поточний час:
Сьогодні 18 лютого, неділя 2018 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 3 роки 1 місяць 30 днів

Ваш ip адрес:54.92.197.82

Добрий вечір!
Ви обновили сторінку в 19 : 39
Статистика

Кількість публікацій на блозі: 373
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Zura-Blog tremblingПривіт всім відвідувачам Zura — Blog, продовжую викладати матеріали які стосуються ефектів для сайту, і сьогодні до вашої уваги ще один корисний ефект, який безперечно може стати в нагоді при створенні ваших проектів, це ефект “Тремтячий текст”.

Для чого може бути потрібний цей ефект, для того щоб привернути увагу відвідувача, там де відобразиться текст, може знаходитись посилання, це посилання буде перенаправляти на ресурс, текст  на сторінці сайту якщо буде відображатись “тремтячим”,  це звісно що заставить любого відвідувача звернути увагу в то місце де буди знаходитись такий текст.

Створити такий ефект, щоб текст відображався “тремтячим” на сторінці сайту досить легко, для цього потрібно додати скрипт, скрипт створений мовою веб програмування JavaScript, а це значить що вам не потрібно буде встановлювати додаткове програмне забезпечення, для того щоб перевірити чи запрацює такий ефект на сторінці сайту, оскільки, скрипти від JavaScript на відміну скриптів від РНР, любий браузер відобразить без додаткового програмного забезпечення.

Ну що ж демонстрація ефекту нижче, якщо ефект вам подобається, тоді  залишається приступити, і створити скрипт в себе на вашому сайті.


user_97

Демнонстрація ефекту


Як я вже згадував, та й не одноразово в матеріалах говорилось, що існують скрипти які працюють на стороні сервера, це скрипти зроблені мовою програмування РНР, а саме їх може обробити і передати дані, для відображення на сторінці в браузері, тільки програма яка знаходиться на сервері, і спеціально призначена для таких цілей.

Браузер не розуміє скриптів написаних мовою веб програмування РНР, щоб відобразити інформацію з РНР скрипта на моніторі, браузер зєднюється з сервером через протокол, на сервері обробляється інформацію яка знаходиться в РНР скрипті, далі браузер отримує з сервера протокол, в якому передається інформація з  готовим результатом.

Скрипти створені мовою веб програмування JavaScript, на відміну від РНР скриптів працюють на стороні клієнта, клієнт — це і є ваш браузер, браузер в загалі то, це також програма, і браузер сам може прочитати інформацію з скрипта, написаному на мові веб програмування JavaScript, і відобразити її на моніторі.

Тому вам щоб побачити результат скрипта на мові програмування JavaScript, не потрібно встановлювати в себе на компютері додаткове програмне забезпечення, яке встановить у вас локальний сервер, а зразу приступити до створення такого елементу.

Ітак відкриваємо редактор, можна навіть встроєний в операційну систему “Блокнот”, найкраще це безкоштовний варіант редактор Notepad++

додаємо між тегами <head></head> код нижче  

 <style>
.tremblingtext {
position:relative;
color:#000000;
}
</style>

<script>
var pauseFactor=15;
function jiggleit(num){
this.el=jiggleit.el('jiggle'+num);
this.to=80;
this.jig=function(){
var c=this; if(pauseFactor){c.t=c.t? ++c.t : 1;
if(c.t%pauseFactor==0){c.to=pauseFactor*80;c.t=0;
} else c.to=80;}
c.el.style.left=(parseInt(c.el.style.left)==1)? '-1px' : '1px';
setTimeout(function(){c.jig();}, c.to);
};
this.jig();
};

jiggleit.el=function(id){
return document.all? document.all[id] : document.getElementById(id);
};

jiggleit.init=function(){
var i=0; while(jiggleit.el('jiggle'+i))
i++; if(i--) for (i ; i > -1; --i)
new jiggleit(i);
}

if(document.all||document.getElementById)
window.onload=jiggleit.init;
</script>

Розяснення по коду.

Складається з стилей CCS і скрипта JavaScript, в стилях можна виставити колір тексту, в коді виставлений чорний, можливо вам буде  потрібний текст щоб по кольору підходив до кольорової гамми вашого сайту, такий текст можна підібрати за допомогою спеціальних програм, які створені для таких цілей, в результаті видадуть вам html код любого кольору, програми  “Color Mania” і  програма “HTMLColors2000”.

Як працювати з такими програмами також написано на Zura — Blog, можна ознайомитись клацнувши на іх назву вище, якою з них краще користуватись, особливої різниці не бачу, хоча мені більше сподобалась “Color Mania”, раніше користувався (другою) “HTMLColors2000”.

tremblingtext — хто знає англійську, той зрозуміє переклад слова з англійської, “тремтячий текст”, щоб такий текст відобразився в вас в браузері, потрібно вказати шлях, а саме прописати код між тегами <body></body>

наступний код

<span id=”jiggle0″ class=“tremblingtext”>Ваш текст</span>

вибираємо місце між тегами <body></body> і вставляємо рядок коду.

<span id="jiggle0" class="tremblingtext">Ваш текст</span>

Ну і все. А ось і не все, адже в рядку кода вище не прописане посилання, в такому разі там буде просто текст, тримтячий, але не буде перенаправляти на потрібний вам ресурс. Тому щоб текст служив для перенапрвлення на сторінку сайту або інший сайт, портібно додати посилання, нижче той самий рядок, тільки до нього додано посилання на сайт. 

<span id=”jiggle0″ class=”tremblingtexttext”><a href=”http://ruszura.in.ua” class=”button”>Zura-Blog</span>

Посилання на Zura Blog виділено червоним кольором, ви міняєте на своє.

<span id="jiggle0" class="tremblingtext"><a href="http://ruszura.in.ua" class="button">Zura-Blog</span>

На цьому буду закінчувати публікацію, створити такий ефект дуже просто, щоб створити цей ефект не потрібно бути великим “гуру” в веб дизайні, тільки знати за яким принципом  створюється сторінка в html, ну і звісно знати що таке теги.

На Zura Blog матеріалів по html розміщено достатньо, можите з ними ознайомитись перейшовши в категорію “Все про HTML”, все мабуть по цьому матеріалу, додам ще тільки пару слів,  даний ефект досить просто створити, і завжди пригодиться для ваших проектів.

До зустрічі!


Leave a Reply

Your email address will not be published. Required fields are marked *