CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる
サンプル See the Pen Opening Fake Shutter with pure CSS by digistate (@digistate) on CodePen. やっていることはごく簡単で、オープニングシャッター用の最前面のレイヤー要素(.shutter)を CSS アニメーションで変形させながら、最終的に非表示にして背面に移動させているだけです。 HTML の構造 HTML の構造もシンプルです。 オープニングシャッター用の要素(.shutter)を最初に記述し、その後にメインのページコンテンツ(.container)を配置します。 <div class="shutter"></div> <section class="container"> <!-- ここにメインコンテンツ --> </section> CSS の構造 オープニングシャッター用の要素は、最前面に表示し
ページ遷移時にアニメーションを入れる方法【ライブラリなし】
以下を子テーマのfunctions.phpに追加すると、cocoonには関数が用意されているので、body要素にクラスが追加されます。 add_filter( 'body_class_additional', function( $classes ) { $classes[] = '追加したいclass名'; return $classes; });後は、cocoonの子テーマのtmp-user/body-top-insert.php に、以下追加するだけ。 <div class="fade_group"> <div></div> <div></div> <div></div> <div></div> </div> <div class="fade_group2"> <div></div> <div></div> </div>CSS.fade_group div , .fade_group
barba.js v2で簡単に非同期画面遷移を取り入れてページ高速化！｜notes by SHARESL
barba.js v2って？ 端的に言うと非同期画面遷移が簡単にできるライブラリ「Barba.js」のバージョン2がbarba.js v2です。このサイトでも使っていますが、デモも作ってみました。 barba.js DEMO 最近はREST API + フレームワークなどで簡単にサクサク見れるSPA（Single Page Application）を作れるようになりました。しかし通常のコーポレートサイトやブログメディアサイトなどにSEOを考えた上でサクッとSPAを取り入れることは難易度が高く、SSRなど余計なことを考え出すと工数と合わないので僕はなかなか手が出ません。（Vue.jsなどはSSRしなくてもGoogleがちゃんとレンダリングしてくれる説もありますが） それでも快適にかっこよくシュバっとページ遷移したい！という思いで方法を探していると「Barba.js」にたどり着きました。弊社H
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
