jQuery

スクロール催促ボタンとページトップへ戻るボタンの出し分け

2017/06/13 jQuery No comments

See the Pen GoToTop by Tenderfeel (@Tenderfeel) on CodePen.

某サイトで使っているボタンを要点だけ切り出してみた。

以下が指定された挙動だった:

  • 初期状態は下へスクロールするボタン
  • ファーストビューが消えるくらいスクロールしたらトップへ戻るボタンにする
  • フッターにトップへ戻るボタンを被せない

[jQuery] スマートフォン・タブレットPCのユーザーエージェントと判別プラグイン

2011/08/12 jQuery No comments ,

ユーザエージェント(userAgent)判別プラグインの焼き直しです。
スマホ判別に特化させてみた。


直接見る

(さらに…)

[jQuery] ユーザエージェント(userAgent)判別プラグイン

2011/06/22 jQuery 2 comments ,

ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。
パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレビ・ガラケーのブラウザも判別対象としています。


直接見る

(さらに…)

[CSS3+jQuery] 画像なしでどこまで作れるのか?の限界に(forkして)挑戦 – jsdo.pigg

2011/02/25 jQuery No comments

jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。

それはそれで熱いんですが、私の中でいまブームになってるのは
GeckoTangさんが作ったjsdo.piggのfork祭り(勝手に祭り化)です。

まあとにかくSafariかChromeで実物を見ていただきたい。

jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

かわいい顔してるだろ…。これ画像使ってないんだぜ…?

見た瞬間ティンと来た。

2/24のつぶやき「http://jsdo.it/tsmallfield/counting_sheep2 と http://jsdo.it/GeckoTang/dOv6 合体させたら農場っぽくなりそう」

つぶやいたらtsmallfieldさんが実行してくれた。

背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

全く変更なしで合体させただけなのにこの統一感!シンクロ率半端ない!
この背景も画像ゼロなんですよ。fork元である羊数えるやつではCSSで描かれた動物も見れます。
で、その後「作ってくれる人いたらラッキー」なノリで追加案をつぶやいてみたんだけど、
深夜過ぎた所為か朝見たときforkされてなかったので、辛抱たまらんくなって自分で作ってみた。

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ほらもうなんかアバターSNSっぽい!!!
繰り返しますがここまで画像ナシです。CSS3マジぱねーっす!

全fork元はこちら。

私が追加したものはこれだけ。

  • jQueryでチャットっぽいUIの追加
  • jQuery用のCSSチューニング
  • ふきだしスタイル変更ラジオボタンの追加
  • まばたきアニメーション(CSS3)
  • 口パクアニメーション(CSS3) ←form ミサワ祭り

(あのミサワ祭りがこんなところで役に立つとはw jsdo.it恐ろしい子…!)

UIにはforkされやすいようにjQueryを使いました。
現状まともに見れるのはChromeとSafariだけだけど、CSSだけでアメーバピグとか@gamesみたいな雰囲気になってるのがマジ凄くない?

今後も何かティンときたら追加するつもりでいるのですが、
WebSocketチャットの実装は共用サーバーだと無理だから出来なさそうです。
VPS持ってる方が実装してくれないかなーと思って記事にまとめてみました 😀

WebSocketチャット版jsdo.pigg登場の巻

ginpeiさんがWebSocketに対応させてるよ!

jsdo.piggを乗せてみた forked from: WebSocket触ってみた – jsdo.it – share JavaScript, HTML5 and CSS

これにフキダシとかの装飾がされたらと思うとwktkが止まらなーい!
発言が交互に繰り返されていくなら「吹き出し」風スタイルの方がしっくりしそう。
使われてるWebSocketのAPIサービスは「WebSocket試したいけど自分でサーバー周り用意するのは面倒」という時に便利そうです。

[jQuery] Image Slider/News Ticker Clone

2010/10/25 jQuery No comments

Simple News/Image Sliderみたいに画像を1列に並べて延々横スクロールさせるやつがjQueryで欲しかったんだけど
検索してもそういうのが見つからなかったからクローン作った。

見た目と動きはオリジナルと大体同じです。

The Code

ターゲットに指定できるのはリスト要素(ULまたはOL)限定です。リスト(LI)の中身は問いません。

$(document).ready(function(){
$('#target').imageSlider();
});
#target {overflow:hidden;}

親要素もしくはwrap要素にoverflow:hiddenしておくこと。
ターゲットに指定された要素にはリストの横幅の合計がセットされます。
表示範囲を限定したい場合はプラグインが作成するwrap要素をoverflow:hiddenにしてwidthを設定してください。

Option

className (string)
wrap要素のクラス名。デフォルトはslider-wrapper
speed (number)
スクロールのduration。デフォルトは3000
easing (string)
スクロールのeasing。デフォルトはlinear

(さらに…)