javascript・jQuenry

レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ

2015/03/31(Tue) 07:47

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。

http://coliss.com/articles/build-websites/operation/javascript/javascript-for-responsive-web-design.html

[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js

2015/03/24(Tue) 08:03

画像は使用せずに、ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャがSVGで描けるスクリプトを紹介します。SVGで、テクスチャも作成できるようになってしまいました。

http://coliss.com/articles/build-websites/operation/javascript/js-creating-svg-patterns-texturesjs.html

レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処

2015/03/23(Mon) 07:51

レスポンシブデザインのサイトを作っていて、ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。

http://blog.livedoor.jp/tacshock-code14/archives/7795174.html

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

2015/03/18(Wed) 07:50

2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。

http://www.webcreatorbox.com/tech/js-to-css/

[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js

2015/03/10(Tue) 07:56

非常にシンプルなマークアップで、コンテンツをアニメーションで横にスライドさせ、ナビゲーションを表示するスクリプトを紹介します。

http://coliss.com/articles/build-websites/operation/javascript/js-slideout.html

フリックにも対応のレスポンシブなスライダーを実装出来るスクリプト・「Flickity」

2015/02/11(Wed) 07:49

Flickityはスマフォのフリック操作にも対応したレスポンシブなイメージスライダーの為のスクリプトです。非依存型ですが、jQueryやVanilla.jsを使ってセッティングのコードを簡略化する事も出来るように設計されているみたいです。

http://kachibito.net/useful-resource/flickity

[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

2015/01/30(Fri) 07:59

画像やコンテンツのスライダーをスマホ・タブレットなどのタッチデバイスでの標準操作にも対応したいと考えている人にぴったりの単体で動作するスクリプトを紹介します。※jQueryのプラグインとして利用することも可能です。

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-flickity.html

[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs

2015/01/26(Mon) 21:40

CSS3を使った軽量でかっこいいさまざまなアニメーションでコンテンツを表示するタブコンテンツを実装するjQueryのプラグインを紹介します。

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-pwstabs.html

[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor

2015/01/20(Tue) 09:32

指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-parallaxor.html

Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法

2014/12/03(Wed) 07:44

任意で入力した場所から指定された場所までのルートをGoogleマップに描画する方法を紹介したいと思います。

http://liginc.co.jp/web/js/other-js/132151