jqueryもっと読むボタンを白透明グラデーションで素敵に

2016年2月28日更新 view: 215 view

もっと読むボタンを作ろう

jquery ではいろんな方法でもっと読む、更に読むボタンを作れるが、
今回は read-more.js を使って解説。
もちろんjqueryは先に読みコンでおくこと。

まずはダウンロードしましょう

スポンサードリンク

http://jedfoster.com/Readmore.js/

html

<div id="modal-kabu-body">
ここに文字列。
できるだけ眺めのを入れる。
一杯いれる。
</div>

js

$(function() {
//どの要素を read-moreするか
read_more = $('#modal-kabu-body');
read_more_max_height = 50;

if(read_more.height() > read_more_max_height){

read_more.readmore({
speed: 100,
moreLink: '<div class="t-c btn btn-default" id="read-more">続きを読む</div>',
lessLink: false,
maxHeight: read_more_max_height,
beforeToggle: function(){
//read-more ボタンが押されたらグラデーションを解除
read_more.removeClass("read-more");
},
});

//read-moreが実行されていればグラデーションCSSを付与
if ($('#read-more')[0]) {
read_more.addClass("read-more");
}

}

});

とりあえずここまでで動くはず。

さらに折りたたまれる要素を半透明化しておしゃれにしよう

css

<style>

.read-more {
position: relative;
}

.read-more:after {
content: '';
display: block;
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #fff;
background-image: linear-gradient(rgba(255,255,255,0),#ffffff);
background-color: transparent;
}

</style>
スポンサードリンク

関連記事

関連カテゴリ