【jQuery】スクロールで要素をアニメーション化kkScrollAnimate

スクロール上のウェブサイト/アプリの要素をアニメーション化するjQueryプラグイン。

HTML

<div class="hero-header top-header height-100 bg-1 valign-wrapper" style="background-size: 160vh">
<div class="center valign">
<h2 class="logo m-0 mb-5">
Nefele
</h2>
<div class="slug">
A mobile and tablet focused template
</div>
<div class="mt-20">
<button id="button-1" class="waves-effect waves-teal btn-flat primary mr-10">
Button
</button>
<button id="button-2" class="waves-effect waves-teal btn-flat secondary">
Button 2
</button>
</div>
</div>
<div class="overlay"></div>
</div>

JS

<script src="assets/js/libs.min.js"></script>
<script src="assets/js/kkScrollAnimate.js"></script>
<script>
$(document).ready(function() {
$('#button-1, #button-2').kkScrollAnimate({
scrollContent: $(document),
startScroll: 5,
endScroll: 100,
cssProperty: 'margin-top',
before: 0,
after: 200,
unit: 'px'
});
$('.hero-header').kkScrollAnimate({
scrollContent: $(document),
startScroll: 5,
endScroll: 100,
cssProperty: 'background-size',
before: 160,
after: 130,
unit: 'vh'
});
});
</script>

MITライセンス

 
kkScrollAnimate

【jQuery】スクロールで要素をアニメーション化kkScrollAnimate

  • LATEST
  • RELATED
  • POPULAR