Canvasのレスポンシブデザイン対応 - ウェブプログラミングおじさん
最近Canvasを使ったゲームを作成したのでその時に知った技をひとつ紹介します。 CanvasはCSSのwidthやheightにパーセントを指定できないので、CSSだけではレスポンシブデザインに対応できないのです。 そこでJavascriptとの連携でこれを解決する方法がこちら。 まずHTMLには、基準となるCanvasのサイズをピクセル単位で指定します。 このサイズは例えばCanvasの最大サイズであったり、Javascriptで扱いやすいキリのよい数字だったりなんでもオッケーです。 また.containerの横幅ををCSSにて可変サイズにします。 <div class="container"> <canvas class="canvas" width="600" height="600"></canvas> </div> そしてJavascriptを以下のように記述します。 $(wi
[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons
Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。 デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。 <head> ... <link rel = "stylesheet" href = "Path/To/Quttons.css" /> </head> <body> ... コンテンツ ... <script src = "Path/To/jQuery" type = "text/javascript"></scr
![[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons](https://cdn-ak-scissors.b.st-hatena.com/image/square/732285fae252960d582f0d7d1f3f578a0f23f796/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015061608.gif)
jQueryゼロから / scale(画像を拡大縮小する) | ゆるぶ | ページ 475
jQueryのcssでプロパティを直接いじるのだが、width, height は 180% とか指定できないのね。 なので、直接画像サイズを指定しました。(画像サイズ 32px × 1.8 ≒ 58px) んで、結局何がやりたかったのかというと、オンマウスでぷるんと出来んかなと。 width / height をいじると画像の左上を原点として拡大するので、同時にtop / left もいじることに。 位置調整用に<span>とか何かしらのタグで囲いつつ、position: relative にしておいてください。 var option = { duration: 'fast', easing: 'easeOutElastic' }; $('#target').hover(function(){ $(this).animate({ top: -13, left: -13 }, option
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
IEの透過PNG+opacityの不具合を治すメモ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。 サンプルコード 例えば、こんなコード。 <style> .test { display:block; width:128px; height:128px; background:url(./test.png) 0 0 no-repeat transparent; } .test:hover { background-image:url(./test-hover.png); } </style> <a href="#" class="test"></a> test.pngとte
iLightBox - Revolutionary Lightbox Plugin
Sleek, smooth, powerful, and revolutionary jQuery lightbox plugin for creative and ambitious web designers and developers. Download iLightBox Download for WordPress Discussion Version 2.2.4 Introducing iLightBox iLightBox allows you to easily create the most beautiful responsive overlay windows using the jQuery JavaScript library. By combining support for a wide range of media with gorgeous skins
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
Blueberry - A simple, fluid, responsive jQuery image slider.
Introducing a jQuery image slider written specifically for responsive web design. Resize this page to see it in action! What is Blueberry? Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. A brief history With the popularity of smart phones and tablet devices responsive/fluid web layouts have become an
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。 このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。 PersistentHeaders １．サンプル サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。 サンプル ２．プラグインのダウンロード 以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。 jquery.persistentheaders_0.0.1.js jquery.persistentheaders_0.0.2.js 以下、設定方法です。 ３．HTML H
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH
同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script>
アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」:phpspot開発日誌
アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 2012年03月13日- playground.mobily.pl - marcin dziewulski - MobilyBlocks アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」。 ソーシャルサイトにシェアする際なんかに使えそうなボタンを簡単に実装できます。 そもそもボタンもいい感じなんですが・・ クリックするとアニメーションしながらソーシャルサイトのアイコンが表示されます。フェードもいい感じ。 ボタンだけじゃなくって写真にだって適用してみても面白いというデモも公開されています 省スペースなので邪魔にならない、だけど多機能を盛り込めるというところで使い勝手はよさそう 関連エントリ リッチなドロップダウンメニュー実装ができるjQue
[JS]表示サイズにあわせて最適なレイアウトを提供する高性能なスライドショーのスクリプト -Camera
表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。 もうすぐ始まるIEの自動アップデートのIE8にも対応しています。 Camera | a free jQuery slideshow by Pixedelic [ad#ad-2] Cameraのデモ Cameraの使い方 Cameraのデモ デモは上記のトップにあるものと、他に3種類のスライドショーがあります。 トップのものが一番シンプルで、Cameraの基本性能を楽しめます。 画像の切り替えには、美しいアニメーションが採用されています。 デモ：Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基本的なHTMLの構造から。 HTML div要素にHTML5の独自属性で「data-src」を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://bqworks.com/slider-pro/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
html5-memo.com
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Real Shadow: Photorealistic Shadows of any shape
クールなドアノブ風の％グラフを描画できるjQuery Knob:phpspot開発日誌