jQuery

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

September 13, 2016
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ライセンス