[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6a9733cb188f18f0e50eb923016abf17dd1f266/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
Engadget | Technology News & Reviews
The Stop Killing Games movement is nearing an official meeting with EU lawmakersOnce all the Stop Killing Games signatures are verified, the organizers will present the initiative to both the European Commission and Parliament. The Witcher Season 4 will hit Netflix in October with its new GeraltNetflix dropped a new teaser trailer for the upcoming fourth season, giving us a better look at Liam Hem
パネルをフェードのエフェクトで表示するスライドショーの超軽量スクリプト -TinyFader
jQueryなど他のスクリプトに依存せずに動作する、パネルをフェードのエフェクトで表示するスライドショーの超軽量（1.4KB）スクリプトを紹介します。 Fading JavaScript Slideshow – TinyFader デモページ [ad#ad-2] スライドショーはリスト要素で実装されており、パネル内にはリスト要素内に配置できるものであれば、どんなコンテンツでもサポートします。 パネル「1」は、見出しとパラグラフとリンクのコンテンツ スクリプトのオプションでは、オート表示の時間、スライドショー本体やページネーションのクラス名、アクティブ時のクラス名、ポジションなどを設定できます。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slides', // ID of the parent slideshow unorde
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
iGoogle風のUIを比較的簡単に実現できる「iNettuts」:phpspot開発日誌
How to Mimic the iGoogle Interface | Nettuts iGoogle風のUIを比較的簡単に実現できる「iNettuts」。 iGoogle風のUIを作成するNettutsのチュートリアルとサンプルコードのダウンロードが可能です。 当然ドラッグ＆ドロップによる移動やソートも可能になってます。 自分で作るとかなり大変そうですが、こうしたものを使うことで誰でも簡単に実現できますね。 解説を読んでもなかなか勉強になりそうです。 関連エントリ Prototype.jsでiGoogleっぽいポータルな仕組みを作れるJSライブラリ「Xilinus」 iGoogleみたいなインタフェースを作成するチュートリアル
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」:phpspot開発日誌
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 2010年07月26日- Sudo Slider jQuery Plugin Demo#1 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」。 簡単な定義でなんでもスライダーとして動作させちゃうことが出来ます。 <div>の中に<ul>リストで<li>内にコンテンツを並べるだけであとは順次スライドしてくれるようです。 あとはAjaxによるコンテンツ読み込みにも対応してるみたい 以下にサンプルをご紹介。 シンプルな画像スライダー ページ送りを追加した例 ページ送りは番号だけじゃなくて特定文字列の定義も可能 タブっぽいUIにすることも可能。コンテンツの高さは自動でアニメーションしながら調節されるようにしたりもできる 他にも色々
30 Pure CSS Alternatives to JavaScript — Speckyboy
Resources by Application Bootstrap Templates Figma Templates Flyer Templates Illustrator Templates InDesign Templates Lightroom Presets Logo Templates Logo Fonts Mockup Templates Photoshop Actions Photoshop Brushes Resume Templates Tailwind CSS UI Kits Web Templates Video & Motion Design Templates All Motion Design After Effects Apple Motion DaVinci Resolve Final Cut Pro Premiere Pro Presentation
Animated Navigation w/ jQuery & CSS | jQuery Navigation | jQuery Tutorial | Easy jQuery Navigation Tutorial
As I was checking out some flash sites for inspiration, I ran across a couple websites that had some nice navigation effects. I’m not a huge fan of wildly animated navs, but these had simple and elegant roll over effects that I liked. I decided to imitate the effect with CSS and jQuery, and would like to share this technique today. View Demo Step 1. Wireframe – HTML This part is very simple. Your
ナビゲーション実装に使える、Ajaxライブラリ/サンプル集:phpspot開発日誌
35 Easy to use Free Ajax/Javascript Navigation Solutions : Speckyboy - Web Design, Web Development and Graphic Design Resources 35 Easy to use Free Ajax/Javascript Navigation Solutions ナビゲーション実装に使える、Ajaxライブラリ/サンプル集。 便利そうなナビゲーションパーツが多数紹介されていて参考になります。 Outlook Navigation Bar jQuery suckerFish Tree with Checkbox Nodes Tabbed Search Bar Sliding Tabs Floating window with tabs 続きを見る クールで分かりやすいサイト作りに役立てまし
Courses and Tutorials in HTML/CSS | Envato Tuts+
Get every type of asset for any type of project, and access to AI tools From $16.50/m
階層ナビゲーション実装ライブラリ集:phpspot開発日誌
Multilevel Drop Down Navigation Menus: Examples and Tutorials Navigation menus are the most important element one should pay attention when designing a website. 階層ナビゲーション実装ライブラリ集をまとめたエントリが公開されていたので気になったものをいくつか紹介。 JavaScriptなどを活用して、マウスホバー/クリック時に開閉するおなじみのＵＩがいっぱいです。 Drop Down Tabs (5 styles) Professional Dropdown FastFind Menu- Mootools Unlimited Drop Menu Creating an Outlook Navigation Bar 全部見る デザイン
SlashDot風のサイトメニューを作る「Slashdot Menu」:phpspot開発日誌
Prototype.js を利用して作られたJavaScriptライブラリまとめサイト「Scripteka... 次の記事 ≫：Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装 Dynamic Drive DHTML Scripts- Slashdot Menu This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. SlashDot風のサイトメニューを作る「Slashdot Menu」。 次のようなSlashDot風のメニューを実装することが出来ます。 大メニュー選択でアニメーションもします。 実装コードは次のようにシンプル。 var myMenu = new SDMenu("main_menu"); // I
マウスが上に来るとくるりんと文字の色を変えるスクリプト「Scrollovers」
リンクなどの文字列の上にマウスが来ると自動的にくるりんと回転する感じで文字の色が変化するというちょっと楽しいエフェクトを加えてくれるスクリプト、それが「scrollovers.js」です。 Firefox 2.0、Internet Explorer 7、Internet Explorer 6、Internet Explorer 5.5、Safari 3 (Windows)、Opera 9で動作確認されているとのことで、個人利用でも商用利用でも無料で使用できます。 論より証拠、デモを見た方が理解できます。 デモとダウンロードは以下から。 Scrollovers - A New Way of Linking http://www.scrollovers.com/ 「scrollovers.js」自体の中身がどうなっているかというのは以下からわかります。 http://www.scrollove
ブロックのスクロール実装を便利にするJavaScriptライブラリ「jsScrolling」:phpspot開発日誌
リアルタイムにファイルをアップロード可能なExtベースJavaScriptライブ... 次の記事 ≫：PhotoShopからFlickrに直接画像をアップできるプラグイン「FlickrShop」 jsScrolling Also check out a new version of this script. It's faster and has prettier code, but you can't hack it as much. ブロックのスクロール実装を便利にするJavaScriptライブラリ「jsScrolling」。 画像で実装したスクロールバーをブロック要素に付けた例 右側にプレーンな分かりやすいスクロールバーを付けてみた例 実装は、必要なライブラリを読み込んだ後、次のようなコードですごく簡単に実装できます。 scroller = new jsScroller(docum
CSS Dock Menu
May 08, 2007 17,799 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer s
prototype.jsを用いたフォントサイズ変更スクリプト:phpspot開発日誌
prototype.jsを用いたフォントサイズ変更スクリプト - Ogawa::Memoranda それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプトを実現してみました。 prototype.jsを用いたフォントサイズ変更スクリプト。 実装することで次のように、文字のサイズを選べる機能をページに実装できます。 ブラウザの文字サイズを変更するよりも手軽に文字サイズを変更できる機能として、ユーザビリティ向上に役立ちそうですね。 関連エントリ ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」 JavaScriptを使ってページにマウスジェスチャ機能を実装する
ブラウザ上で動作するOSのまとめ:phpspot開発日誌
Big WebOS roundup - 10 online operating systems reviewed at franticindustries - web 2.0, social networking, IT technology trends. ブラウザ上で動作するOSのまとめ。 Ajaxが登場して以来、いろいろと出てきたWebOSを見てみましょう。 Craythur Desktoptwo EyeOS Glide Goowy Orca Purefect SSOE XinDESK YouOS なかなか面白いサービスが多く、JavaScriptで実装しているUIについても見るだけで参考になる部分がありそうです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ダイナミックにウェブサイトをナビゲートするスクリプト -jQuery Panel Magic