Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS] Animista 簡単! CSSアニメーションとスクロール

Animista

keyframesを使用したCSSアニメーションは重宝しますが、細かい設定が難しいですよね。書いては確認の繰り返し。Animistaなら、確認しながら細かい調整が出来ます。コピペであっと言う間に完成します。

wow.jsと組み合わせれば、スクロールに対応する事が出来ます。

意図的にスローにしていますが、こんな感じのアニメーションも簡単です。テキストに効果を付ける例で解説

Animationのテスト

INDEX

導入手順

STEP
サイトアクセス

[Try me]をクリック

STEP
プレビューを見ながら作成

例えば、[Text]を選択し、プレビューをしながら左の画面で速度など、細かい設定をします。

Animistan
STEP
コード取得

右端のコード取得のボタンを押しコードを表示します。

CSSアニメーション

CSSを所定の場所にペーストし、htmlにclassを追加します。

例えば、<p class="tracking-in-expand">ほげほげ</p>

コード挿入する。Swellなら簡単!

このブログはSWELLを使用しています。SWELLなら、コードの挿入が楽々です。各投稿毎に設定できるので便利です。

Swellのコード

おすすめのテーマ
このブログもSWELLです

\ ぜひ使って欲しい /

高速最適化済み、高機能、驚きの使い心地
深い知識不要で素敵なサイトが作れます。

支払は一度だけ。アップデートはずっと

スクロールで動かす

スクロールするとアニメーションが始まる様にするには、wow.jsを使うのがお勧めです。

下記を追記します。例はjsフォルダの中に置いた場合です。</body>の直前が良い様です。wow.minはheaderでも大丈夫でした。

 <script src="js/wow.min.js"></script>
 <script>
     new WOW().init();
     </script>

Animistaの設定との組み合わせですから、Animistaのコードは必須です。ゴチャゴチャしてしまう感じなら、Animista用のcssファイルを設けても良いと思います。(要リンク)

functionに記載するなら、こんな感じで良いと思います。Topページのみ読み込む様にしました。anima.cssは先に書いた別紙です。個人の責任で、ちゃんとバックアップを取ってから書き換えて下さいね。

function add_files(){
	if ( is_front_page() ) {
    wp_enqueue_style('anima_style', get_stylesheet_directory_uri() . '/js/anima.css');
    wp_enqueue_script('wow', get_stylesheet_directory_uri() . '/js/wow.min.js');
}
}
add_action('wp_enqueue_scripts', 'add_files');

//wow	
function add_meta_to_footer() {
		if ( is_front_page() ) {
	echo '
	<script>
    new WOW().init();
</script>
	';
	}
	}
add_action( 'wp_footer', 'add_meta_to_footer' );

要素のclassに wow を付ける事をお忘れなく!

例えば、<p class="wow tracking-in-expand">ほげほげ</p>

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX