آیا قصد ایجاد افکت با اسکرول کردن در سایت خود را دارید ؟
در این مقاله با معرفی یکی از بهترین پلاگین های جی کوئری ، به شما آموزش داده خواهد شد تا بتوانید افکت های نمایشی مختلفی را در جای جای سایت خود با اسکرول کردن ایجاد نمایید.
از مزیت های این قابلیت میتوان به : زیباتر شدن سایت و درامدن از حالت معمولی و همچنین کاربر پسند تر کردن آن اشاره نمود.
امید که این آموزش که منبع آن در انتهای مقاله ذکر شده است ، مفید واقع شود.
scrollme : پلاگین jQuery برای ایجاد افکت در زمان اسکرول
در این مطلب میخوام یک پلاگین jQuery بنام scrollme رو خدمت شما معرفی کنم و اونو آموزش بدم.
با استفاده از این پلاگین میتونین افکتهایی برای عناصر مختلف صفحتون قرار بدین که با استفاده از اسکرول کردن به پایین و بالا اون افکتها نمایش داده بشن.
میبینید که تعدادی div قرار داره و وقتی که به سمت پایین اسکرول میکنید با افکتهای مختلفی ظاهر و مخفی میشن.
نحوه استفاده :
ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery.scrollme.min.js و jquery.min.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.
حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7Learn.com - scrollme</title>
<style type="text/css">
/* http://scrollme.nckprsn.com/ */
body {
overflow-x: hidden;
}
div {
margin: 300px auto;
height: 200px;
width: 50%;
}
.red {
background-color: #e74c3c;
}
.green {
background-color: #2ecc71;
}
.blue {
background-color: #3498db;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.scrollme.min.js"></script>
</body>
</html>
میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.
۶ تا div قرار دادم و برای هر کدام رنگی انتخاب کردم. خوبی این پلاگین اینه که میشه کاری کرد که لازم نباشه کد Javascript نوشت و با استفاده از HTML میتونین راهش بندازین. اولین کاری که باید بکنید اینه که دو کلاس scrollme و animateme رو به div ها اضافه کنید. بصورت زیر :
<div class="scrollme animateme blue"></div> <div class="scrollme animateme red"></div> <div class="scrollme animateme green"></div> <div class="scrollme animateme red"></div> <div class="scrollme animateme green"></div> <div class="scrollme animateme blue"></div>
با اینکار به این ابزار میگیم که میخوایم روی این المنتها افکت انجام بشه.
این ابزار تعدادی ویژگی داره :
- data-when : مشخص میکنه که این افکت مورد نظر ما چه زمانی باید اتفاق بیوفته. سه مقدار enter و exit و span رو قبول میکنه. اگر enter بزارید ، این افکت زمانی اجرا میشه که شما به سمت اون المنت اسکرول کنید و بالای اون المنت بخواد نمایش داده بشه. اگر exit بزارید ، این افکت زمانی اجرا میشه که پایین اون المنت در دیدرس قرار بگیره.
- data-from : با استفاده از این ویژگی و data-to میتونین انیمیشن رو برعکس کنید و حتی زمان اجراشو کم و زیاد کنید ، عددی بین ۰ تا ۱ میتونین براشون قرار بدین
- data-easing : با استفاده از این خاصیت میتونین نوع انیمیشن رو مشخص کنید. چهار حالت easeout و easein و easeinout و linear رو قبول میکنه.
- data-opacity : میتونین شفافیت المنت مورد نظر رو زمانی که به موقعیت to میرسه مشخص کنید. عددی بین ۰ تا ۱ میتونین قرار بدین
- scale – saclex – scaley – scalez : میتونین با استفاده از اینا سایز المنت رو تغییر بدین
- rotatex – rotatey – rotatez : میتونین با استفاده از این موارد المنت رو بچرخونید
- translatex – translatey – translatez : با استفاد از این موارد هم میتونین المنت رو در جهات مختلف جابجا کنید
یک نمونه که همه موارد بالا در اونا قرار گرفته :
<div class="scrollme animateme blue" data-when="exit" data-from="0" data-to="0.5" data-opacity="0" data-easing="easeout" data-rotatey="180" data-scale="2" data-translatex="500"></div> <div class="scrollme animateme red" data-when="exit" data-from="0" data-to="1" data-easing="easein" data-rotatez="180" data-translatez="500"></div> <div class="scrollme animateme green" data-when="enter" data-from="0.5" data-to="0" data-easing="easein" data-translatex="400" data-translatey="400"></div> <div class="scrollme animateme red" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="1.5"></div> <div class="scrollme animateme green" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="1.5"></div> <div class="scrollme animateme blue" data-when="exit" data-from="1" data-to="0" data-rotatey="90"></div>
حالا میتونین موارد رو تغییر بدین و اثر هر کدوم رو تست کنید.
برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.
امیدوارم خوشتون اومده باشه.
موفق باشید. یا علی
2 پاسخ
ببخشید ایجاد افکت با اسکرول کردن در سایت چه فایده ای میتونه داشته باشه ؟
ضمن سپاس از همراهی شما ، همان طور که متن نیز اشاره شده است : از مزیت های این قابلیت میتوان به : زیباتر شدن سایت و درامدن از حالت معمولی و همچنین کاربر پسند تر کردن آن اشاره نمود.
ضمنا افکت های نمایشی باعث جلب توجه بیشتر بازدید کنندگان میگردد که وب مستران می توانند جهت تاثیر گذاری مطالب مهم خودشان ، از این افکت ها بر روی آنان بهره بگیرند.
نمونه ی افکت گذاری را در همین سایت مجموعه داده پرداران در پست های نمونه کار می توانید ببینید.