お疲れ様です！サイトを運営する時にお客様からなんか見た目をカッコよくしたいって言われた事ありませんか？
そんな時に私は重要なメインビジュアルにアニメーションを付与したりします。
ちょっとしたカスタマイズでお客様に喜んで頂けるので非常に好きな仕様です
さて、今回はそんなテキストをふわっと浮かび上がらせたり、横からビュンって出てきたり色々できるJQueryを使ったやり方を解説したいと思います。
メインビジュアルのタイトルをアニメーション化
こんな動画のようなアニメーションを簡単に実装できるようになります！
これだけではなく、文字が下からとか色を変えたりだとか色々できますが
今回は簡単な実装方法でカスタマイズは環境に併せて調整してみてください
使用するJQuery+プラグインの紹介
JQueryについては割愛させて頂きますが別記事にてご紹介したいと思います。
まずはJQueryにプラグインを追加しましょう
textillate.js
こちらのJQueryのプラグインを使います。
https://github.com/jschr/textillate
コードをダウンロードして保存してください。
textillate.jsをアップロード
続きまして、ダウンロードしたファイルをご自身のサーバーへアップロードします。
アップロードするファイルは以下の通りです。
- 使うファイルは3つ【assetsフォルダ内】
- jquery.fittext.js
- jquery.lettering.js
- animate.css
この3つのファイルををサーバーにアップロードしてください。
って公式には書いてましたが、もう一つ使います。
jquery.textillate.jstextillate.jsの使い方
ではアップロードしたjsファイルを読み込んでいきましょう！
cssなどと同じで<head></head>の中に追記して読み込ませましょう
<script src="/js/jquery.fittext.js"></script>
<script src="/js/jquery.lettering.js"></script>
<script src="/js/jquery.textillate.js"></script>
<link rel="stylesheet" href="/css/animate.css">
これであなたのホームページ上でtextillate.jsが使えるようになってます。では最後にどのように使っていくか説明します
textillate.jsの動かし方
メインビジュアルにh1タグを利用する機会が多いと思うのでこちらを例に動かしてみましょう。
<h1 class="title">キャッチコピーです</h1>ここでh1タグにもclassを付与してますが、基本的にJQueryの動かし方はclass指定で動いているのがほとんどです。
このclassにtitleがあった場合、何かを後から付与したりする動きをします。
今回のtextillate.jsが動くスクリプトの書き方はこうなります
$(function () {
$('.title').textillate();
})
これはJQueryの書き方で基本的な事ですが
.titleに対して.textAnimationを使うとする書き方です
<br>タグなどは無視されますので
コーディングを変えて下さい
まとめ
JQueryもCSSもjsも読み込んでいたんですが
まんまと公式の記載にはまりました。
必要ファイルが不足してますので私のやり方でやれば実装できますので
ご安心くださいませ！
これで見事！アニメーションのテキストが出来上がりました！
お洒落度がグンと増しますね
以上
最後までご覧いただきまして有難うございました！
- お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。
- お問い合わせフォーム
- » 高橋しゃちょー (@osaka_dos) | Twitter
プロフィール
ドスブイサポートホームページを初期費用無料でサブスク運用！
大阪でWEB制作会社を立ち上げてから
集客には大変苦労しました。
泣けるほど本当に・・・
どうしたら良いか考え行動した結果、
月額運用と新規お問い合わせで経営できるまでになりました。
商品には自信はあるのに集客が出来ない…それは、伝え方のせいです。
