コンテンツがなくなった旧ブログ。せめて視覚的に面白くしたいなぁ~と。
animate.min.css とやらを使ってみようとしてハマって日曜日が消えました。
Javascriptは苦手です(関係ないところでハマったけど)
結果
注意
まずOSの設定確認、コレでハマる
CSSのアニメーションがFireFoxやChromeで動作しない - Netplanetes V2
概要
↓の下の方にスクロールしたところに概要が。
Animate.css | A cross-browser library of CSS animations.
はてなブログでは設定→詳細設定→
要素にメタデータを追加(ヘッダーに追加するところ)に<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
コレで要素のクラスに”animate__animated” と ”animate__XXXXXXX”を設定するとその要素が動きます。
HTMLモードで描くもよし。Javascriptで追加するのもよし、と。
デザイン→カスタマイズ→ヘッダ→タイトル下 に追記
<script> document.addEventListener('DOMContentLoaded', function() { // ページ読み込み時に実行したい処理 var sec= document.getElementsByTagName('section'); console.log(sec.length); for (var i = 0; i < sec.length; i++) { sec[i].classList.add('animate__animated','animate__bounceInUp'); } }); </script>
sectionは一覧形式のときだけかも。
動いてるなら動いてよ!!(支離滅裂)
参考
<section>-HTML5タグリファレンス
Animate.css | A cross-browser library of CSS animations.
Animate.css を使ってみる - はしくれエンジニアもどきのメモ
https://cdnjs.cloudflare.com/ajax/libs/animate.css
スライド表示するアニメーションを実装する | cly7796.net
ライブラリを使って手軽に要素を動かそう!(Animate.css × jquery.inview) | 動くWebデザインアイディア帳
Document.getElementsByTagName() - Web API | MDN
簡単にアニメーションを実装できるAnimate.cssの使い方 - じゅんぺいブログ
【Animate.css】簡単な使い方とカスタマイズ方法 | ヨウスケのなるほどブログ。
【Animate.css】アニメーションサンプル一覧 | ヨウスケのなるほどブログ。
window.onloadとjQueryの$(document).ready等の比較
Animate.cssをつかってみた - もっく日記
読み込み時の処理!JavaScriptでonloadを使う方法【初心者向け】現役エンジニアが解説 | TechAcademyマガジン
JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
初心者でも簡単にできる!HTMLにCSSを適用させる方法 | TechAcademyマガジン
【for/forEach/jQuery.each】JavaScriptでforeachするためのコードと速度の比較!
はてなブログのデザインをCSS/JSで本格カスタマイズした話 - INODEVLOG
JavaScript | 配列の要素を順に取得する(forEach)
CSSのアニメーションがFireFoxやChromeで動作しない - Netplanetes V2
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方 | 侍エンジニアブログ
ページ読み込み時に実行するjavascriptについてのTips | Tips Note by TAM