[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f2e1605b94bb486d46cd42dbd392f8733958bcc/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
[JS]動作が軽快なパネルを水平・垂直にスライドするスクリプト -Easy Slider
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy Slider 1.5 demo パネルには画像やテキストなどを配置することが可能で、スライドのコントローラーはテキストベースのものやグラフィカルなものを使用することができます。 demo 1（スタイルは無し） demo 2（スタイルを適用） demo 3（スタイル無しで垂直方向に） demo 4（スタイル適用、自動スライド） demo 5（複数のスライダーを設置） スクリプトのオプションでは、スライドのスピード、スライドの自動・手動、ポーズの時間などを調整することができます。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]二つのパネルをダイナミックにずらして表示するコンテンツスライダー -dualSlider
左右に配置された二つのパネルをスライドのタイミングをずらして表示するコンテンツスライダーを紹介します。 dualSlider ※注意 IEでアクセスすると「Virus.DOS.Albania.429」が検出されます。当方はFirefoxでアクセスしていため気がつきませんでした。 しかしながら、スクリプト自体はかっこいいので、いつか解消されることを期待しつつURLを記載しておきます。 http://www.hugoandcat.com/DualSlider/index.html コンテンツスライダーの操作は自動と手動があり、自動と手動の切り替えは右上のボタン、手動の操作は右下で行います。 手動操作のインターフェイス dualSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 スクリプトのオプションでは自動・手動の切り替え、アニメーションのタイミングなどを設定
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
Facebook風ドロワーメニューが手軽に導入できる drawer
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ：offsetTop このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。 ScrollUpBarの使い方 実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scroll-up-bar.min.js"></script> </body> Step 2: HTML スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。 <div id="topbar" styl
[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay
ページ全体にオーバーレイ、アニメーションでカウントダウン plainOverlayの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery-1.11.0.min.js"></script> <script src="jquery.plainoverlay.min.js"></script> </head> Step 2: HTML HTMLはオーバーレイを適用する時に指定できるようidをつけておくと便利です。 <body> <div id="demo">パネル</div> </body> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。基本書式は下記のようになります。 //show element.plainOverlay('sh
iOSアプリ開発が捗るXcodeプラグイン - Qiita
こんにちは、@cutmailです. 365日Xcode触ってますか？ はじめに Xcodeはそのまま使ってもいいですが、いくつかの便利なプラグインを入れてみるとより開発がしやすくなるかもしれません。 プラグインは入れ過ぎるとXcodeが重くなったりするかもしれませんので、必要なもののみインストールしたほうがよいかと思われます。 XVim Vimmerのための、XcodeでVimのキーバインドが使えるようになるプラグイン https://github.com/JugglerShu/XVim XTodo TODOや、FIXMEなどのコード内の注釈を抜き出して表示してくれるプラグイン https://github.com/trawor/XToDo XAlign コードを自動的に整列するプラグイン https://github.com/qfish/XAlign ShowInGitHub 選択した行
[JS]奥行きを与えてモーダルボックスを開くスクリプトを実用化したスクリプト -Avgrund Modal
元となった：Avgrund 作者のメモには、実用のためではなく楽しむ用、とのことで、確かにIEなどの非対応ブラウザではエラーがでるだけです。 「Avgrund Modal」は、非対応ブラウザの処理やより簡単に実装できるように実用化したものです。 Avgrund Modalのデモ デモは全てのモダンブラウザで動作します。 デモページ：IE7で表示 Avgrund Modalの使い方 Step 1: 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" href="avgrund.css"> 「jquery.js」と当スクリプトを</body>の上あたりに記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <
[JS]jQueryのプラグイン33+1選 -2009年8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 slideView 動きが面白い画像のスライドショー。 Mop Slider コンテンツのスライダー。バージョンアップ。 simpl
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 iPod-style Drilldown Menu iPod風に切替わるドリルダウンメニュー。 iPhone Lock Slider
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.reindel.com/accessible_news_slider/