[JS/CSS] 背面にある要素のマウスイベントを発火する – nbnote blog
ある要素の前面に何か別の要素をかぶせるように配置した時、背面にある要素のマウスイベントは基本的には反応しません。(前面の要素のみ) 当然といえば当然の話なのですが、デザインや仕様によっては、実際に構築するまでこの問題に気付きにくい場合があります。ありました。 下記のサンプルは、透過PNGでできた星画像をリンクボタンにかぶるように position:absolute で配置した例です。見た目の上ではかぶっていませんが、それは星PNGの背景が透過されているからで要素同士はしっかりかぶっているため、背面のリンクボタンにマウスを置いてもカーソルの形は変わりませんし、クリックしても無反応です。(ギリギリかぶっていないリンクボタンの上端と右端は反応する) サンプル.01 これをどうにか前面の星PNGに邪魔されずにリンクボタンをマウスに反応させるようにする、というのがこの記事の本題。 一番簡単なのは、C
Animate.cssとwow.jsを使ってサイトにアニメーションをつける - Qiita
初めに Animate.cssとwow.jsを使って自身のサイト(tiwuofficial.github.io)にアニメーションをつけてみたので、使い方を簡単に書いていきたいと思います。 tiwuofficial.github.io 次回記事 Font-Awesomeを使ってサイトにアイコンを表示させる + Animate.css + wow.js 1.準備 Animate.cssは要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートです。 公式サイト GitHub 公式サイトではアニメーションの動きの確認ができます。 公式サイトからanimate.cssファイルをダウンロードしてください。 (animate.min.cssでも可)
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbf9a8239270b982158e9318db2dd638d1ac2f8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ