یک تکنیک ساده پارالاکس | آموزش وردپرس|آموزش طراحی سایت|آموزش ووکامرس » یک تکنیک ساده پارالاکس

http://www.wholesalejerseysi.com

Our principal focus for the quarter was to better align our inventory with sales trends through our aggressive markdown actions and receipt reductions. wholesale jerseys Mentored by Basketball Hall of Fame coach Lute Olson at Arizona, he learned the game from the best.

cheap mlb jerseys

Calendar Editors A celebration of DIY culture, World Maker Faire New York 2015 runs Saturday Sunday, September 26 27, at the New York Hall of Science, 47 01 111th Street, Queens, NY 11368. The Liberals want to replace the child care benefit with a larger income tested benefit payment that would require a Justin Trudeau to find $2 billion to make it happen.. December 29 vs. wholesale nba jerseys Despite Charlotte forward Tyrus Thomas 21 points, it wasn enough to extend the Bobcats season. The near capacity crowd lapped up two tries by Jonny May and another for Mike Brown under the floodlights in this test event for evening kick offs at next year's World Cup. NPD results reflected that trend with PS3 and Xbox 360 software sales declining 35% versus the prior year. wholesale nfl jerseys Then junior Jocelyn Reckford was undefeated (6 0) at No. Slide a ferrule tube from the assembly kit of a copper line onto the end of the tubing as well. cheap nba jerseys The freezing conditions have brought misery for thousands of Syrians living in refugee camps in northern Jordan, Turkey and Lebanon. Nr han var handlas till Los Angeles Lakers, accepteras Radmanovic en fem r, 31 miljoner dollar kontrakt. If Blair had managed to score something better than Fruitbat McTang for his first major gig, he probably wouldn't have given up on rock promotion a few months later to go into Oxford University. wholesale mlb jerseys Bernie Sanders came out at statement saying just don't do it telling the president to cancel this visit to not. cheap jerseys Thankfully, I took notes. But McLemore is an important building block, albeit one in need of more stability around him. Dunked it on him so hard it was unbelievable. wholesalejerseysi Concealed but opulent details reference ancient civilizations, including a loop strap with hieroglyphics that spell out 'YZY.' Each screw on lace aglet is obelisk shaped, and the anaconda texture is echoed on the eyelets and leather lace toggle that carries the Roman numeral 'II.'. cheap nba jerseys He said the Iraqis had not provided all the forces promised, and in some cases have performed badly. In an article published in a July 2009 issue of Businessweek, India remains as the top outsourcing destination in the world. This vehicle was parked in the south parking lot at approximately 7:30 that morning. wholesale jerseys However, you should make sure that you will have mentorship. But air jordans is on a league of his own.. cheap Super Bowl jerseys Take the lace on the side of the hand and hold it between your thumb and the forefinger. dallascowboysjerseyspop Funicello had Multiple Sclerosis.. I thought we played a pretty good game actually. wholesale mlb jerseys The event featured art exhibitions, a fashion (sneaker show), open auditions for a Bud Light commercial, giveaways, contests, autograph signing and of course, food and beverages. Training primarily in South Korea, she has black belts in Taekwondo, Hapkido, and Muay Thai kickboxing. These were for use by professionals rather than the public. cheap jerseys Typically they're shown on national television by big corporations (MacDonald's, Nike, Starbucks, Target).

یک تکنیک ساده پارالاکس

paper1

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

گام اول: آماده‌سازی

این تکنیک، بر اساس کنترل سرعت تصویر پس‌زمینه است. با نمونه HTML شروع می‌کنیم و دو بخش در آن با دو مشخصه “data-type” و “data-speed” ایجاد می کنیم. جای نگرانی نیست؛ چون این موارد را در ادامه توضیح خواهیم داد.

<section id="home" data-type="background" data-speed="10">                           

</section>  

 

<section id="about" data-type="background" data-speed="10">

</section>

 

 

در این کد، از تگ <section> با مشخصه‌های “data-type” و “data-speed” استفاده شده که از موارد معرفی شده در HTML5 است. این کار باعث می‌شود تا نمونه HTML منظم‌تر و خواناتر شود.

بر اساس موارد ارائه شده در مشخصه‌های سفارشی داده‌ها (Custom Data Attributes)، هر مشخصه‌ای که با data- آغاز شود، به عنوان یک ناحیه ذخیره اطلاعات شخصی درنظر گرفته خواهد شد.

چیزی که ما احتیاج داریم کنترل سرعت تصاویر پس‌زمینه است؛ بنابراین از data-speed=”10″ و data-type=”background” به عنوان مشخصه‌های اصلی برای تعیین پارامتر‌های لازم، استفاده خواهیم کرد.

نگران اینترنت اکسپلورر هم نباشید، برای آن نیز در ادامه راه‌حل خواهیم داشت.

اکنون، می‌خواهیم در بین تگ <article> در هر بخش، یک محتوا اضافه کنیم.

<section id="home" data-type="background" data-speed="10" class="pages">    

         <article>I am absolute positioned</article>

    </section>  

 

<section id="about" data-type="background" data-speed="10" class="pages">

         <article>Simple Parallax Scroll</article>

</section>

 

 

کاری که ما می‌خواهیم در اینجا انجام دهیم این است که تصویر پس‌زمینه در <section> دارای سرعت کمتری نسبت به محتوای آن در هنگام حرکت کاربر در صفحه باشد. این کار به ما کمک می‌کند تا به نوعی یک شکست نور ایجاد کنیم. قبل از استفاده از ترفند jQuery، بیایید تصاویر پس‌زمینه را به هر بخش از CSS اضافه کنیم.

#home {

background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;

}

 

#about {

background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px; 

}

 

 

تصاویر مورد استفاده برای پس‌زمینه هر دو بخش، به صورت زیر هستند:

only_background_1

only_background_2

اکنون، می‌خواهیم به CSS خودمان اندکی استایل اضافه کنیم تا سر و شکلی به خود بگیرد.

#home {

  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;

  height: 1000px;

  margin: 0 auto;

  width: 100%;

  max-width: 1920px;

  position: relative;

}

 

#home article {

  height: 458px;

  position: absolute;

  text-align: center;

  top: 150px;

  width: 100%;

}

 

#about {

  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;

  height: 1000px;

  margin: 0 auto;

  width: 100%;

  max-width: 1920px;

  position: relative;

  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);

  box-shadow: 0 0 50px rgba(0,0,0,0.8);

}

 

#about article {

  height: 458px;

  position: absolute;

  text-align: center;

  top: 150px;

  width: 100%;

}

 

 

اکنون، نتیجه به صورت زیر خواهد بود:

1

گام دوم: کد جادویی

جادویی که با استفاده از jQuery انجام می‌شود و با استفاده از روش استاندارد document.ready() شروع می‌شود. در نتیجه، از بارگذاری صفحه و آماده‌ شدنش برای تنظیمات، مطمئن خواهیم شد.

$(document).ready(function(){

 

 

});

 

 

به خاطر داشته باشید که:

این تکنیک بر اساس کنترل سرعت تصویر پس‌زمینه‌هایی که در هر دو بخش قرار دارند، عمل می‌کند.

از اینجا به بعد، نیاز به تمرکز بیشتری خواهیم داشت. اولین اتفاقی که در ادامه می‌افتد، این است که برای هر <section> در صفحه با مشخصه data-type=”background” ، عمل زیر را تکرار می‌کنیم:

$(document).ready(function(){

 

$('section[data-type="background"]').each(function(){

var $bgobj = $(this); // assigning the object

});

 

});

 

 

یک تابع دیگر با نام .scroll() درون تابع .each() اضافه می کنیم که کاربر را برای حرکت در صفحه ترغیب می‌کند.

$(window).scroll(function() {

 

});

 

 

اکنون باید میزان حرکت در صفحه را توسط کاربر تعیین کنیم و سپس نسبت آن را به مقدار data-speed که قبلاً معیّن کرده‌ایم، بدست آوریم:

 	var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop()

 

با این عبارت، ما میزان کنونی حرکت کاربر در صفحه از بالا را بدست می‌آوریم. این مقدار، در واقع، نشان می‌دهد که کاربر چقدر به سمت پایین صفحه حرکت کرده است.

$bgobj.data('speed')

 

به میزان سرعت تصویر پس‌زمینه در نمونه HTML اشاره دارد (data-speed).

yPos

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

در اینجا با یک مثال، این موضوع را بیشتر بررسی می‌کنیم.

2

در مرورگر، ۵۷ پیکسل به سمت پایین حرکت شده است. در این میان، محتوا با همین سرعت به سمت پایین آمده، ولی تصویر پس‌زمینه ۵/۷ پیکسل جابجا شده است. حرکت در مرورگر تقسیم بر data-speed برابر است با مقدار نهایی. در تصویر بالا، سرعت تصویر پس‌زمینه برابر ۱۰ تنظیم شده است.

// Put together our final background position

var coords = '50% '+ yPos + 'px';

 

// Move the background

$bgobj.css({ backgroundPosition: coords });

 

 

آخرین کاری که باید انجام دهیم این است که موقعیت نهایی تصویر پس‌زمینه را به صورت یک متغیر درآوریم. برای آن‌ که وضعیت افقی پس‌زمینه را ثابت نگه داریم، عدد ۵۰ را به موقعیت راستای x آن، اختصاص داده‌ایم. سپس متغیر yPps را به عنوان موقعیت راستای y قرار داده‌ایم و در نهایت نیز، مختصات پس‌زمینه را به تصویر پس‌زمینه <section> اضافه کرده‌ایم:

$bgobj.css({ backgroundPosition: coords });

 

کد نهایی، به شکل زیر خواهد بود:

$(document).ready(function(){

$('section[data-type="background"]').each(function(){

var $bgobj = $(this); // assigning the object

 

$(window).scroll(function() {

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

 

// Put together our final background position

var coords = '50% '+ yPos + 'px';

 

// Move the background

$bgobj.css({ backgroundPosition: coords });

});

});

});

 

 

طراحی کامل شده است؛ می‌توانید دوباره به تمرین آن بپردازید.

رفع مشکل IE

یک تنظیم دیگر باقی مانده و آن رفع مشکل اینترنت اکسپلوررهای قدیمی با تگ‌های <section> و <article> است. رفع این مشکل، بسیار ساده است. راه حل آن استفاده از ابزار استاندارد در ساخت المان‌های صفحه است؛ چیزی که باعث می‌شود که اینترنت اکسپلورر به صورتی باورنکردنی تگ‌های HTML5 را تشخیص دهد.

// Create HTML5 elements for IE

 

document.createElement("article");

document.createElement("section");

 

 

 

به علاوه، می‌بایست یک فایل راه‌اندازی مجدد CSS نیاز داریم تا این تکنیک در تمام مرورگرها به خوبی کار کند. خوشبختانه، ابزارهایی مانند HTML5 Boilerplate نیز هستند که کارها را در این زمینه بسیار ساده می‌کنند.



نمایش نظرات “یک تکنیک ساده پارالاکس”

  1. afshin می‌گه:

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

Add Comment Register



پاسخ دهید

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

ورود اعضای سایت

ماهنامه باشگاه وردپرس

دانلود رایگان

ما را دنبال کنید

نمادها

اینستاگرام



لطفا نام و ایمیل خود را وارد کنید
تا این آموزش ارزشمند همین الان برایتان ایمیل شود

فیلم آموزشی را همین الان برایم ایمیل کن
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
دانلود این فیلم آموزشی با کیفیت اصلی
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
دانلود اولین ماهنامه تخصصی وردپرس
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم