ddt2000のブックマーク / 2018年7月5日

ddt2000 id:ddt2000

2018年7月5日のブックマーク (5件)

タブやナビゲーションがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装
タブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。下記は、デモでの操作をアニメーションgifにしたものです。
ddt2000 2018/07/05
navigation

アニメーション
リンク
DMM動画サービスの問題を解決しようとしている話（スタイルガイド編） - DMM inside
｜DMM inside
ddt2000 2018/07/05
ui

デザイン

webデザイン

開発

あとで読む
リンク
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！　と思いました。フロントエンドの想定外ウェブサイト
ddt2000 2018/07/05
フロントエンド

考え方
リンク
CSS Grid In IE: CSS Grid And The New Autoprefixer | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article builds on that knowledge. It would be best to go back and read that article first if you haven’t already. Today I’m going to be tackling
ddt2000 2018/07/05
IE

CSS

autoprefixer
リンク
[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt
カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。 Tilt.jsの使い方 Tilt.jsは単体でも、jQueryのプラグインとしても動作します。 ※スクリプトがそれぞれ異なります。 vanilla-tilt.js -単体版 Tilt.js -jQueryのプラグイン版基本書式 HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。
ddt2000 2018/07/05
js

マイクロインタラクシ
リンク
- 2018年7月6日
- 2018年7月5日
- 2018年7月4日