bxsliderの使い方(コールバックを使う) bxsliderの使い方 スライドショー系でよく使うプラグインなのに、毎回調べている気がするので。 今回はコールバック使ってタイミングの制御して1アクション入れる必要があったので、コールバックの使い方。自分用メモ。 bxsliderの設置 jQueryとbxsliderのjs、cssを設置。 • bxsliderを設定...
スライドショー系でよく使うプラグインなのに、毎回調べている気がするので。 今回はコールバック使ってタイミングの制御して1アクション入れる必要があったので、コールバックの使い方。自分用メモ。 bxsliderの設置jQueryとbxsliderのjs、cssを設置。 <link rel='stylesheet' id='camera-css' href='css/jquery.bxslider.css' type='text/css' media='all'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxslider.m
[はじめてのjQuery]コンテンツのスライダー機能を持つjQueryプラグイン「Awkward Showcase」と実装メモ
おはようございます！ おつぱ（ @OZPA ）です。 さて、Webのお勉強ﾅｰと言うことで、最近jqueryを使った仕掛けを色々ブログに取り入れております。 で、ずっとやりたかったけどできなかった、当ブログの主要カテゴリーへのかっこいいリンク作成を、jQueryプラグイン「Awkward Showcase」を使用してロゴ下に導入してみました！ なんだコイツ…動くぞ…！ 今回使用しましたのは、コンテンツのスライダー機能を持つjQueryプラグイン「Awkward Showcase」。 Awkward Showcase – デモページ HTML要素をスライド部分に使用可能。 ｘ軸、ｙ軸座標を利用したツールチップ機能 水平or垂直タイプのサムネイル機能 スライドはいくつでもok といった特徴を持っています。 レイアウトもいくつかのバージョンから選べます。こちらはバーティカル（垂直）サムネイル。
![[はじめてのjQuery]コンテンツのスライダー機能を持つjQueryプラグイン「Awkward Showcase」と実装メモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d1bd8096bf40990a95272a048b74ac9e2d92a047/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20120614-0842202.jpg)
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
any list scroller - jQuery scrolling plugin by musings.it
Any List Scroller by musings.it Do you want to scroll a list? ALS it! New v.2.1 responsive Characteristics ALS - Any List Scroller is the jQuery plugin by musings.it to scroll any list, of any dimension, with any content. Try it! It is surprisingly easy to use It works on any kind of list List elements can be texts, images, anything (read the instructions below) List items must not have a fixed si
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
画像に付けたボーダーをアニメーション化する『InsetBorder』の動作を逆にする[javascript]
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき 『InsetBorder』というjqueryプラグインは画像に付けたボーダーをマウスオーバー時にアニメーションで消してくれるというものです。 言葉じゃ伝わりません。公式サイトのデモをご覧下さい。 だんだんボーダーを消してくれるのですが、これ逆の方がよくないですか？ 画像をマウスオーバーしたらボーダーがだんだん表示されるって動きのほうがよくないですか？？ いいですよね！ 『InsetBorder』を誰かがカスタマイズしたっぽいのを見つけたのでちょっといじって公開します。 解説とかいらないからデモ見せろって人は下からどうぞ！ デモ 公式サイトのデモの流用でごめんなさい笑 『InsetBorder』のjquery
![画像に付けたボーダーをアニメーション化する『InsetBorder』の動作を逆にする[javascript]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9d481e57785e65e977a1f1d56d7b6ae93b1827ee/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fthumb5.jpg)
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する | 独学Webデザイナーの覚書
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
スワイプ操作を実装できるjQueryプラグイン、TouchSwipeがイイ感じ | Studio Rubbish
あーあー今日もウェブつくるのかーめんどくせーなーつまんねーなースワイプしてえなー。フリックでもいいからー。 jQueryでできんのかなー。あ、できちゃった、これ上手くいった? ブヒヒwww ん、たてにスクロール出来なくなっちゃったね。そりゃあそうだそうだ。 やぱ他人が作ったの使った方がウマウマだなブヒヒ。 Boxer flickGal FlickSlide flipsnap.js iScroll jCarouse jQuery.flickSimpe jQuery.flickable jQuery.jcflick PhotoSwipe Swipebox Swipeshow TouchSlider Unslider 色々試しました。疲れました。 ほかにもこの辺を参考にしたブヒ。 スマートフォン向けスワイプ・フリック系ライブラリのまとめ 画像ギャラリー等、スマートフォン（iPhone /
Thumbnail Grid with Expanding Preview | Codrops
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images. If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a
Google画像検索風のギャラリー - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="g_img.css" type="text/css" /> <script src="jquery.min.js"></script> <script src="g_img.js"></script> </head> <body> <div id="loading"> <div id="preload"> <div class="barBody"> <p class="bar"></p> </div> <p class="precount"></p> </div> </div> <div id="header"> <span id="tittle">MY Tumblr</span> </div> <ol id="google_i
Google画像検索の様なUIを実装する実験（レスポンシブ対応） | BlackFlag
Googleさんの画像検索で使われているサムネイルをクリックすると すぐ下にアコーディオン形式で詳細エリアが広がるUI。 このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが 画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので 実験がてらjQueryを使ってGoogle画像検索のUIを試しに作ってみたので紹介してみたいと思います。 レスポンシブ動作などブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでGoogle画像検索の様なUIを実装する実験（レスポンシブ対応） サンプルでは25枚の画像を一覧で並べて ウィンドウサイズに合わせて、 １行に並べられる画像数等がリキッドレイアウトされます。 サムネイルをクリックすると すぐ下に詳細エリアが展開されます。 詳細エリアにはNE
Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「photowall」 – bl6.jp
Google画像検索のようなアニメーションを実装することができるjQueryプラグイン「photowall」がよかったのでご紹介します。サムネイル画像をクリックすると、その画像詳細がスライドダウンして表示されます。画像を扱うWebサービスなんかと相性がとてもよさそうですね。 [ads_center] 使い方 このようにGoogleで画像検索している時のようなアニメーションを実装することができます。これは便利ですね。 jQuery本体とダウンロードしたプラグインをhead内に読み込みます。 <link rel="stylesheet" href="photowall/jquery.photoWall.css"> <script src="photowall/jquery-1.9.1.min.js"></
Webデザインレシピ » Blog Archive » jQuery BX Slider Plugin
Today must be a Thursday. I could never get the hang of Thursdays. Photo by harold.lloyd
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
jQuery Content Slider | Responsive jQuery Slider | bxSlider
yuguri.com
Welcome to Farmhouse Fare
磷脂酰胆碱90% - 梁平市铁晓崖宠物有限公司