شخصی سازی مقدار اسکرول در صفحه

شخصی سازی مقدار اسکرول در صفحه
در این مقاله روش هایی را بررسی میکنیم تا بتوانیم نتایج حاصل از اسکرول کاربر را بررسی کنیم، استفاده از این روش در سایت ها افزایش یافته است زیرا یک دید مناسب و کلی به کاربر میدهد و کاربر میفهمد که چقدر از صفحه را پشت سر گذاشته است، هرچقدر که کاربر اسکرول میکند، مقدار اسکرول شده به کاربر نمایش داده میشود، با مجیدآنلاین در این مقاله همراه باشید تا نحوه ی ساخت اینگونه ابزارها را یاد بگیرید.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
ردیاب
ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
بلیط هواپیما
خرید آنلاین بلیط هواپیما داخلی و خارجی
خودتان را اینجا معرفی کنید
با استفاده از دو مثالی که در زیر مطرح کردیم میتوانید مقدار اسکرول کاربر را بدست آورید و سپس میتوانید بنا به نیاز خود این روش ها را شخصی سازی کنید، ابتدا لایه بندی کلی صفحه را مشخص میکنیم، در این لایه بندی از normalize.css و جی کوئری استفاده میکنیم، صفحه ی HTML ما باید به صورت زیر باشد :
<!doctype html>
<html>
    <head>
        <title>Progress Indicator Animation</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- fake post content goes here -->
        <script src="js/jquery.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>
سپس از یک محتوا به صورت زیر استفاده میکنیم :
<main>
    <article>
        <header>
            <h1>
                <div class="container">
                    How Should We Show Progress While Scrolling a Post?
                </div>
            </h1>
        </header>
        <div class="article-content">
                <h2 class="lead-in">
                    <div class="container">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                </h2>
            <div class="container">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                <!-- add your own additional lorem here -->
            </div>
        </div>
    </article>
    <footer>
        <h3 class="read-next"><small>Read Next:</small><br>How do I Implement a Foobar?</h3>
    </footer>
</main>
این محتوا فضای کافی برای اسکرول را در اختیار ما میگذارد.

استایل دهی به صفحه

کمی استایل به صفحه مان میدهیم تا آن را کمی زیباتر کنیم :
@import url(http://fonts.googleapis.com/css?family=Domine:400,700);
body {
    font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Domine", sans-serif;
}
 
h1 {
    font-size: 3.5em;
}
 
.lead-in {
    color: #fff;
    font-weight: 400;
    padding: 60px 0;
    background-color: #0082FF;
}
 
article header {
    border-top: 3px solid #777;
    padding: 80px 0;
}
 
.article-content {
    font-size: 1em;
    font-weight: 100;
    line-height: 2.4em;
}
 
p {
    margin: 4em 0;
}
 
.container {
    width: 700px;
    margin: 0 auto;
}
 
 
footer {
    text-align: center;
    background-color: #666;
    color: #fff;
    padding: 40px 0;
    margin-top: 60px;
}
 
.read-next {
    font-size: 2em;
}

محاسبه ی مقدار اسکرول

برای محاسبه ی مقدار اسکرول صفحه، ابتدا باید طریقه ی انجام این کار را درک کنیم، به دلیل اینکه در جاوا اسکریپت تنها میتوانیم مقدار top در اسکرول را بدست آوریم باید از روشی استفاده کنیم تا مقدار ابتدایی اسکرول ( از 0 یعنی بالای صفحه جایی که هنوز اسکرول نداشته ) تا هرچقدر از top پایین تر میرویم را به دست آوریم. مقدار نهایی اسکرول برابر است با ارتفاع داکیومنت منهای ارتفاع کلی صفحه ( زیرا داکیومنت تا جایی اسکرول میشود که انتهای داکیومنت با انتهای صفحه منطبق شود )
از جاوا اسکریپت استفاده میکنیم تا مقدار اسکرول صفحه را بدست آوریم :
(function(){
    var $w = $(window);
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
    });
 
}());
کد بالا ارتفاع window و ارتفاع body را ست میکند و زمانی که کاربر شروع به اسکرول در صفحه کند این مقادیر در متغیر perc که مخفف percentage (درصد) میباشد ست میشود و همچنین از Math.min و Math.max استفاده میکنیم تا مقدار مورد نظر را بین 0 تا 100 محدود کنیم.

نمایشگر دایره ای

اولین نمایشگری که از آن استفاده میکنیم یک نمایشگر SVG دایره ای است، از stroke-dasharray و stroke-dashoffset در SVG استفاده میکنیم تا مقدار پیشرفت را نمایش دهیم، ابتدا این نمایشگر را به صفحه اضافه میکنیم :
<div class="progress-indicator">
    <svg>
        <g>
            <circle cx="0" cy="0" r="20" class="animated-circle" transform="translate(50,50) rotate(-90)"  />
        </g>
        <g>
            <circle cx="0" cy="0" r="38" transform="translate(50,50)"  />
        </g>
    </svg>
    <div class="progress-count"></div>
</div>
این لایه بندی دو دایره در SVG به ما میدهد و همچنین یک div برای شمردن درصد، به این المنت ها استایل میدهیم :
.progress-indicator {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
}
.progress-count {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    color: #0082FF;
}
 
svg {
    position: absolute;
}
circle {
    fill: rgba(255,255,255,0.9);
}
 
svg .animated-circle {
    fill: transparent;
    stroke-width: 40px;
    stroke: #0A74DA;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
}
مقدار پیشرفت ما همیشه باید قابل نمایش باشد برای همین به پوزیشن .progress-indicator مقدار fixed میدهیم، همچنین شمارشگر پیشرفتمان را درون div ای که هست از نظر افقی و عمودی در مرکز قرار میدهیم.

استفاده از stroke-dasharray و stroke-dashoffset

مقادیر stroke-dasharray و stoke-dashoffset به ما این اختیار را میدهند که حاشیه یک svg را تغییر بدهیم، stroke-dasharray برای این استفاده میشود که قسمت های مشخص از حاشیه را نشان بدهد و stroke-dashoffset برای این استفاده میشود که ابتدای یک حاشیه را حرکت دهد، از این دو خاصیت باهم استفاده کردیم تا یک پروسه ی keyframing انجام بدهیم.

آپدیت کردن stroke-dasharray در اسکرول

اکنون با استفاده از تابع زیر stroke-dashrarray را در تابع از طریق درصدی که به دست می آوردیم کامل میکنیم :
(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    });
 
    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");
    }
 
}());

نمایشگر افقی

در این مثال یک نمایشگر مقدار اسکرول صفحه که در بالای صفحه بچسبد را کدنویسی میکنیم، ابتدا div مورد نظرمان را معرفی میکنیم :
<div class="progress-indicator-2"></div>
اگر دقت کنید در انتهای اسم کلاس از 2- استفاده کردیم به این علت که بتوانیم این فایل های CSS را در کنار فایل های قبلی قرار دهیم. حالا استایل هایمان را اعمال میکنیم :
.progress-indicator-2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #0A74DA;
}
و سپس عرض progress bar را مشخص میکنیم :
var $prog2 = $('.progress-indicator-2');
function updateProgress(perc){
    $prog2.css({width : perc*100 + '%'});
}
در نهایت جاوا اسکریپت ما باید به صورت زیر شود :
(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var $prog2 = $('.progress-indicator-2');
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    });
 
    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");
 
        $prog2.css({width : perc*100 + '%'});
    }
 
}());
برای اینکه نمایشگر مقدار پیشرفت شما به خوبی در تمام مرورگرها کار کند، باید به این نکته توجه کنیم که با هربار تغییر سایز مرورگر توسط کاربر مقدار درستی را نمایش دهیم، با استفاده از تطبیق دهنده ی زیر که توسط جاوا اسکریپت نوشته شده است میتوانیم این کار را بکنیم :

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var $prog2 = $('.progress-indicator-2');
 
    var wh, h, sHeight;
 
    function setSizes(){
        wh = $w.height();
        h = $('body').height();
        sHeight = h - wh;
    }
 
    setSizes();
 
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    }).on('resize', function(){
        setSizes();
        $w.trigger('scroll');
    });
 
    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");
 
        $prog2.css({width : perc*100 + '%'});
    }
 
}());

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.