ScrollReveal 使うと楽しいよねー。
作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。
ScrollReveal 使うと楽しいよねー。
height: 0; から height: auto; を行ったり来たりとか、
height: Xem; からheight: auto; を行ったり来たりするときにも、transitionかけたいけど効かないじゃないですかー。
冷静に探したらありましたですよ。
CSS3 transition height 0 to auto
max-height にまあ安全な大きめの数値入れとけば一応transitionかかる。
けれども、あまり巨大な数値を入れておくと、
そこから戻ってくるイメージなんで、初期の反応がえらい鈍くなる。
(※詳しくはよく知らない)
だもんで、duration も短めで、巨大すぎないまあ安全な大きめの数値入れとくのがベターか。
blog書くまでもないけど・・・。jQueryは既に世に出て結構時間が経っている。
検索して引っかかるのが今のバージョンで動くとは限らない。んでjQuery1.12で動かなかったセレクタの例↓
$('a[href^=#]').click(function() {
こうが正しい↓
$('a[href^="#"]').on('click',function(){
Slidebars使っときーというメモダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレfixed-positions.htmlにほぼ答えがあるあとはanimation-styles.htmlも見ときー
完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので
まあ下記のようなイメージで
$(function() { $(window).on('load resize', function(){ if ( $('#mdContent').is(':visible') ) { console.log('md'); } else if ( $('#smContent').is(':visible') ){ console.log('sm'); } else if ( $('#xsContent').is(':visible') ){ console.log('xs'); } }); });
しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変