Анимация текста с помощью jQuery | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Текстовые эффекты » Анимация текста с помощью jQuery | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Анимация текста с помощью jQuery | Скрипт для сайта


Делаем анимацию текста применяя jQuery




Эффект анимации текста добавляет плагин jquery.lettering.js библиотеки jQuery.Основной файл библиотеки установлен на сайтах системы uCoz по умолчанию.Вам останется установить скрипты плагинов к себе на сайт,поместив их в "Нижнюю часть сайта".Скрипт запуска плагинов установите на странице модуля где будет использоваться эффект,перед закрывающим тегом </body>.Стили прилагаются в 2 вариантах,они создают разные эффекты - остальные детали одинаковые.Изменения цвета и размера производите по своему усмотрению,проверяйте изменения в редакторе HTML.Изменения нужно производить в стилях прилагаемых к скриптам.Если Вам не понятна работа свойства,скопируйте его название в поиск сайта - на сайте есть статьи по всем свойствам CSS3Если появились вопросы или предложения,используйте форму комментариев в нижней части материала.





Скрипт плагина для установки в нижнюю часть сайта


<script type="text/javascript" src="http://delaisait.ucoz.ru/script/js/1/jquery.lettering.js"></script>

Скрипт запуска плагина для установки на странице модуля


<script type="text/javascript">
$(function() {
$("#letter-container h2 a").lettering();
});
</script>

Код для установки по месту ( в материале )


<div id="letter-container" class="letter-container">
<h2>
<a href="#">Анимация текста jQuery</a>
</h2>
</div>

Стили для первого эффекта

<style>
.letter-container {
padding:0px;
height: 50px;
width: 650px;
margin:0;
}
.letter-container h2 {
text-align: center;
font-family: 'Tahoma';
letter-spacing: 1px;
}
.letter-container h2 a {
text-align: center;
text-decoration: none;
padding: 0px;
}
.letter-container h2 a span {
font-size: 4em;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.6s linear backwards;
-moz-animation: sharpen 0.6s linear backwards;
-ms-animation: sharpen 0.6s linear backwards;
animation: sharpen 0.6s linear backwards;
}
.letter-container h2 a span:hover{
color: #3f7f75;
}.letter-container h2 a span:nth-child(1) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(2) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.letter-container h2 a span:nth-child(4) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(6) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-ms-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.letter-container h2 a span:nth-child(8) {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.letter-container h2 a span:nth-child(9) {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.letter-container h2 a span:nth-child(10) {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.letter-container h2 a span:nth-child(11) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(12) {
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.letter-container h2 a span:nth-child(13) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(14) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-ms-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.letter-container h2 a span:nth-child(15) {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(16) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #444;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #444;
color: transparent;
}
100% {
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-moz-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #444;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #444;
color: transparent;
}
100% {
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-webkit-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #444;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #444;
color: transparent;
}
100% {
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-ms-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #444;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #444;
color: transparent;
}
100% {
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
}
}
</style>

Стили для второго эффекта

<style>
.letter-container {
border-bottom: 1px dashed rgba(255,255,255,0.3);
border-top: 1px dashed rgba(255,255,255,0.3);
margin: 0px;
padding: 0px;
height: 100px;
}
.letter-container h2 {
text-align: center;
font-family: 'Tahoma';
letter-spacing: 3px;
}
.letter-container h2 a {
text-align: center;
text-decoration:none;
font-size: 3em;
line-height: 20px;
display: block;
padding-bottom:0px;
}
.letter-container h2 a span {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.9s linear backwards;
-moz-animation: sharpen 0.9s linear backwards;
-ms-animation: sharpen 0.9s linear backwards;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:hover{
text-shadow: 0px 0px 40px #fff;
}
.letter-container h2 a span:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(6) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.letter-container h2 a span:nth-child(8) {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.letter-container h2 a span:nth-child(9) {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(10) {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.letter-container h2 a span:nth-child(11) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.letter-container h2 a span:nth-child(12) {
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.letter-container h2 a span:nth-child(13) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(14) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-ms-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.letter-container h2 a span:nth-child(15) {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-ms-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.letter-container h2 a span:nth-child(16) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.letter-container h2 a span:nth-child(17) {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.letter-container h2 a span:nth-child(18) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
-ms-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.letter-container h2 a span:nth-child(19) {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
-ms-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.letter-container h2 a span:nth-child(20) {
-webkit-animation-delay: 1.9s;
-moz-animation-delay: 1.9s;
-ms-animation-delay: 1.9s;
animation-delay: 1.9s;
}
.letter-container h2 a span:nth-child(21) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.letter-container h2 a span:nth-child(22) {
-webkit-animation-delay: 2.1s;
-moz-animation-delay: 2.1s;
-ms-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.letter-container h2 a span:nth-child(23) {
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-ms-animation-delay: 2.2s;
animation-delay: 2.2s;
}
.letter-container h2 a span:nth-child(24) {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
-ms-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.letter-container h2 a span:nth-child(25) {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-ms-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.letter-container h2 a span:nth-child(26) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.letter-container h2 a span:nth-child(27) {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
-ms-animation-delay: 2.6s;
animation-delay: 2.6s;
}
.letter-container h2 a span:nth-child(28) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
-ms-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.letter-container h2 a span:nth-child(29) {
-webkit-animation-delay: 2.8s;
-moz-animation-delay: 2.8s;
-ms-animation-delay: 2.8s;
animation-delay: 2.8s;
}
.letter-container h2 a span:nth-child(30) {
-webkit-animation-delay: 2.9s;
-moz-animation-delay: 2.9s;
-ms-animation-delay: 2.9s;
animation-delay: 2.9s;
}
.letter-container h2 a span:nth-child(31) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.letter-container h2 a span:nth-child(32) {
-webkit-animation-delay: 3.1s;
-moz-animation-delay: 3.1s;
-ms-animation-delay: 3.1s;
animation-delay: 3.1s;
}
.letter-container h2 a span:nth-child(33) {
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
-ms-animation-delay: 3.2s;
animation-delay: 3.2s;
}
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-moz-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
 90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-webkit-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-ms-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
</style>

Скрипт jQuery для проверки эффекта в редакторе

Редактор не обладает встроенной библиотекой jQuery.Для проверки эффекта добавьте в редактор этот скрипт.На сайт uCoz его вставлять не надо!!!


<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>

Проверить код скрипта в редакторе

Для проверки эффекта в редакторе вставьте в него:1. скрипт jquery-1.7.2.js,2. скрипт плагина jquery.lettering.js,3. скрипт запуска плагина,4. один из вариантов стилей,5. код для установки по месту.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2011 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: jquery, эффекты чкери, effect, text, эффект текста

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]