iiie.nagoya

物づくりと生活、"経験"を記事へ

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

ふわっと表示する例のアレをカード型デザインに搭載してみた【はてなブログ カスタマイズ】

f:id:gorislog:20190501090455p:plain

 

 

内容

20190608213528

 

カード型デザインの記事一覧表示の際に、端末の指定領域が表示された際に”ふわっと”要素が浮き上がるカスタマイズ。

 

『.page-archive .archive-entry』を変更すると要素を変更できるはずです。

 

良く掲載される”ふわっと”表示されるコードは、スクロールがトリガーになってる場合が多いですが、これは画面表示時に指定領域にある要素も”ふわっと”表示されるようになるはずです。

 

僕のブログはブログタイトル領域が狭いので、スクロールをしなくても指定領域に対象の要素が存在してしまうので、スクロールするまで要素が登場しません。

なので、ページ表示の際にも指定領域に要素が存在した場合はふわっと表示するようにコードを追加しています。

 

コード

CSS

.page-archive .archive-entry {
transform: translateY(20px);
transition: all 1s;
}

jQuery(タイトル下へ挿入 ※他に記載がある場合は最後へ追加)

<script>
$(function(){
$(window).scroll(function (){
$('.page-archive .archive-entry').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 150){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
jQuery(window).scroll();
});
</script> 

※jQueryを使用するので、jQueryのCDNを事前に読み込んでください。「設定」→「詳細設定」→「headに要素を追加」にCDN読み込みコードを追記すればOKです。

 

おわりに

カード型デザインの記事一覧表示でも、クラス名が違う場合は適応されない場合があります。その際は対応する箇所を変更してください。