Добрый вечер.Использую библиотеку.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<input id="text" type="text">
<div id="headline" class="result">dkkdkddskksksksks</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
$('#text').keyup(function(){
var Value = $('#text').val();
$('.result').empty();
$('.result').text(Value);
});
var $headline = $('#headline').hide();
var $word1 = $('#arc-wrapper').find('h3').hide();
var $word2 = $('#arc-wrapper').find('h4').hide();
var $example1 = $('#example1').hide();
var $example2 = $('#example2').hide();
var $example3 = $('#example3').hide();
var $example4 = $('#example4').hide();
google.load('webfont','1');
google.setOnLoadCallback(function() {
WebFont.load({
google : {
families : ['Montserrat','Concert One']
},
fontactive : function(fontFamily, fontDescription) {
init();
},
fontinactive : function(fontFamily, fontDescription) {
init();
}
});
});
function init() {
$headline.show().arctext({radius: 400});
$word1.show().arctext();
$word2.show().arctext({radius: 148, dir: -1});
$example1.show().arctext({radius: 300});
$example2.show().arctext({radius: 400, dir: -1});
$example3.show().arctext({radius: 500, rotate: false});
$example4.show().arctext({radius: 300});
$('#button_set').on('click', function() {
$example4.arctext('set', {
radius : 140,
dir : -1
});
return false;
});
$('#button_anim1').on('click', function() {
$example4.arctext('set', {
radius : 300,
dir : -1,
animation : {
speed : 300,
easing : 'ease-out'
}
});
return false;
});
$('#button_anim2').on('click', function() {
$example4.arctext('set', {
radius : 200,
dir : 1,
animation : {
speed : 300
}
});
return false;
});
$('#button_reset').on('click', function() {
$example4.arctext('set', {
radius : 300,
dir : 1
});
return false;
});
};
</script>
</body>
</html>
