スナックelve 本店

バツイチ40代女の日記です

動け、動け、動け、動いてよ!(動いてました)Animate.css

f:id:elve:20220130190148p:plain

コンテンツがなくなった旧ブログ。せめて視覚的に面白くしたいなぁ~と。
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は一覧形式のときだけかも。
f:id:elve:20220130190735p:plain

動いてるなら動いてよ!!(支離滅裂)

参考

<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