UIでボタンをクリックするのが楽しくなるエフェクトがたくさん揃ったJavaScriptライブラリ -Party.js
ユーザーがボタンのクリックなど、アクションをした際に紙吹雪やハートをクラッカーで弾けたようなエフェクトで表示する、楽しさを演出するJavaScriptライブラリを紹介します。 クリックするのが楽しくなるエフェクトがたくさん揃っており、「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に伝えることができます。 Party.js Party.js -GitHub Party.jsの特徴 Party.jsのデモ Party.jsの使い方 Party.jsの特徴 Party.jsは「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に表現するエフェクトを実装し、ユーザーのサイトエクスペリエンスを明るく楽しくするJavaScriptライブラリです。 ユーザーのアクションに伴い、紙吹雪やハートやキラキラなどのエフェクトを簡単に実装できます。 実装が簡単 ライブラリをHTMLファイルに含め
今更ながら、親ボタンの周りに子ボタンを扇状に表示させてみる | バシャログ。
PSVR用『Beat Saber』が遂に発売されました！気分はジェダイで毎日ノリノリな kouraku です。 おはこんばんちは。 さてさて今回は、JS（jQuery）を使って、マテリアルデザインのFab（Floating Action Button）をクリックした時に、そのボタンの周りに子Fabが扇状に現れる、という動きを作ってみたいと思います。 今回作成する内容 親Fabをクリックすると、周辺に子Fabが扇状に表示。 子Fabが1個の時は親Fabの真上の位置(rotateZ(0))に表示。 子Fabが2個以上のとき、1番目の子Fabは親Fabの真上の位置、 最後の子Fabは親Fabの左側の位置(rotateZ(-90deg))、 間の子Fabは等間隔の位置(rotateZ(0〜90の間))に表示。 子Fabを扇状に表示させるには 例えば子Fabが2個あったとして、 1個目の子Fabを
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
スマートフォンでのタッチイベントと移動を区別する方法 | スターフィールド株式会社
PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、 スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、 画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。 これは、jqueryのtouchstartイベントを使うではなく、 touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。 $(function() { $( 'div' ).on( { 'touchstart': function() { this.isTouch = true; }, 'touchmove': function() { this.isTouch = false; }, 'touchend': function() { if(this.isTouch == true){ // popupイベントを発生
スマホ用Webページにおける、タップやスクロールのイベント発火タイミング - Aqutras Members' Blog
こんにちは。id:naosuke2dx です。 梅雨でジメジメがすごい今日このごろ、皆様いかがお過ごしですか。 さて、今日の話はWebページ等でのイベント発火のタイミングについてです。 自分も何度か引っかかってそのたびに調べていたので、メモ的な目的もあります。 そもそもイベントってなんだっけ ｢ユーザを始めとしたあらゆるものが引き起こした、何らかのアクション｣のことをイベントと言います。 例えば、ユーザがクリックをした場合、そのクリックがイベントであるということです。 JavaScriptでは、このイベントをトリガーとして、様々な処理を行うことができます。 例えば、クリックした要素を変える、マウスが要素の上に乗っかったらその要素に影をつけてみるなどなど…。 有名どころのイベントだと、このようなものがあります。 qiita.com 標準イベントの他に、イベントを独自定義することもできます。
タッチデバイスにhoverっぽい機能を付与するスクリプト・「Hover on Touch」
Hover on TouchはiPhoneやAndroidのようなタッチデバイスにPCサイトのhoverっぽい機能を付与する為のスクリプトです。上図はフリックしているところですが、タッチしている部分に変化が出ているのが分かるかと思います。 左は背景の色が変わっています。右はPCサイトでもよく見かけますね。マウスを乗せたら情報が出てくる的なもの。タップのように指を離してからの動作ではなく、触れた時点でアクションを起こすのでPCサイトでのhoverっぽい挙動を表現する事が出来る、という目的で開発したそう。説明下手で申し訳ありません； PCのhoverと全く同様の機能ではありませんが、これはこれで良いアイデアじゃないかなと思います。 Hover on Touch
UIデザインの参考にしたい！ナビメニュー用HTML/CSSスニペット40個まとめ
ウェブサイトやブログにおいて、ユーザーがもっとも操作するインターフェースのひとつは、ナビゲーションメニューです。きちんと設置することで、サイトを構成する各コンテンツへとユーザーを移動でき、目次のような役割として活用できます。 今回は操作性にこだわった、最新のナビメニュー用HTML/CSSスニペットをまとめてご紹介します。これらのコードを利用して、よりユーザーの注目を集める、独自のナビゲーションを実装してみましょう。 詳細は以下から。 未来のナビメニューはこれだ！参考にしたいHTML/CSSスニペットまとめ Spinny Header Menu 各種コンテンツをクリックすると、ヘッダー部分のロゴが回転します。 See the Pen Spinny Header Menu by Josh Nichols (@MrBlank) on CodePen. Fly Out Navigation 左サイ
メニューにアニメーションで下線が付いてくる
Result jQuery$('a','nav').mouseover(function(){ $('span','nav').animate({ 'width': $(this).width(), 'left': $(this).position().left} ,'fast'); });cssnav a{ text-decoration:none; color:#333; } nav li{ display:inline-block; margin-left:2px; padding:3px; background:#eee; } nav span{ background:#666; height:2px; display:block; position:relative; width:50px; left:0; }html<nav><ul> <li><a href="#">menu0
3D Bold Navigation in CSS and jQuery | CodyHouse
3D Bold Navigation A bold navigation that slides in when active, replacing the current content in a 3D space. Today’s resource is a strong approach to showing a website navigation. Bear in mind, though, it doesn’t have to be the “main” navigation. You could have, for example, a product gallery and you’d like to create a smooth transition while switching from one product category to the other. To i
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
マルチデバイスで利用可能な固定ナビゲーションを実装できる「Smart Fixed Navigation」:phpspot開発日誌
Smart Fixed Navigation | Cody - Free HTML/CSS/JS resources マルチデバイスで利用可能な固定ナビゲーションを実装できる「Smart Fixed Navigation」。 ページの右下にメニューボタンを表示し、クリックすると開いて使えるナビゲーションが実装できます。 左上に配置するタイプが最近では一般的ですが、スマホは左手で操作するので右下も使いやすいかもしれませんね。 デモのデザインとアニメーションがいかしてます。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 スマホ用メニューっぽいスライドするメニューが作れる「jQuery Sliding Menu」 スマホ等用に複数階層のメニューが作れる「navgoco」 多階層のスマホサイトメニューを実装できる「Multi-Level
[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタマイズ性の高いツールチップ実装「jTippy」:phpspot開発日誌
スクロール量をページトップのプログレスバーで表示できる「scrollpup.js」:phpspot開発日誌
Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.
データグリッド、ツリービュー、エディタ等のUIライブラリを提供する「Gijgo」:phpspot開発日誌
グリッドで作るレスポンシブなタブUIデザイン実装「Gridtab」:phpspot開発日誌
すぐに使える！アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop