irserv.ir

انجمن تخصصی ایران سرور

سرور آموزش ایران

آموزش های متنوع

ایران سرور
انجمن تخصصی

در رابطه با پارالاکس بیشتر بدانیم!
زمان کنونی: 11-19-2017، 12:53 AM
کاربران در حال بازدید این موضوع: 1 مهمان
نویسنده: mehranolomi
آخرین ارسال: mehranolomi
پاسخ 1
بازدید 465

رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
طراحی سایت وب در رابطه با پارالاکس بیشتر بدانیم

در رابطه با پارالاکس بیشتر بدانیم!
عضو تازه ثبت نام شده انجمن
*
عضو تازه ثبت نام شده انجمن
ارسال‌ها: 23
تاریخ عضویت: Nov 2016
اعتبار: 0
وضعیت : آفلاین
جنسیت:
#1
در رابطه با پارالاکس بیشتر بدانیم!
با تکنولوژی پارالاکس آشنا شوید !
فکر میکنم تا به امروز عبارت ” پارالاکس ” رو در طراحی سایت زیاد شنیده باشید.   در این مقاله قصد دارم در رابطه با پارالاکس و کاربردهای اون خدمتتون توضیحاتی رو ارائه بدم.


پس از روی کار اومدن تکنولوژی پارالاکس سئو تا مدتی اکثر افراد تصور می کردند که اگر لایه های موجود در صفحات سایت با اسکرول صفحه، ظاهر شوند پارالاکس محسوب میشه؛ در صورتی که این تصور کاملا اشتباه بود.

این تکنولوژی برای طراحی سایت بصورت  single page یا  one page روی کار اومد ، اما با گذشت زمان دیده شد که طراحان از این متد در طراحی های عادی هم استفاده کردند، البته در اصل در استاندارد طراحی مشکلی بوجود نمیاره چه بسا که زیبایی خاصی هم به صفحات میده.

حالا از این تعاریف بگذریم ، به این موضوع میرسیم که اصلا پارالاکس چی هست ؟!

در صفحات پارالاکسی ، با حرکت موس یا اسکرول صفحه ، روی عناصر موجود در صفحه افکتی اجرا میشه حالا این افکت میتونه جابجایی عناصر یا Blur شدن آنها باشه ( قصد دارم در قالب بعدی آرمانیک این افکت رو پیاده کنم ) یه نکته این بین هست که پارالاکس رو با افکت های دیگه متمایز میکنه اونم اینه که هر افکتی که با اسکرول و یا حرکت موس اجرا میشه با برگشت موس و یا اسکرول، افکت هم به همون حالت که اتفاق افتاده به حالت قبل برمیگرده و عنصر در حالت اولیه خودش قرار میگیره. در غیر این صورت با  css animate هم می تونیم به راحتی ظاهر شدن عناصر در صفحه با اسکرول رو اجرا کنیم.

افکت دیگه ای که شما توی پارالاکس میتونید پیاده کنید این هست که ، با حرکت موس از راست به چپ یا چپ به راست میدان دید اصلیتون رو تغییر بدید و فراتر از میدان دیدتون عناصر و جزییات صفحه رو مشاهده کنید، به عبارتی شما میتونید صفحه ی وب رو بصورت ۱۸۰ درجه ببینید به نحوی که عناصر سر جای خودشون قرار دارن و شما میتونید عرض صفحه رو از سمت راست به چپ و بالعکس  و فراتر از عرض ثابت صفحه مشاهده کنید.

برای درک بهتر این موضوع فرض کنید صفحه مانیتور شما ۱۰۲۴ پیکسل طراحی شده ، و صفحه وب شما با عرض ۱۳۶۶ پیکسل طراحی شده، شما صفحه ی وبتون رو در مرکز تصویر به اندازه ی همون ۱۰۲۴ پیکسل میبینید، حالا اگر در طراحی سایت از پارالاکس استفاده کنیم ، میتونیم با چرخاندن موس به سمت راست یا به سمت چپ عناصری که خارج از میدان دید شما در ۱۰۲۴ پیکسل هست رو نیز ببینید. با مشاهده ی تصویر زیر درک این توضیحات میتونه براتون بهتر باشه :

[عکس: 1.png]

یکی دیگه از افکت های جذابی که توی پارالاکس پیاده میشه ، ترکیب چند لایه تصویر روی هم هست که هر لایه با حرکت موس یا اسکرول صفحه با سرعت خاصی اجرا میشه و یک افکت حرکتی زیبارو تشکیل میده.

[عکس: 2.png]

در تصویر بالا اگر دقت کنید میبینید که چند لایه تصویر روی هم قرار گرفته و در نهایت در نگاه اول تصویر زیر رو به شما نمایش میده:

[عکس: 3.png]

حالا با حرکت موس یا اسکرول صفحه هر لایه از این تصاویر با یک سرعت خاص و مشخص حرکت می کنند و یک تصویر متحرک بسیار زیبارو به شما نمایش میده، این حرکات به گونه ای هست که به شما احساس زنده بودن عناصر رو میده .

گاهی اوقات با ترکیب چند متد و تکنولوژی همراه با پارالاکس می تونید انیمیشن های زیبایی رو در صفحه ی وبتون خلق کنید و جذابیت صفحه رو چند برابر کنید.

برای پیاده سازی این تکنولوژی شما میتونید از پلاگین های موجود استفاده کنید ، یکی از پلاگین های پرکاربرد و محبوب parallax.js هست که در مقالات آتی نحوه ی کار با این پلاگین رو هم آموزش خواهیم داد.

موفق باشید...
11-29-2016، 02:15 PM
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  طراحی سایت پارالاکس ؟ sitecup1 0 47 09-23-2017، 05:14 PM
آخرین ارسال: sitecup1
  تاثیر کدام شبکه اجتماعی بر سئو بیشتر است؟ siavash82ir 0 366 02-09-2017، 04:53 PM
آخرین ارسال: siavash82ir
  چه رابطه ای بین سئو سایت و کاربردی بودن آن وجود دارد؟ mehranolomi 0 828 02-07-2017، 04:39 PM
آخرین ارسال: mehranolomi
  در طراحی سایت برای داشتن مخاطب بیشتر چه باید کرد ؟ sitecode 0 603 09-19-2016، 09:31 PM
آخرین ارسال: sitecode
  طراحی سایت و سئو چه رابطه ای با هم دارند ؟ sitecode 0 673 08-20-2016، 11:23 PM
آخرین ارسال: sitecode

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان