jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」:phpspot開発日誌
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 2013年03月05日- Sidr - A jQuery plugin for creating side menus レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのfacebookアプリなどで採用されている左や右にスライドするメニューをブラウザ上で実現できるjQueryプラグインです PCでも違和感なく使えるのは嬉しいですね メニューが開いていない状態。 開くと画面が左にスライドしつつ左からメニューが表示されます テーマも白と黒から選べるみたい 関連エントリ Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」 HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベー
Dribbbleの投稿をjQueryで自分のサイトに表示させる
ちょっと調べ物をしたので備忘録です。 デザイナー専門のコミュニティサイト、 Dribbbleの投稿を自分のサイトに表示 させる方法。APIとjQueryを使って表示 させて見ます。日本ではDribbbleの利 用者は少なそうですけど・・ Dribbbleはデザインなどの成果物を投稿し合うコミュニティサイトです(多分。よく知らない)。最近はフリーで配布されるようなアイコン集などにもDribbbleのアイコンが含まれているみたいです。 この、Dribbbleへの投稿内容を自分のサイトに表示させる、というのが今日の内容です。 Sample僕はDribbble使った事ないので他の方のID借りた。thx:Jonathan Quintin 投稿のサムネとリンクだけのシンプルなものです。 コード$.getJSON("http://api.dribbble.com/players/ユーザーID/shots
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho
Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定するスライドごとの動きはimpress.js同様、カスタムデータ属性で操作します。 <div class="mosho-slide" id="3d-transform" data-x=1120
複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」:phpspot開発日誌
champagne.js | fresh tilled soil 複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」。 画像などの要素が一杯あって単に並べるより、アニメーションを加えて徐々に出すというのはまた違った印象が得られます。 ギャラリー的な物に実装してみるといい感じになるかもしれませんね。 ULリストを定義したら、<script>タグでchampagne.jsをインクルードして次のように呼び出せば実装できるお手軽さがいいです $("ul.champagne").champagne(); 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 Twitter Bootstrapを使ったイメージギャラリーサンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル レスポンシブなPhotoギャラリー
カウントダウン終了後に任意のコードを実行できる軽量jQueryプラグイン・jquery-countdown - かちびと.net
カウントダウンタイマーの実装と 終了後に任意のイベントを発生 させられるjQueryのプラグイン、 jquery-countdownのご紹介です。 たまに見かけるやつですね。使用 頻度は高くは無さそうですけど。 ローンチ前のComing soonページなんかでたまに見かけるやつです。スクリプトも軽量です。 カウントダウンアニメーションを実装します。終了後にコードを実行させる事も出来ます。時計部分はCSSスプライトを利用した画像を使用しているようです。 動作サンプル サンプルです。再生ボタンで動作テスト出来ます。 日をまたぐようなカウントダウンならもう一工夫必要ですね。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <
[JS]URLの構成要素をパースするスクリプト -jQuery URL parser
jQuery URL parser -GitHub [ad#ad-2] JQuery URL parserがパースする要素は8つです。 Scheme プロトコル https://, ftp://, mailto: など User ホストサーバー接続時に使用するユーザー名 ※空の場合もあります。 Password リモートサーバー接続時に使用するパスワード ※空の場合もあります、ユーザー名無しでは設定できません。 Host ホストサーバーの名前、あるいはIPアドレス www.example.com, 127.0.0.1 など Port ホストサーバーのポート 80, 8080 など。空の場合は80を暗示します。 Path ファイルのパス /index.html, / など Query パラメータ ?param1=value1¶m2=value2 など ※空の場合もあります。 Fragment
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ