rezakianoosh

آموزش ساخت اسکرول زیبا به کمک جی کوئری

1 پست در این موضوع قرار دارد

nanoscroller.jpg

برخی موارد در طراحی به دلایلی نیاز است تا بخشی از محتوی اسکرول داشته باشد . حال اگر بخواهیم از اسکرول توسط css استفاده کنیم و به overflow ها اسکرول بدهیم مرورگر از اسکرول نه چندان زیبایی برای نمایش ادامه ی محتوی استفاده می کند . بهترین راه برای این شرایط استفاده از پلاگین جی کوئری Nano scroller js Master می باشد این پلاگین اسکرولی بسیار زیبا شبیه اسکرول قسمت چت در فیسبوک ایجاد می کند و باعث زیباتر شدن کار می شود .برای استفاده از این اسکرول طبق موارد زیر عمل می کنیم .

۱- ابتدا ساختار زیر را ایجاد می کنیم و محتوی مورد نظرمان را در قسمت content here قرار می دهیم .


<div id="about" class="nano" >
<div class="content"> ... content here ... </div>
</div>

2- فایل css مربوط به پلاگین را فراخوانی می کنیم .


<link rel="stylesheet" href="nanoscroller.css">

nanoscroller.css استایل پیشفرض پلاگین می باشد و شما می توانید با تغییر این استایل طول و عرض را تغییر دهید و به ساختار مورد نظر تان برسید . به عنوان مثال :


.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }

fig1.png

۳ – نوبت به فراخوانی کتابخانه و پلاگین جی کوئری و تابع مورد نیاز می رسد .


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.nanoscroller.js"></script>
<script type="text/javascript">

$(function(){

$('.nano').nanoScroller({
preventPageScrolling: true
});

});
</script>

تقریبا کار تمام است و حالا می توانیم با استفاده از توابع زیر حالت مورد نیاز خود را به پلاگین اعمال کنیم . توابعی که معرفی می کنیم را باید با تابع موجود در script خط اخر جایگزین کنید .

اسکرول به بالا


$(".nano").nanoScroller({ scroll: 'top' });

اسکرول رو به پایین


$(".nano").nanoScroller({ scroll: 'bottom' });

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


$(".nano").nanoScroller({ scrollTo: $('#a_node') });

پیش نمایش پلاگین

دانلود پلاگین جی کوئری نانو اسکرول با حجم ۱۵۵ کیلوبایت

منبع : آرتاباز - پلاگین اسکرول با جی کوئری

5

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری