• RSS

[JS]placeholderのテキストにアニメーション効果を追加できるスクリプト「Placeholdem」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

input type=text やtextarea で、placeholder のテキストにアニメーション効果を追加できる「Placeholdem」のご紹介です。

jQuery 不要で簡単に設置することができますので、企業向けのお問い合わせフォームなどにも使えるのではないかと思います。

Placeholdem のダウンロード

以下のページよりPlaceholdem のファイルをダウンロードします。


Placeholdem の設置

ダウンロードしたplaceholdem.min.js ファイルを<head> 内などに設置します。


フォームの記述例

続いてHTML 側のフォームの記述例です。


あとは、</body>タグ直前に以下のスクリプトを記述します。


input type=text の他、input type=email、input type=tel にもアニメーション効果付きのplaceholder を適用させたデモはこちらです。
placeholderのテキストにアニメーション効果するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください