چگونه برای اسکرول کردن صفحات وب افکت انیمیشنی طراحی کنید ؟
طراحی صفحات وب پیشرفته این روزها، یکی از پردرآمد ترین شغل ها در بازار ایران به حساب می آید، در صورتی که شما یک حرفه ای باشید و بتوانید به عنوان یک متخصص تمام عیار در این زمینه فعالیت کنید. در این آموزش قصد دارم به شما آموزش بدم که چطور می توانید با استفاده از Htnl 5 ، Css 3 و کتابخانه ای از جی کوئری با نام Velocity.js ، اسکرول کردن صفحات وب خود را از حالت ساده در بیاورید و کاربر متوجه شود که وارد یک وب سایت معمولی نشده است. در ادامه با استاد شو باشید.
شما می توانید به راحتی تگ <body> صفحه Html خودتون رو شخصی سازی کنید. یعنی قابلیت اسکرول انیمیشنی رو بهش اضافه کنید. برای اینکار می تونید از کد زیر استفاده کنید :
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="off" data-animation="none">
در ادامه با استفاده از تگ <section> که در Html 5 معرفی شد، صفحه وب خودمون رو بخش بندی میکنیم، به کدهای زیر دقت کنید :
<section class="cd-section visible"> <div> <h2>Page Scroll Effects</h2> </div> </section> <section class="cd-section"> <div> <h2>Section 2</h2> </div> </section> <section class="cd-section"> <!-- ... --> </section> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav -->
خب بیاید کمی با استفاده از کدهای Css3، استفاده کنیم و استایلی رو به این صفحه ساده خودمون بدیم تا از ظاهر ساده به یک نمای تقریبا حرفه ای تبدیلش کنیم، برای اینکار من از کدهای زیر استفاده کردم :
.cd-section { height: 100vh; } .cd-section:first-of-type > div { background-color: #2b334f; } .cd-section:nth-of-type(2) > div { background-color: #2e5367; } .cd-section:nth-of-type(3) > div { background-color: #267481; } .cd-section:nth-of-type(4) > div { background-color: #fcb052; } .cd-section:nth-of-type(5) > div { background-color: #f06a59; } [data-animation="parallax"] .cd-section > div { background-position: center center; background-repeat: no-repeat; background-size: cover; } [data-animation="parallax"] .cd-section:first-of-type > div { background-image: url("../img/img-1.jpg"); } [data-animation="parallax"] .cd-section:nth-of-type(2) > div { background-image: url("../img/img-2.jpg"); } [data-animation="parallax"] .cd-section:nth-of-type(3) > div { background-image: url("../img/img-3.jpg"); } [data-animation="parallax"] .cd-section:nth-of-type(4) > div { background-image: url("../img/img-4.jpg"); } [data-animation="parallax"] .cd-section:nth-of-type(5) > div { background-image: url("../img/img-5.jpg"); } حالا وقتشه که از کدهای جی کوئری در قالب Velocity.js استفاده کنیم و اصلاحا Events handling تعریف کنیم، یعنی اینکه وقتی اسکرول روشن بود، چه کاری انجام بده و وقتی اسکرول خاموش بود چه کاری انجام بده، که کدهاش به صورت زیر هستند :
کدهای مربوط به غیرفعال بودن اسکرول :
var offset = $ (window).scrollTop() - actualBlock.offset().top, windowHeight = $ (window).height(); if( offset >= -windowHeight && offset <= 0 ) { // section entering the viewport translateY = (-offset)*100/windowHeight; scale = 1; opacity = 1; } else if( offset > 0 && offset <= windowHeight ) { //section leaving the viewport scale = (1 - ( offset * 0.3/windowHeight)); opacity = ( 1 - ( offset/windowHeight) ); translateY = 0; boxShadowBlur = 40*(offset/windowHeight); } کدهای مربوط به فعال بودن اسکرول :
$ .Velocity .RegisterEffect("scaleDown", { defaultDuration: 800, calls: [ [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1] ] }); خب حالا کافیه که کدها رو در مرورگر تست کنید.
دوستان در هر قسمتی از کدها که دچار ابهام هستند و متوجه نشدند کافی ست در همین مطلب در بخش نظرات اعلام کنند تا کد توضیح بیشتری برای کدها داده شود.
پیروز و استاد باشید.
نوشته چگونه برای اسکرول کردن صفحات وب افکت انیمیشنی طراحی کنید ؟ اولین بار در مرجع آموزش های فارسی و انگلیسی برنامه نویسی و گرافیک پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
مرجع آموزش های فارسی و انگلیسی برنامه نویسی و گرافیک