まずはこちらのカード型リンクのHoverアニメーションを作っていきます。 Hoverしたときに、 ピンク背景のブロックを上から重ねる 「READ MORE」というテキストをFadeInする 以上の2つの動きを実装しています。 ピンク背景のブロックを上から重ねる ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。 カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。 「READ MORE」というテキストをFadeInする READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。 カード型リンク～左から右へ～ 次にカード型リンクのHoverアニメーシ
PirschはGoogle Analytics代替として開発された、Cookie不使用のオープンソースの、シンプルでプライバシーに配慮した解析ツールです。 GAほど多機能ではないものの、PVやセッション、リファラなどWebサイト解析に必要なメトリックを提供してくれます。 解析用のスクリプトも1KB未満で解析対象のWebサイトのパフォーマンスを損ないません。データはCSVでエクスポートも可能な他、メールで定期的に解析結果を送る事も可能です。 管理画面もシンプルで見やすく分かりやすい印象でした。OSSとして提供されていますが、Webサービスとしても展開しているようです。現在はベータ版のため、無償で利用できるみたいです。ライセンスはAGPL-3.0との事。 PirschOn Github
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
