img

ایجاد عناصر متحرک، با اسکرول کردن صفحات وب

/
/
/

با استفاده از JavaScript و پویانماییِ CSS، عناصر محتوایی را به گونه‌ای آراسته کنید، که به صورتِ پویانمایی در برابر دیدگان مخاطب ظاهر گردند

 

۱- سندِ HTML
مانند گذشته، اولین قدم نوشتنِ سندِ HTML می باشد، که صفحه را تعریف نموده و محتوای قابل دیدن توسطِ مخاطب را در خود جای می دهد. عناصرِ سندِ HTML به دو گروه تقسیم می شوند – قسمت سر که برای جای دادنِ آدرسِ پیوندهای منابع خارجی است، و قسمت بدن، که مختص به قرارگیریِ محتوای قابل مشاهده توسط کاربر می باشد، که این بخش را در گام دوم تعریف می کنیم.

<!DOCTYPE html>
<html>
<head>
<title>Scroll Animation</title>
<link rel=»stylesheet» type=»text/css»
href=»styles.css» />
<script src=»code.js» type=»text/
javascript»></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>

 

 

۲- محتوایِ HTML
محتوای مثال کنونی، از سه ظرفِ article تشکیل شده است.هر یک از این articleها واجد عناصری هستند که قرار است نمایش داده شوند. برروی این عناصر که بایستی پویانمایی به گونه‌ای صورت پذیرد، که وقتی مخاطب با چرخاندنِ دکمه‌ی چرخنده‌ی موس این عناصر را در برابر دیدگان خود قرار می دهد، صفتِ ‘data-animation’ وارد عمل شده، و عناصر مذبور به شکل پویانمایی خودنمایی خواهند کرد. این صفت می تواند در خود مقداری را نیز جای دهد، که با توجه به نوعِ این مقدار، اینکه چه نوع پویانمایی بایستی رخ دهد را نیز می توان تعریف کرد.

<article>
<h1>Scroll Down</h1>
</article>
<article>
<img src=»photo1.jpg» dataanimation=»boom» />
</article>
<article>
<img src=»photo2.jpg» dataanimation=»boom» />
</article>

 

۳- پویانماییِ article ها به وسیله‌ی CSS
کارِ ما با HTML تمام است. فایلِ جدیدی بسازید، و آن را styles.css بنامید. در این فایل قرار است قوانینِ جلوه‌های بصری(visual presentation rules) را تعریف کنیم. اولین قانون‌ها حکم می کنند که عناصرِ واجدِ صفتِ ‘data-animation’ بایستی توسطِ یک کلاسِ ‘active’ کنترل شوند. مثلا پویانماییِ ‘boom’، متحرک‌سازی است که حالتِ خاص خود را به عنصر القا می کند، که به مدتِ یک ثانیه نیز به درازا خواهد انجامید.
برای نمایشِ بهتر، سایزِ articleها برای اینکه با پنجره‌ی مرورگر منطبق شود، روی حداقل تنظیم گردیده است.

[data-animation=»boom»].active{
animation: boom 1s;
}
article{
display: block;
min-height: 100vh;
}

 

۴- تعریفِ پویانمایی
اینجا به تعریفِ پویانمایی که در مرحله‌ی قبلی اعمال کردیم می پردازیم، بنابراین یک keyframe خواهیم ساخت و نامش را ‘boom’ می گذاریم. این پویانمایی برای اولین فریم(۰) مقیاس اولیه‌ی عنصر را در نظر می گیرد. پویانمایی همین‌طور به روال خود ادامه می دهد، به طوری که اندازه‌ی عنصر در ۵۰%، به یک و نیم برابرِ حالت اول خود می رسد. سرانجام در پایان کار(۱۰۰%) پویانمایی با برگرداندنِ عنصر به اندازه‌ی اولِ خود، به کارش خاتمه می دهد.

@keyframes boom {
۰% {transform: scale(1);}
۵۰% {transform: scale(1.5);}
۱۰۰% {transform: scale(1);}
}

 

۵- JavaScript listeners
الان CSS کامل است، بنابراین یک فایل جدید می سازیم و آن را code.js نام می نهیم. کدی که در این مرحله می نویسیم، مرورگر را نسبت به پایان یافتنِ بارگذاریِ کاملِ صفحه هوشیار می کند. و وقتی این کار انجام شود، مرورگر منتظر است تا صفحه بالا و پایین شود، تا نسبت به اجرای کدهای مرحله‌ی ششم اقدام نماید.

window.addEventListener(«load»,function(){
window.addEventListener(«scroll»,
function(){
*** STEP 6 HERE
})
});

 

۶- آنچه که JavaScript انجام می دهد
کدهایی که در این مرحله می نویسیم، با استفاده از صفتِ ‘data-animation’ تمامِ nodeهای عناصر را پیدا می کند. یک حلقه‌ی for هر node را چک می کند تا از قابل رویت بودن آنها اطمینان حاصل شود. این کار به وسیله‌ی توابعِ getBoundingClientRect() آنها انجام می شود. عناصری که در معرض دید هستند، کلاسشان به صورت ‘active’ تعیین می شود. در حالی که آن دسته عناصری که در معرض دید نیستند، کلاس آنها خالی خواهد بود. این کدها سببِ اجرای پویانماییِ boom، در زمانِ تغییراتِ مقدار کلاس می شوند.

var nodes = document.
querySelectorAll(«[data-animation]»);
for(var i=0; i<nodes.length; i++){
if(nodes[i].getBoundingClientRect().top
>= 0 && nodes[i].getBoundingClientRect().
bottom <= window.innerHeight)
nodes[i].setAttribute(«class»,»active»);
else
nodes[i].setAttribute(«class»,»»);
}

 

دانلود سورس کد این مقاله

 

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text