[B! hover] grandfrigoのブックマーク

grandfrigo id:grandfrigo

hoverに関するgrandfrigoのブックマーク (2)

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT by Beeworks
デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思
grandfrigo 2017/06/27
Webデザイン

アニメーション

hover
リンク
[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。非常に便利なカスタマイズでしたのでシェアさせていただきました。 jQuery ファイルと一緒にjavascript のコードを設置かちびと.net 様で公開されているソースコードを、jquery ファイルと一緒に設置します。 <script src="./jquery.min.js"></script> <script> jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind
grandfrigo 2017/05/10
jquery

table

Hover
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx