jQuery不要】CODETwitterFacebookはてブPocketLINEコピー2020.01.31「wow.js」と「Animate.css」を使えば、サイトにアニメーションをつけることができます。初心者にも簡単で便利だったので、備忘録も兼ねてシェアします。「WOW」の完成イメージ私のポートフォリオサイトの一部です。こんな感じでアニメーションをつけることができたら、かっこいいですよね。CodePen.上記をコピペすれば使えますが、簡単に解説しますね。「WOW」の読み込み方2つあります。CDNを読み込む方法ファイルを読み込む方法それぞれ見ていきましょう。特別な理由がない場合は、こちらでいいと思います。src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>あとはJavaScriptでinit()メソッドを呼びましょう。WOW().init();</script>ファイルを読み込む方法まず、以下のサイトに行きましょう。ZIP」でダンロード完了です。以下のファイルを、作成中の自分のフォルダに入れましょう。src="dist/wow.min.js"></script>JavaScriptでinit()メソッドを呼び出すことも忘れずに。準備が完了したら、さっそく「WOW」を使っていきましょう!HTMLの書き方は、以下の通りです。fadeInUp">サンプルだよ〜</div>クラス名に「wow」と、動かし方(今回の場合は「fadeInUp」)を書くだけ。CodePen.Webサイトでよく見る動きですよね。アニメーションの種類は、以下のサイトでデモを見れますよ。Animate.cssdaneden.github.ioかなりの種類があるので、お気に入りのアニメーションを見つけてくださいね。オプション「WOW」にはオプションをつけることができます。オプションは以下の通り。CodePen.こんな感じに動きます。今回は「WOW」の紹介でした。Web制作初心者でも簡単にサイトに動きをつけることができるので、便利ですよね。最後までお読みいただき、ありがとうございました。Me!/わやわやずぶろぐ関連記事CODEBootstrapのテンプレート「Canvas」の使い方【爆速コーディング可能】Twitter社が開発したCSSフレームワーク「Bootstrap」のテンプレートを使ったLP制作の解説記事です。今回は「Canvas」というテンプレートを使ってみました。英語のサイトなので試行錯誤しましたが、使い方がわかれば便利すぎるテンプレートなので、おすすめです。CODE【覚えるべき技5選】Web制作者のためのSassの教科書【備忘録】Sass初心者でもすぐに使えるテクニックを紹介します。想定読者は「Sassを使うと便利らしいことは知っている。上手く使いこなせていない。」このような方に、まず覚えておくべき使い方を書きました。使えば確実に効率化し、そこまで難しくないところだけ紹介します。CODE【Cocoon】記事内にソースコードを埋め込む方法【テンプレあり】この記事では「Cocoon」の記事内にソースコードを埋め込む方法をまとめました。コピペして使えるテンプレも作ったので、ぜひ使ってくださいね。「HTML/CSS/Javascript」については、ブログ内でデモを見せるのに「CodePen」が便利なので、その使い方も解説します。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールわや未経験からエンジニア転職目指してます。30代、4歳児の母です。プログラミング&ブログの楽しさにどハマり!2019.1コーディング勉強開始2019.2ブログ開始2019.11退職→本格的にエンジニア目指すまだまだ初心者ですが、読んでもらえると嬉しいです。ったものホーム検索トップサイドバープロフィールわや未経験からエンジニア転職目指してます。30代、4歳児の母です。プログラミング&ブログの楽しさにどハマり!2019.1コーディング勉強開始2019.2ブログ開始2019.11退職→本格的にエンジニア目指すまだまだ初心者ですが、読んでもらえると嬉しいです。届いたらどうする?2019.06.012020.01.23保育園役員の「納得感のある」断り方【役員のメリット・デメリット】2019.03.132019.06.03ワイヤレスイヤホンTws-i7【Lezon/Bluetooth4.2】の使い方を解説2019.06.272020.01.10タイトルとURLをコピーしました。