Javascript

inview.js~JSアニメーション

'18.12.09

まずは下記のファイルをダウンロード。

jquery.min_.js
inview.min_.js

<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);
}

 

(View112)