サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
nkmrkisk.com
webサイトなどで遺伝子配列みたいな動的なデザインを見かけたことはないでしょうか。 あれは、パーティクルと呼ばれるものです。 パーティクル・システム(英: particle system)はコンピュータグラフィック技術のひとつで、従来型のレンダリング技術では再現が難しい、ある種の曖昧さを持った事物をシミュレートするために使われる。一般にパーティクル・システムを使って模写される事物の例としては、炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地、あるいは光跡や呪文の視覚効果などが挙げられる。 【出典:パーティクル・システム – wikipedia】 見ていると視覚的に特徴のあるデザインなので、web制作に取り入れたい!と思うこともあるかと思います。 今回は、簡単にそのパーティクルが実装できる「particleground」をご紹介します。 particlegroundは、
要素の区切り線に、水面に水滴が落ちたときのような波紋を発生させるjQuery UIプラグインRaindrops.jsを実装してみました。色々とオプションを修正したサンプルも作っています。 raindrops.jsとは セクション間の境界線をcanvasを使って水面に見たて、しずくを落としたような波紋のエフェクトを表示させてくれるjQueryUIのプラグインです。オプションも複数用意されていますので、色々なエフェクトを付け加えることができます。 導入について raindrops.jsをダウンロード ダウンロードはこちら。【d-harel/raindrops – github】 ダウンロードしたファイルをサーバーにアップロードしておきましょう。 プラグインの呼び出し raindrops.jsはjQueryUIに依存したプラグインです。なのでjQueryとjQueryUIを先に呼び出し、その後に
webサイトにダイナミックな仕掛けを施したい!と思った時って、JavaScriptやjQueryを使って「scroll」や「resize」のイベントで発火する処理を書いたりしますよね。 それで、いくつかのエフェクトを実装した後に、「あれ、サイトがもっさりしてる」と感じた経験ありませんか。 そんな経験がある方にはきっと活きる。JavaScriptやjQueryの処理を改善するために知っておきたいTipsを紹介します。 (僕がためになった記事のまとめですので、網羅的ではありません><) ブラウザに思い通りのスタイリングが描写される仕組み JavaScriptをバリバリにチューニングする記事や、描写遅延が起こっている理由に触れる前に、 どうやってブラウザにCSSなどの描写が反映されるのかを教えてくれる記事を紹介します。 これを知ってるかどうかで、局地的だけじゃなくてもう少し広い視野で速度改善に取
よくコールバック地獄とか耳にして、コードもちらっと見て、なんとなく「ネストは深くしない(関数の中で関数を書き過ぎない)」とか、可読性を高めるために気をつけたほうが良いこと。としての認識はあるものの、そもそもコールバック関数ってなんぞや? というのが、どうしてもわからなかったので、調べました。 コールバック関数とは? 引数として渡され、関数の中で所定のタイミングで実行される関数。 わかりやすくするとこんな感じ。 実際に書いてみるとこのような記述になります。 // HTMLを読み込み後、実行 function hou_nyou(callback){ document.write("たかし は おしっこ を すべて はいしゅつ した"); callback(); } function hou_nyou_complete(){ document.write("<br>\(^o^)/ { ちょうかん
こんにちは、中村です。jQueryを使ってスクロール量によってイベントを発火させたいケースがそれなりに多いので、サンプルと説明を残しておきます。 追記:scroll系のイベントは発火の回数が著しく多いので、重い処理を入れてしまうとユーザー体験を損なう可能性があります。。もし時間があったら、【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。も合わせて見てもらえたら幸いです。 利用するjQueryメソッド 『scrollTop()』 windowやdocumentなどの要素に対して使えるメソッドです。ページをどれくらいスクロールしたかのスクロール量を測ることができます。 『scroll()』 ブラウザ上でスクロールを行った時に発火するイベントです。スクロール量に応じてイベントを発火させたい場合は『scroll()』を利用して関数を発火させること
タイプライター風に一文字ずつテキストが表示されるコードを書きました。JavaScriptでの記述なのでjQueryの呼び出しなどは必要ありません。 タイプライター風に一文字ずつ表示されるJavaScriptコード See the Pen [js][/js]一文字ずつ出てくる文章(300万ドルのお金を稼いだ老婦人) by nkmrkisk (@rekid) on CodePen. 説明 「id」属性を付与したHTML要素を、配列データで設定することでタイプライター風に一文字ずつ表示させるJavaScriptコードになっています。設定の内容については、一文字ずつ表示させたいHTML要素に対して「id」を付け、それをJavaScriptのOptionに設定してあげるだけになります。特に転用に関する決め事などは無いのでご自由にお使いください。 設定できるOptionについての説明 /* -----
このページを最初にブックマークしてみませんか?
『nkmrkisk.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く