Parallax Scrolling

 Parallax Scrolling

تاریخ انتشار: 20 بهمن 1392

تعداد بازدید: 0 نفر

<p dir="RTL"><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;"><a href="http://www.webone.co/">طراحان وب سایت </a>به طور مداوم در جست و جوی راه های جدیدی برای افزایش بازدید کنندگان <a href="http://www.webone.co/">سایت</a> خود از طریق درگیر شدن آنها با تصاویر و قابلیتهای جذاب هستند.</span></span></span></p> <p dir="RTL"><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;"><a href="http://www.webone.co/">طراحی وب سایت</a> بر اساس <span dir="LTR">parallax</span> از جدیدترین موضوعات <a href="http://www.webone.co/">طراحی وب سایت</a> در سال 2013 است، که بسیار رو به رشد است و در سراسر اینترنت به کاربر سطح جدیدی از تعامل مشاهده ی آنلاین را می دهد.</span></span></span></p> <p dir="RTL">&nbsp;</p> <p dir="RTL"><span style="font-size:18px;"><span style="color: rgb(255, 0, 0);"><span style="font-family: arial,helvetica,sans-serif;"><strong><span dir="LTR">Parallax Scrolling</span> چیست ؟</strong></span></span></span></p> <p dir="RTL"><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;">اصلاح <span dir="LTR">parallax</span> &nbsp;یا منظر اولین بار از اثر دیداری از بازی های رایانه ای <span dir="LTR">2D</span> آمد که پس زمینه و پیش زمینه برای ایجاد توهم عمق در طول اجرای بازی سرعت متفاوتی داشتند.</span></span></span></p> <p dir="RTL"><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;">از این خلاقیت در <a href="http://www.webone.co/">طراحی وب سایت</a> با دادن یک اختلاف زاویه ای میان محتوای سایت و تصویر پس زمینه <span dir="LTR">body</span>، با کمک یک سری کدهای <span dir="LTR">CSS</span> و <span dir="LTR">javascript</span> انجام میدهند.</span></span></span></p> <p dir="RTL">&nbsp;</p> <p dir="RTL"><span style="font-size:14px;"><span style="font-family: arial,helvetica,sans-serif;"><span dir="LTR"><img alt="TWW_parallax_scrolling_sample_1.jpg" src="http://upload.wikimedia.org/wikipedia/commons/8/82/TWW_parallax_scrolling_sample_1.jpg" style="width: 574px; height: 292px;" /></span></span></span></p> <p dir="RTL"><span style="font-size:16px;"><span style="font-family: arial,helvetica,sans-serif;"><span style="color:#696969;">یکی از نمونه کارهای را میتوانید در سایت</span> <span style="color: rgb(0, 128, 128);"><span dir="LTR">http://www.rowtothepole.com</span></span>&nbsp; <span style="color:#696969;">به زیبایی مشاهده کنید که با کمک کدهای <span dir="LTR">CSS</span> و <span dir="LTR">javascript</span> ، به گونه ای صفحه <a href="http://www.webone.co/">وب سایت </a><span dir="LTR">layout</span> شده است که گویی فاصله ای است بین تصویر پس زمینه <span dir="LTR">body</span> و محتوای داخل آن و وقتی <span dir="LTR">scroll</span> میکنیم، تصویر پیش زمینه با یک اختلافی از تصویر محتوای سایت <span dir="LTR">scroll</span> میشود.</span></span></span></p> <p dir="RTL">&nbsp;</p> <p dir="RTL"><span style="font-size:18px;"><span style="color: rgb(255, 0, 0);"><span style="font-family: arial,helvetica,sans-serif;"><strong>مزایای </strong><strong><span dir="LTR">parallax</span></strong><strong>:</strong></span></span></span></p> <ul> <li><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;">افزایش زیبایی و تفاوت <a href="http://www.webone.co/">سایت</a></span></span></span></li> <li><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;">بازدید کنندگان در صفحه عمق و انیمیشن احساس می کند</span></span></span></li> <li><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;">با تحریک بازدید کننده آنها را تشویق میکند تا انتهای صفحه رفته و مطالب انتهایی <a href="http://www.webone.co/">سایت</a> را هم ببنینند</span></span></span></li> <li><span style="color:#696969;"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;">افزایش نو آوری و به روز بودن <a href="http://www.webone.co/">سایت</a></span></span></span></li> </ul> <p dir="RTL" style="margin-right:.5in;">&nbsp;</p> <p dir="RTL"><span style="font-size:18px;"><span style="color: rgb(255, 0, 0);"><span style="font-family: arial,helvetica,sans-serif;"><strong>معایب </strong><strong><span dir="LTR">parallax</span></strong><strong>:</strong></span></span></span></p> <ul dir="rtl"> <li><span style="color:#696969;"><span style="font-family: arial,helvetica,sans-serif;"><span style="font-size: 16px;">با <a href="http://www.webone.co/">SEO</a> سازگاری ندارد زیرا تنها یک مجموعه از اطلاعات تگ متا یا h1 ... موثر&nbsp; می گیرند.</span></span></span></li> <li><span style="font-size:16px;"><span style="font-family: arial,helvetica,sans-serif;"><span style="color: rgb(105, 105, 105);">بار لود صفحه افزایش میابد.</span></span></span></li> <li><span style="font-size:16px;"><span style="font-family: arial,helvetica,sans-serif;"><span style="color: rgb(105, 105, 105);">به علت دیر لود شدن صفحه یک سری عکس ها دیر نمایش داده می شود و ممکن است باعث ناامیدی بازدید کننده و خروج از <a href="http://www.webone.co/">سایت</a> بشود ، قبل از اینکه این تصاویر را ببیند.</span></span></span></li> <li><span style="font-size:16px;"><span style="font-family: arial,helvetica,sans-serif;"><span style="color: rgb(105, 105, 105);">با Responsive روی موبایل سازگاری ندارد.</span></span></span></li> </ul>
 
اشتراک گذاری:
021-41658