آموزش اسکرول صفحه با انیمیشن در جاوا اسکریپت

اسکرول صفحه با انیمیشن – با کمک این ویژگی قادر خواهید بود صفحات انیمیشنی زیبایی را در هنگام اسکرول ایجاد کنید و بیشترین کاربرد آن در لندینگ پیج ها می باشد .

اسکرول صفحه به همراه انیمیشن نامی دیگری دارد به نام onscroll animation .

فایل index.html ساختار اسکرول انیمیشن

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/jquery.multiscroll.min.css">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <ul id="myMenu">
            <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
            <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
            <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
        </ul>

    </div>

        <div class="multiscroll">
            <div class="ms-left">
                <div class="ms-section"><h2>Mercedes Benz</h2></div>
                <div class="ms-section bl"><h2>Lamborghini Huracan</h2></div>
                <div class="ms-section rd"><h2>Nismo GTR</h2></div>
            </div>
            <div class="ms-right">
                <div class="ms-section"><img src="static/img/car1.png" alt=""></div>
                <div class="ms-section bl"><img src="static/img/car2.png" alt=""></div>
                <div class="ms-section rd"><img src="static/img/car3.png" alt=""></div>
            </div>
        </div>

    <script src="static/js/lib/jquery-3.2.1.min.js"></script>
    <script src="static/js/lib/jquery.multiscroll.min.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>

استایل برنامه با main.css

.ms-left , .ms-right{
    text-align: center;
}

#myMenu li{
    list-style: none;
}

#myMenu a{
    text-decoration: none;
    background-color: white;
    color: black;
}

#myMenu .active a{
    background-color: limegreen;
}

.bl{
    background-color: black;
    color: coral;
}

.rd{
    background-color: #721220;
    color: black;
}

#multiscroll-nav li .active span{
    background-color: #fbf41b;
}

در پایان فایل app.js برای تنظیم کتابخانه multiscroll

فایل app.js

$(document).ready(function () {

    $('.multiscroll').multiscroll({
        verticalCentered: true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        easingcss3: false,
        anchors: ['firstPage', 'secondPage', 'thirdPage'],
        menu: '#myMenu',
        sectionsColor: [],
        navigation: true,
        navigationPosition: 'right',
        navigationColor: '#fbf41b',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        scrollOverflow: false,
        scrollOverflowOptions: null,
        keyboardScrolling: true,
        touchSensitivity: 5,

        //responsive
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveExpand: false,

        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',

        //events
        onLeave: function (index, nextIndex, direction) {},
        afterLoad: function (anchorLink, index) {},
        afterRender: function () {},
        afterResize: function () {},
    });
});

خروجی برنامه اسکرول انیمیشن ( نتیجه )

دانلود برنامه اسکرول انیمیشن

آموزش اسکرول صفحه با انیمیشن در جاوا اسکریپت

فایل index.html ساختار اسکرول انیمیشن

استایل برنامه با main.css

فایل app.js

خروجی برنامه اسکرول انیمیشن ( نتیجه )

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ