شخصی سازی مقدار اسکرول در صفحه
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
<!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 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
هم اکنون شما اولین دیدگاه را ارسال کنید.