前にCSS3のFlexboxを使ってみましたという記事を掲載させて頂きましたが、今回はこちらのページを参考にさせて頂き発火ポイントにスクロールが達するとjQueryが作動しカラムが順にフェードインしてくるエフェクトを追加しました。デモページも用意していますので、動作チェック確認いただけます。
<section class="wrapper" id="scroll"> <div class="col-3 scroll_in"> <a href="#"><img src="images/top7.jpg" alt=""></a> <section class="title border_line"> <h2 class="title_text">このタイトルはダミーです。</h2> </section> <div class="post-prev-info font-alt"> <time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a> </div> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p> <div class="post-prev-more"> <a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a> </div> </div> <div class="col-3 scroll_in"> <a href="#"><img src="images/top8.jpg" alt=""></a> <section class="title border_line"> <h2 class="title_text">このタイトルはダミーです。</h2> </section> <div class="post-prev-info font-alt"> <time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a> </div> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p> <div class="post-prev-more"> <a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a> </div> </div> <div class="col-3 scroll_in"> <a href="#"><img src="images/top9.jpg" alt=""></a> <section class="title border_line"> <h2 class="title_text">このタイトルはダミーです。タイトルが2行になっても大丈夫!!</h2> </section> <div class="post-prev-info font-alt"> <time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a> </div> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を</p> <div class="post-prev-more"> <a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a> </div> </div> </section>
.wrapper { display: flex; -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; -webkit-justify-content:space-between;/*--- safari ---*/ justify-content: space-between; padding: 0 0; width: 1200px; margin: 0 auto; } .wrapper div.col-3 { width: calc(33.3% - 30px); } @media screen and (max-width:768px) { .wrapper div.col-3 { width: calc(33.3% - 10px); margin: 5px; } .wrapper { width: 100%; margin: 0 auto; padding: 10px; } } @media screen and (max-width:480px) { .wrapper div.col-3 { width: 100%; margin: 0 0 20px; } .wrapper div.col-3.infor_link{ width: calc(33.3% - 10px); margin: 5px; } .wrapper { width: 100%; margin: 0 auto; padding: 10px; } }
Flexboxは使いやすいので、これからカラムを組むときは重宝しそうです。css内calcの数字を25%などに変更すると4カラムができあがるという手軽さがいいですね。