Swiping and reordering lists of elements on touch screens, no fuss. A tiny library by Kornel. Swipe, hold & reorder or instantly or either or none of them. Can play nicely with: interaction inline CSS transforms stylesheet transforms and selectable text, even though animating elements with selected text is a bit weird. iOS Safari Mobile Chrome Android Firefox Opera Presto and Blink No dependencies
flickに関するnibushibuのブックマーク (21)
-
nibushibu 2014/01/07
-
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
-
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
-
フリックイベント[Javascript]: たった1.2人の独立戦争記
おとなになりきれない兄(0.9)＋ニートな弟(0.3)の ロメオリンクス創業と事業展開にまつわる奮闘記。 フリックとはiPhoneやAndoroid端末に代表されるスマートフォンのタッチスクリーン上を指でこするような動作をすることでアプリケーションを操作する方法です。 今回はそのフリックをWebアプリケーションで検出する仕組みを考えます。onflickなんてのがあればよいのですが、なさそうなので三種のタッチイベントを組み合せてこれを実現することにします。基本的な考え方は以下の通りです。 1．タッチスタートイベントを取得し、そのときのX座標を取得する。 2．タッチムーブイベントを取得し、そのときのX座標を取得する。 3．タッチエンドイベントを取得し、1．と2．のX座標の差が存在する場合、フリック動作が行われたとみなす。 以下、ソースコード。 -------------------------
-
-
jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験｜BLACKFLAG
前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する フリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、 前回の単純なフリック／スワイプのUI動作に加えて、 自動で次の画像に切り替わるスライドショー動作と メインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの 画像ギャラリーを作ってみたので紹介してみたいと思います。 jQueryでフリック／スワイプ動作付きの自動再生スライドショーを作成する実験 まずは動作サンプルから。 別枠で表示する場合はこちらから 一定の間隔で自動で次の画像に切り替わります。 画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT／BACKボタンと メインビジュアル部分をフリック／スワイプすることで切り替えることが可能になっています。 メインビジュアル部分にマウスオーバーしてい
-
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
-
-
flickGal - デモ | stakamura
iPhoneでフリックギャラリーを実装するjQueryプラグイン「flickGal」のデモページです。タブスタイル
-
-
iOS5でフリック入力ミスが増えた方必見！もっさり解消法 | ひとぅブログ
13日に公開されたiOS5。iPhone4Sに搭載されている最新OSですが、iPhone3GS/4、iPad/2、iPod touch（第3/4世代）にも対応しているので、わくわくしながらアップデートされた方も多いのではないでしょうか？ 私もそのひとり。iPhone4を13日午前4時から約3時間かけてアップデートしました。わくわくしながら触ってみると何だかフリック入力に違和感が……。何というか、文字入力ミスが多発して、変換候補の表示ももっさりしていてイライラ。 iPhone4なのに何で？パワー不足？？そんな事は無いはず……。と思っていたのですが、Twitterでみなさんのツイートを見ていると、どうやら大きく二つの原因があったようです。（ちなみに、Appleから正式なコメントが出ていないのであくまで私の予想です(^_^;)。） iOS5になってフリック入力に影響が出た理由 キーボードの認識エ
-
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
-
iOS 5 でフリック入力が地味に進化！同じ文字の連続入力が楽になります！ | AppBank
iPhoneでの文字入力はフリック入力のみ、という人も多いと思います。実際、一度体得してしまえば確実にフリック入力のほうが速いです。 しかし、そんなフリック入力にも「ちょっとなぁ…」というところがありました。その1つが同じ文字の連続入力です。 iOS 5 のアップデートで、フリック入力時における同じ文字の連続入力が大幅に楽になりました。これは全フリック入力派にとって嬉しいことでしょう。 さっそく紹介に入ります！ iOS 5 の使い方まとめページはこちらからどうぞ！ 【ただいま更新中】iOS 5 の使い方まとめ！新機能を中心にご紹介いたします！ 設定 それではサクッと設定していきましょう。 設定アプリの「一般」→「キーボード」→「各国のキーボード」と進んで下さい。 「日本語テンキー」を選択すると、そこには謎の【フリック入力のみ】という表示が…さっそくタップしてフリックのみ状態にしてみました。
-
アイディア次第で使い道色々。フリック入力対応のギャラリーライブラリ·flickGal MOONGIFT
flickGalはiOSのフリック操作に対応したギャラリーライブラリです。デスクトップ向けWebブラウザでも表示できます。 Webサイトにフリック操作で画像を切り替えられるギャラリー機能を追加したいと思ったらflickGalを使ってみましょう。jQueryプラグインで手軽に導入できます。 フリック操作なので主にiOS向けです。でもSafariやGoogle ChromeなどのデスクトップWebブラウザも問題なく利用できます。 写真の切り替えはタブをクリックする他、フリック操作でも大丈夫です。 フリック操作でアニメーションしながら写真が切り替わります。 大きな画像を表示している場合です。prev/nextのリンクでも写真を切り替えられるようになっています。 Yahoo! Japanのトップページにあるのに似た表示形式です。写真だけではなくアイコンを並べて機能を選択するといった使い方も考えられ
-
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
-
iPhoneやAndroidなどスマートフォンのスワイプ操作で動かせるカルーセルを実装する非依存型スクリプト・SWIPEVIEW - かちびと.net
iPhoneやiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト にも導入もしやすいかもしれません。 スワイプで動かせるカルーセルです。他ライブラリに依存しませんので使い勝手はなかなか良いかなと思いました。この手のはカクカクしがちですけど、これは動作も結構スムーズです。多少はありますけどね・・ まだ画像しか対応していませんが、今後対応していくとの事です。jsファイル自体も8KBほどの軽量スクリプトですよ。完璧とは言いませんが今まで触った中でもなかなかスムーズな方ではないかと。 サンプル作りましたので以下よりお持ちのスマフォでどうぞ。 Sample お持ちではない場合はスクリーンキャストをご覧ください。 エミュレーターですけど、動作
-
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
-
iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン - makogの日記
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル（iPhone/Androidでもご覧いただけます） jQuery.flickSimple ダウンロード（github） これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
-
iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ
iPhone･iPadのWebアプリケーション開発を相変わらず研究しています。 最近のiPhone･iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ（本当に）ガッツリ研究していこうと思います。 と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。 そこで、jQueryでもCarousel風のUIをサクサクッと作れ
-
『iPhoneサイトで画像ギャラリーを簡単にフリック操作対応させる』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ iPhoneサイトで画像ギャラリーをフリック操作に対応させる※iPhoneで見てください フリック対応のデモはこちら 先月、iPhoneサイトのデザインを集めたiPhoneデザインボックスを公開しました。 反響はすごくあり、アルファブロガーのネタ帳さんやWebクリエイターボックスさん、PHPSPOTke-tai.orgさんなど多くの方に紹介していただきました。 ありがとうございます。 現在、スマートフォンのサイトのコーディングで簡単な方法として フレームワークのjQueryMobileを使う方法があります。 私は、最初から楽をするのが好きではないので自
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました