手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし
はてなブログカスタム第二弾。 「（ウチは）長文が多いし上に戻るボタンある方がいいかなぁ……」 と思い遂に先日PC、スマフォビューの両方に設置してる。 www.task-notes.com 参考にしたのは、こちらの方の方法。 よくある上に戻るボタンと違って、しばらくスクロールすると表示されるのも高ポイント。 シンプルで、カスタムもしやすい。 以下、はてなブログでの設置法を。 コピペすればそれっぽいものが付きます。 PCの設置を基準に。 【スポンサーリンク】 ヘッダー まずヘッダーにHTML。 設定＞詳細設定＞headに要素を追加 ここに以下を記入 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src="http
たったの10秒でできる！jQueryで実装する「ページトップへ戻るボタン」 - Kowappa
ページをスクロールするとフワッとフェードインする「ページトップへ戻るボタン」をたったの10秒で実装してしまいます。 今回ご紹介するものは、スクロールするとフワッとフェードインしてボタンが出てきて、ボタンを押すとスルスルッとページトップに戻るものです。とても10秒クオリティーとは思えないものなのでご安心を。 HTML <a id="pageTop" href="#contents">ページトップへ</a> CSS #pageTop{ background:#DDD; border-radius:5px; color:#FFF; padding:20px; position:fixed; bottom:20px; right:20px; } #pageTop:hover{ background:#EEE; } JavaScript <script type="text/javascript">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
