Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Текстовый эффект (https://javascript.ru/forum/dom-window/47040-tekstovyjj-ehffekt.html)

Aetae 07.05.2014 05:35

MallSerg, зачем вообще Jquery?
<style type="text/css">
b { font-size: 14pt }
[id^="elastic"]{
    -webkit-animation: gogo 1s;
    -webkit-animation-iteration- count: 2;
    animation: gogo 1s;
    animation-iteration-count: 2;
}
@-webkit-keyframes gogo{
    0% { font-size: 14pt }
    50% { font-size: 24pt }
}
@keyframes gogo{
    0% { font-size: 14pt }
    50% { font-size: 24pt }
}
</style>
<b id="elastic">Text Текст</b><br>
<b id="no_elastic2">Text Текст</b><br>
<b id="elastic2_asdf">Text Текст</b><br>
<b id="no_elastic3">Text Текст</b><br>


P.S. Используйте [html run]...[/html] для наглядности.

cript 08.05.2014 19:23

Aetae,
Не плохой вариант, пытаюсь сделать так, но ничего не происходит, скажите в чем тут ошибка?
<script src="//code.internetrange.com/jquery-1.8.3.js"></script>
<style>
.elastic [id^="stat"]  {
-webkit-animation: elastic 1s;
-webkit-animation-iteration- count: 2;
animation: elastic 1s;
animation-iteration-count: 2;
}
@-webkit-keyframes elastic {
0% { 
font-size: 14pt; 
}
50% { 
font-size: 24pt; 
}
}
@keyframes elastic {
0% { 
font-size: 14pt; 
}
50% { 
font-size: 24pt; 
}
}
</style>
<script>
$(document).ready(function() {
$("#stat").addClass('elastic');
});
</script>
<div id="stat">Text</div>
<div id="stat2">Text2</div>

MallSerg 08.05.2014 20:49

Ошибка в том что в css нет класса который ты пытаешься добавить (.addClass('elastic');)
<script src="http://code.internetrange.com/jquery-1.8.3.js"></script>
<style type="text/css">
.elastic {
	-webkit-animation: elastic 5s;
	-webkit-animation-iteration- count: 4;
	animation: elastic 5s;
	animation-iteration-count: 2;}
@-webkit-keyframes elastic {0% {font-size: 14pt;}50%{font-size: 84pt;}}
@keyframes elastic {0% {font-size: 14pt;}50% {font-size: 84pt;}}
</style>
<script>
$(document).ready(function() {
$("#stat").addClass('elastic');});
</script>
<div id="stat">Text</div>
<div id="stat2">Text2</div>


Часовой пояс GMT +3, время: 18:37.