MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。 今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。 Izmirの使い方 文字が出るだけでなく、画像が回転しているのが分かります。 こちらは画像が小さくなっています。 線のアニメーションが格好いいです。 ボタンを出すのも効果的です。 Izmirは文字だけでなく線もアニメーションしながら表示されます。画像の上にマウスを当てると詳細な情報を出すのも良さそうです。写真コンテンツを効果的に使えそうです。 IzmirはCSS製のオープンソース・
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Let’s say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this: <div class="module" id="module"></div> And you toss a background on it: .module { background-image: url(big-image.jpg);
Result detailsタグでFAQコンテンツっぽいやつを作るサンプルです JSも使わずCSSの力業も不要なのでコードもスッキリ見やすいですね 例によってIEでは使えないHTMLタグですが、便利には違いないですね summaryにoutline: none;を付けないとクリック時にボーダーが表示されてしまいます。 csssummary { display: block; outline: none; } summary:before {/*矢印アイコンを付与*/ display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1rem; transition: all 300ms ease; } /*答え部分が開いている場合の処理*/ details[open] summa
Result 注釈がある事をアスタリスク(これ→*)で明示し、マウスホバーで表示する、みたいなの。 dfnタグのtitle属性をテキスト化する形で表示しています。 cssdfn[title] {/*dfnタグをヘルプカーソルに*/ cursor: help; position: relative; font-style: normal; } dfn[title]:after {/*疑似要素でアスタリスクを表示、注釈がある事を明示する*/ content: '*'; color: red; display: inline; text-align: right; white-space: nowrap; vertical-align: super; font-size: 0.6em; padding-left: 2px; } dfn[title]:hover:after {/*title属性を
Result jQuery//参照元に準拠し、onclick処理はtable内に書いてます function show_hide_row(row) {$("#"+row).toggle();}css#table_detail tr:hover{ background-color:#ddd; cursor:pointer; } #table_detail .hidden_row{ display:none; }html<table border=1 id="table_detail" align=center cellpadding=10> <tr> <th>名前</th> <th>年齢</th> <th>給料</th> <th>仕事</th> </tr> <tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><
Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery/* CSS-Tricks Example by Chris Coyier http://css-tricks.com */ $(function() { //Googlemapのセッティング var koukyo = new google.maps.LatLng(35.685175, 139.7528), pointToMoveTo, first = true, curMarker = new google.maps.Marker({}), $el; var myOptions = { zoom: 15, center: koukyo, mapTypeId: google.maps.MapT
プレゼンでデモをやったり、デモ動画を撮る時に思うのはキーボードやマウスの入力を見ている人がはっきりと分かるようにするというのは難しいと言うことです。突然文字が入力されたり、小さなマウスポインタが動いたりするのは分かりづらいことこの上ありません。 そこで使ってみたいのがTouchPoint.jsです。Webブラウザにおけるマウスポインタのクリックをビジュアル化してくれるライブラリです。 TouchPoint.jsの使い方 TouchPoint.jsを使ったデモのアニメーションGIFになります。クリックすると赤い波紋が広がります。 色は変更できます。 スクリーンキャスティングはもちろん、ユーザテストの際に使ったりしても面白いかと思います。Webサイトのデモを見せる時に使うと聴衆も分かりやすくなるでしょう。 TouchPoint.jsはJavaScript製、MIT Licenseのオープンソー
シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション(見出しとテキスト)をセットに、a要素で括り、全体をdiv要素で内包します。 <div class="tiles"> <a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a> <a href="#" class="tile"><img src="image.j
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
Windowsのデフォルト機能だけでマウスカーソルをキャプチャする方法を紹介します。 Windowsのデフォルト機能でマウスカーソルをキャプチャしたところ 1.問題点 Windowsではデフォルト機能で画面をキャプチャするための「Print Screen」キーが用意されています。 具体的なキーの使い方は次のとおりです。 Print Screen押下:デスクトップをキャプチャ Alt+Print Screen押下:アクティブになっているウィンドウをキャプチャ キャプチャ後、「スタート」→「アクセサリ」→「ペイント」を開き、メニューバーの「編集」→「貼り付け」またはCtrl+vでキャプチャした画面がペーストされます。 ですが、この機能ではマウスカーソルを同時にキャプチャすることができません。 下のスクリーンショットは「テスト」というリンクの上にマウスカーソルを当てた状態のものをPrint Sc
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 デモページのアニメーション 通常時は細めのヘッダとコンテンツがあるだけで、ヘッダをホバーすると、非表示だったナビゲーションがアニメーションでスライドして表示されます。 デモのようなナビゲーションだけでなく、他のコンテンツを設置することももちろん可能です。 実装 Step 1: HTML ヘッダ部分は最初に表示されている要素、非表示の要素の2つが配置されています。 <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a> <div id="tophiddenbar"> Other Links: <a href="http://designshack.net/cate
デモ:ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
Resultテーブル上のマウスの位置を表示する jQuery$("table tr td").mouseenter(function () { //ポインタ追加 $(this).css("cursor", "pointer"); //ユーザーへの表記は+1する var col = $(this).closest("tr td").prevAll("tr td").length += 1; var row = $(this).closest("tr").prevAll("tr").length; //テーブル上のマウスの位置を取得して現在地を表示する $('#result').html("上から<b>" + row + "</b>番目、左から<b>" + col + "</b>番目にいます"); });csstable { border: 1px solid #DFDFDF; backgro
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
JavaScript JavaScriptで簡単にBase64エンコード&デコードの完全ガイド 2024-06-10 dad-union
CSS おれおれ Advent Calendar 2012 – 07日目 寝るまでが今日です。(キリッ JavaScriptで拾うボタン風の要素にcursor:pointerのように指定した事もあるんじゃないかと思うんですが、それです。 結構色々と種類があるので、一覧を眺めておくと良いんじゃないでしょうか。特にアプリを作る方。 追記 2012-12-08: タイトルを「36+α種類」から「35+α種類」に変更。数え間違えてました……。 cursorプロパティの値一覧 各行ではそのcursorを設定しています。カーソルを乗っけてみてください。変化ない場合、ブラウザーがそのカーソルに対応してないです。 あとCSS 2.1の時点で仕様として定められてあったものは明記してあります。(18個) 記載ないものは全てCSS3ですね。 画像 値 説明 例
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル 1見の価値あり!なフルスクリーンWEBサイトのまとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く