jquery.easyAudioEffects.js
EasyAudioEffects.js Easily set up sound effects to HTML elements Download on GitHub Latest Version : v1.0.0 with jQuery - v1.7.0 or Later. easyAudioEffects.js easyAudioEffects.js is jquery plug-in. This can be given a very easy sound effects for any of the elements on your WEB site. compatible browser This plug-in is the reaction slightly in Safari is slow. (Jun , 2015)
要素を立体的に回転させて動かすエフェクトTURNBOX.jsの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ だんだんと秋の気配が近づいて過ごしやすくなりましたね。 なんだかゴロゴロしたくなってきます<( ˘ω˘ ┌┛)┌┛ ってなわけで今回は、要素を立体的にゴロンゴロン動かせるプラグイン TURNBOX.jsをご紹介しますc⌒っ´ʘ‿ʘ｀)っ それでは実装方法を解説していきます( ˘ω˘)☝ はじめに jQueryを呼び出す記述の後にturnBox.jsを読み込みます。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/turnBox.js"></script> HTML divの中に表示させたい面の数の子要素を配置しましょう( ˘ω˘)
jQuery UIのDraggableで快適なドラッグアンドドロップライフを！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis
超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．円形 ２．タブ ３．ナビゲーション ４．アコーディオン ウィンドウ ５．モーダルウィンドウ ６．フローティングウィンドウ ７．Dialog(ダイアログ) ８．フォーム＋バリデーション ボタン ９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ:phpspot開発日誌
チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ 2013年10月25日- Animated Checkboxes and Radio Buttons with SVG | Codrops チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ。 チェック、ラジオをチェックするときは瞬時にチェック状態に変わってしまうのが当たり前ですが、アニメーションした方がもっとオシャレで”ちゃんと”チェックした気になります。 デモ 分かりやすいのは実際に紙でチェックするときの感じに近いからでしょうか。 なんとなく、ひと味違う感をサイトに持たせたい方は参考にしてみてもよさそう 関連エントリ チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」 好みのチェックボックスのデザインが簡
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch - かちびと.net
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。 これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 Draggable Droppable Resizable Selectable Sortable Accordion Autocomplete Dialog Progressbar Slider 実機でテ
Pinterestっぽいレイアウトを作ってみる
以前、レンガ風に要素を配列するレイ アウトを凄くよく見かけるようになり、 それから一種のブームのように様々な リソースが出回りました。最近はあま り見かけなかったのですが、Pinterest の登場で、また似たようなレイアウト のリソースが出てきている印象です。 Pinterestのように時系列を崩さず、ボックスを配置するスクリプトにjquery masonryっていうプラグインがあるのですが、同じようなプラグインでWookmark-jQueryというのを昨日見かけましたので、空いた時間になんとなくPinterestっぽいレイアウトを作ってみる事にしてみました。 Sample ソース調べるほど真面目な記事でもないので見た目を勘に頼って似せただけ。 ※あくまで「っぽい」です。 Sample コード<script src="js/jquery-1.7.1.min.js"></script> <
jQuery UIのデザインをオリジナルに変更したサンプル
分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザインが若干使いにく いんですよね。 jQuery UIのデザインを変更するやつです。正直、公式で用意してくれているデザインは沢山あるんですが、どれも少々使いにくい感じなので自分で作るしか無いわけですが、結構面倒です。 で、今日紹介するサンプルはBootstrapっぽい感じで割りと使いやすいのではないかと思ってメモがてら記事にします。 Selene こんな感じ。以下動作サンプルです。 Sample 使い方は変わらないです。CSSだけSeleneっていうのを使えばいいだけ。 <link type="text/css" href="ui-selene/jquery-ui-1
ユーザへの通知UI全部のせなjQueryプラグイン「noty」:phpspot開発日誌
noty - a jquery notification plugin ユーザへの通知UI全部のせなjQueryプラグイン「noty」 ページトップやボトム、あるいはページのセンターやポップアップでメッセージを表示することが出来るプラグインです noty({text: 'noty - a jquery notification library!'}); のように呼び出せばアラートが出せるみたいです。 各種オプション指定によって表示位置を変えられたりするようです 最近のWEBを見ていると通知ってやっぱり重要だなと感じるわけですが、こうしたもので分かりやすく表示してあげるといいですね。 関連エントリ faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 分かりやすい通知ボックスを作れる「Humane JS」 簡単なコードでアイコ
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」:phpspot開発日誌
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」:phpspot開発日誌
cow2design.com
IDEA * IDEA
オンラインでjQuery UIのデザインを作成・「jQUIT」 - かちびと.net
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
jQuery UIの各エレメントをレトロ風のかわいいデザインに変更するテーマファイル -jQuery UI Theme Retro