本文がグラデーションで消える、続きを読むボタンの作り方
本文がちょい見えしていると、続きが気になるものです
画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。
実際のコードはこちら
CSS
細かいレイアウトに関するCSSの説明は省き、仕組みのポイントになる部分について説明します。
ちょい見せしているテキスト部分はheight:90pxで固定し、overflow:hiddenではみ出た分を隠しています。親要素にposition:relativeを設定し、「続きを読む」ボタンをposition:absoluteで最下部に設置し背景色にグラデーションをかけています。
アコーディオンバージョン(再度最小化できる)用にactiveというクラス名を用意しています。こちらはクリック後にグラデーションを消し、本文と被らないよう-30pxだけ下げています。
jQuery
jQueryの注意ポイントとしてCSSをheight : auto に切り替えてもアニメーションが効かないという点です。これはjQueryのanimate関数だけでなく、CSS transitionでも同じです。アニメーションさせるには定数の値でないといけないようです。autoはコンテンツに応じた高さで不定なので、アニメーションが効きません。
逆に開くアニメーションが必要ない場合はjQueryでCSSを指定したり、クラス名で変えたりすれば問題なく実装できます。
アニメーションをしたい場合、値を決めればできますが、高さは本文の量によって変わってくるので決められません。そのため、height : autoでもアニメーションが実行されるよう、ちょっとした工夫が必要です。
var show_text = $(this).parent('.text_wrapper').find('.text')
まず、対象となる本文を選択します。
var small_height = 90
最小化時の高さを指定します。これはCSSの値と同じです。
var original_height = show_text.css({height : 'auto'}).height();
続いて、本文のCSSを一旦height : autoにし、.height()で高さを取得します。この時original_heightにはautoにした時の実際の高さの数値が入っています。
show_text.height(small_height).animate({height:original_height},300, function(){
show_text.height('auto');
});
次にshow_text.height(small_height)でheight: autoにしたのを元の高さに戻しています。ここまでの処理は一瞬なので見た目には分かりません。
そのあと、animate関数でheightにoriginal_height(定数)を指定して、本文がびょーんと出てくるアニメーションを実行しています。実行時間は今回は390ミリ秒です。
さらにコールバック関数で高さのCSSをautoにしています。これはアニメーション実行時は定数の高さが入っており、レスポンシブなど横幅に応じてコンテンツ高さが変わる場合に追従できなくなります。そのため、最後にautoを指定してあげます。
$(this).hide();
そして最後にボタンを非表示にしています。
アコーディオンバージョンも基本的には同じですが、if文による場合分けを加えています。（細かい説明は割愛）
この処理にGoogle Analyticsなどのイベントタグを挿入しても良いかもしれませんね。
