WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

文字をカーブさせることができるjQueryプラグインArctext.js

f:id:mmmmofu:20161115205758p:plain

tympanus.net


http://efu.sakura.ne.jp/web/arctext/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Arctext.js</title>
  <link href="https://fonts.googleapis.com/css?family=Chango" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.arctext.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <p class="text01">I WANNA BE CURVED</p>
  <p class="text02">I Wanna Be Direction</p>
  <p class="text03">テキストを回転させずにカーブ</p>
</body>
</html>

CSS

body {
  font-family: 'Chango', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  background: url('../img/p0122_m.jpg');
  color: #fef6c8;
}

p {
  text-shadow:0px 0px 5px #333;
  text-align: center;
}

.text01 {
  font-size: 30px;
  padding: 100px 0 200px;
}

.text02 {
  font-size: 30px;
  padding: 100px 0 80px;
}

.text03 {
  font-size: 30px;
  padding: 50px 0 0;
}

JS

$(function(){
  $('.text01').arctext({
    radius: 400
  });

  $('.text02').arctext({
    radius: 250,
    dir: -1
  });

  $('.text03').arctext({
    radius: 300,
    rotate: false
  })
});