gbn.jp

black-flag.net

jQueryでIE8でCSSの「background-size:cover」プロパティを擬似的に再現する実験 | BlackFlag

http://black-flag.net/jquery/20150414-5597.html

BlackFlag - Web Development Technical. 2015/04/14 TAGS : jQuery. JQueryでIE8でCSSの background-size:cover を擬似的に再現する方法 サンプルを別枠で表示. Background-size プロパティにて cover の指定をすることで. HTML script src=http:/ ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js /script! If lte IE 8] script src=js/bgCoverIE8.js /script! HTML div class=bgCover id=cover1 /div div class=contents p ダミーテキスト。 Contents - div class=bgCover id=cover2 /div div class=contents p ダミーテキスト。 サンプルではクラス .bgCover がついたエリアが対象になっています。 Clownworks - Creative...

black-flag.net

jQuery / CSS3 TIPS | BlackFlag

http://black-flag.net/jquery/20120801-4016.html

BlackFlag - Web Development Technical. JQuery / CSS3 TIPS. 2012/08/01 TAGS : CSS. JQueryで画像がクロスフェードするシンプルな画像ビューアー 自動再生 を作成する方法 改訂版. JQueryでフレームアニメーション パラパラアニメ を実装するプラグイン jquery.frameAnimation.js. JQueryで入力フォームの上にテキストを表示する プレースホルダ placeholder を作ってみる. JQueryで背景に画像をフルスクリーンで表示するいろいろ 単一画像 スライドショー ランダム. JQueryで外部HTML JSON形式 化した要素を もっと見る ボタンで追加する方法 複数設置対応パターン. JQueryで外部HTML JSON形式 化した要素を もっと見る ボタンで追加する方法. JQueryでiPhone & iPadスライド型ナビゲーションメニューUIをつくってみる。 CSS CSS3 のみでタブUI ボタンアクティブ付き を実装する方法。 JQuery / CSS3 TIPS.

black-flag.net

BlackFlag - Web Development Technical - Part 5

http://black-flag.net/page/5

BlackFlag - Web Development Technical. そんな際にFacebook上でOGP画像がどう表示されるかブラウザ上でシミュレートできるサービス og:image Simulator がこの先便利に ReadMore. テキストや数字をスロットの様に回転させるJavaScript ODOMETER jQuery a simple jquery slot machine effect tally counter. Odometer - Transition numbers ReadMore. JQueryで外部HTML JSON形式 化した要素を もっと見る ボタンで追加する方法. 以前に jQueryで もっと見る ボタンで画像を順々に読み込むUIの実験 と題して もっと見る ボタンで画像を次々と読み込ますUIを紹介しましたがそこで紹介したスクリプトでは連番で構成している画像要素のみの追加だったので jQueryでページ最下部までスクロールした際に外部HTML JSON形式 化した要素を追加する ReadMore. Page 5 / 56.

black-flag.net

BlackFlag - Web Development Technical - Part 2

http://black-flag.net/page/2

BlackFlag - Web Development Technical. Resize End G ReadMore. CSSアニメーションの終了イベントを取得してくれるJavaScript Detecting CSS Animation and Transition End with JavaScript. そんなCSSアニメーションの終了イベントを取得してくれるJavaScript Detecting CSS Animation and Transition ReadMore. そんな ページトップへ ボタンの出現方法をフェードイン アウト、下方向からスライドイン アウト、ボタン要素を拡大 縮小、の3つ ReadMore. Webページ上にある画像やコンテンツ要素をページをロードするたびにランダムで表示を切り替える方法についてお問い合わせやコメントで聞かれることが数多くあったので img タグのsrc属性をランダムで設定することで画像をランダムに切り替えるパターンと複数のCSSクラスをランダムで付与することで表示する背景画像を切り替えるパ ReadMore. Page 2 / 56.

black-flag.net

様々なフォーマットのファイル変換サービス「CloudConvert」＆ 透過PNG／GIFをSVGファイル変換サービス「ZorroSVG」 | BlackFlag

http://black-flag.net/web_service/20141202-5491.html

BlackFlag - Web Development Technical. 様々なフォーマットのファイル変換サービス CloudConvert 透過PNG GIFをSVGファイル変換サービス ZorroSVG. 2014/12/02 TAGS : ファイル変換. CloudConvert – convert anything to anything. CloudConvert – convert anything to anything. まず最初は CloudConvert – convert anything to anything。 対応フォーマット一覧 CloudConvert – Conversion Types. 詳しい操作説明は WEBCRE8.jp さんのページが. 参考サイト ファイル形式変換サービスはCloudConvertが最強ぽい – WEBCRE8.jp. ZorroSVG – Put a Mask on it. ZorroSVG – Put a Mask on it. 続いて ZorroSVG – Put a Mask on it。

black-flag.net

jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験 | BlackFlag

http://black-flag.net/jquery/20150217-5587.html

BlackFlag - Web Development Technical. 2015/02/17 TAGS : jQuery. HTML div class=imgInput input type=file name=file1 /div! ImgInput- div class=imgInput input type=file name=file2 /div! ImgInput- div class=imgInput input type=file name=file3 /div! Thisfiles.length){ if(0 selfImg.size() { selfImg.remove(); return; } } else { if(file.type.match('image.*') { if(! CSSで img タグに対して max-width を設定しておくと良いかと思います。 サンプルでは NO IMAGE としています。 NO IMAGE 画像を敷いておいて選択された際に画像を差し替える方法 サンプルを別枠で表示. 入力前は仮の NO IMAGE 画像を設置しておき. それぞれ ...

black-flag.net

BlackFlag - Web Development Technical - Part 4

http://black-flag.net/page/4

BlackFlag - Web Development Technical. JQueryプラグインを約1000個まとめて紹介しているサイト Unheap – A tidy repository of jQuery plugins. JQueryプラグインをまとめて紹介している記事やWebサイトは数多くありますが約1000個のjQueryプラグインを収集している Unheap - A tidy repository of jQuery plugins がプラグインを探す際にとても活用できそうだったので自分用メモとしてご紹介。 Unheap - A t ReadMore. 以前、iPhone5sのプロダクトページがリリースした頃に 簡単にパララックス実装可能な軽量スクリプト skrollr コンテンツごとにページスクロールするjQueryプラグイン fullPage.js One Page Scroll と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで1 ReadMore. Page 4 / 56. CSSで透明度 透過度 opacity の指定をする方法. BlackFlag...

black-flag.net

jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法 | BlackFlag

http://black-flag.net/jquery/20141028-5428.html

BlackFlag - Web Development Technical. 2014/10/28 TAGS : jQuery. HTML div id=container div class=fullSlideShow ul li a href=#1 img src=img/photo01.jpg alt= /a /li li a href=#2 img src=img/photo02.jpg alt= /a /li li a href=#3 img src=img/photo03.jpg alt= /a /li li a href=#4 img src=img/photo04.jpg alt= /a /li li a href=#5 img src=img/photo05.jpg alt= /a /li /ul /div! FullSlideShow - div class=wrapper h1 jQuery Responsive FullWide SlideShow /h1 div class=contents p ここからコンテンツエリア。 Important; -moz-opacity: 1!

black-flag.net

jQueryで特定の要素が存在するかどうかを判別する処理 | BlackFlag

http://black-flag.net/jquery/20150324-5622.html

BlackFlag - Web Development Technical. 2015/03/24 TAGS : jQuery. 扱いやすかったものとしてまず .length を使っての判別から。 Length を使っての #sample が存在した際の処理は. SCRIPT $(function(){ if($('#sample').length){ ここに sample が存在した場合の処理を記述 } });. SCRIPT $(function(){ if($('#sample').length){ ここに sample が存在した場合の処理を記述 } else { ここに sample が存在しなかった場合の処理を記述 } });. Sample').length) { ここに sample が存在しなかった場合の処理を記述 } });. Length の他にほぼ同様の方法で .size() を使って. Length と同じく .size() も要素の数があるかどうか、を判別する処理になり. Size() を使っての #sample が存在した際の処理は.

black-flag.net

jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法 | BlackFlag

http://black-flag.net/jquery/20150120-5537.html

BlackFlag - Web Development Technical. 2015/01/20 TAGS : jQuery. HTML div id=container div class=fullSlider ul li a href=#1 img src=img/photo01.jpg alt= /a /li li a href=#2 img src=img/photo02.jpg alt= /a /li li a href=#3 img src=img/photo03.jpg alt= /a /li li a href=#4 img src=img/photo04.jpg alt= /a /li li a href=#5 img src=img/photo05.jpg alt= /a /li /ul /div! FullSlider - div class=wrapper h1 jQuery HeaderFixed FullScreen Slider /h1 div class=contents p ここからコンテンツエリア。 Important; -moz-opacity: 1! CSS側で...