<header>内に以下のコードを記載。
<script src="/js/jquery.min.js"></script> <script src="/js/inview.min.js"></script> <script> $(function() { $('.inview').one('inview', function(event, isInView, visiblePartX, visiblePartY) { if (isInView) { $(this).addClass("mvAfter"); } else { $(this).removeClass("mvAfter"); } }); }); </script>
CSSに以下のコードを記載。
.inview { opacity:0; -webkit-transition:opacity 2s, -webkit-transform 1.5s; transition:opacity 2s, transform 1.5s; -webkit-transform:translate(0, 60px); transform:translate(0, 60px); } .mvAfter { opacity:1.0; -webkit-transform:translate(0, 0); transform:translate(0, 0); }
(View729)