WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
[JS]ココに注目！してほしい箇所をアニメーションでくるっと囲むスクリプト -traceit
traceitの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../js/raphael_traceit.min.js"></script> </body> Step 2: HTML HTMLはテキストでも画像でも通常通りの実装で構いませんが、要素を指定できるようidなどを与えておきます。 <div id="example">Let's trace this element.</div> Step 3: JavaScript トレースする要素を指定し、スクリプトを実行します。 //Initialize a tr
テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」:phpspot開発日誌
テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 2012年10月11日- dynamo.js テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 <p>I wish I could <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span> the text here.</p> のように書いて、初期化してあげると、I wish I could 〜 移行に <span>の data-lines属性で指定した単語をアニメーションさせつつローテーションするカッコいいエフェクトが作れます 切替えスピード等は .dynamo な要素の data-属性を切り替えることでカスタマイズが可能です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
