آپ کی ویب سائٹ پر پرتوں پارلایکس اثر کیسے بنانا

Sep 14, 2025
کيسے
layered parallax effect
(تصویری کریڈٹ: www.beargrylls.com)

Parallax تحریک، مختلف رفتار پر منتقل کرنے کی تہوں کو منتقل کرنے کے تصور، انیمیشن میں سال کے لئے استعمال کیا گیا ہے. ریچھ گرے کی سرکاری ویب سائٹ (ہمارے پسندیدہ میں سے ایک Parallax طومار سائٹس )، نئے اور دلچسپ ہدایات میں اثر لیتا ہے. پس منظر کے پہاڑوں کی پوزیشن میں اضافہ ہوتا ہے، جبکہ اس کو دھکا دیا جاتا ہے تاکہ وہ مکمل طور پر غیر متوقع ہو جائیں، اور صفحے کے پس منظر میں، متن 'ایڈورٹائزنگ' پہاڑوں کے پیچھے جگہ بڑھتی ہے کیونکہ اس میں یہ دھندلا ہے.

زیادہ حوصلہ افزائی موشن اثرات کے لئے، سب سے بہتر کرنے کے لئے ہمارے گائیڈ کو چیک کریں سی ایس ایس حرکت پذیری اور ان کوڈ کو کیسے کریں .

ریچھ Grylls سائٹ ڈیزائن برطانیہ تخلیقی مارکیٹنگ ایجنسی کا کام ہے آؤٹ پٹ ، اور ہدف کے سامعین کے ساتھ 16 سے 55 سال کی عمر سے، اور دنیا بھر میں 7 ملین سے زائد پیروکاروں، ان کے ہاتھوں پر ایک سنگین کام تھا.

"ویب سائٹ کی اہم خصوصیت ہوم پیج تھا. ہم چاہتے ہیں کہ وہ زائرین کو سکرین میں سکرین میں چھلانگ لگائیں اور ان کی مہم جوئی پر برداشت کریں." شریک بانی کرس ولکاک اور تخلیقی ڈائریکٹر ڈین ولیمز کی وضاحت کریں. "اس کو حاصل کرنے کے لئے، ہم نے کچھ ہوشیار ٹرانزیشن کا استعمال کیا، جس میں ترمیم شدہ ویڈیوز، ڈرامائی تصویری اور سائٹ پر مجموعی زبان کے ساتھ مل کر."

ایکشن میں سائٹ دیکھیں www.beargrylls.com. . اس آرٹیکل میں، ہم وضاحت کریں گے کہ آپ کی اپنی سائٹس پر اثر کیسے بنانا ہے. کی طرف سے شروع سبق فائلیں ڈاؤن لوڈ کریں .

01. سکیننگ اثر بنائیں

کام کرنے کے لئے تمام متحرک مواد کی اجازت دینے کے لئے ساخت نسبتا آسان ہے. ایک لاپتہ ہر چیز رکھتا ہے، اور کسی بھی بہاؤ مواد کو چھپاتا ہے. اس کے بعد سب سے اوپر پر ڈیو ٹیگ کی بنیادی تین تہوں موجود ہیں. 

 & lt؛ div class = "wrapper" & gt؛
& lt؛ div class = "post text" & gt؛ & lt؛ / div & gt؛
& lt؛ div class = "post ماؤنٹین 1" اور GT؛ & lt؛ / div & gt؛
& lt؛ div class = "post ماؤنٹین 2" اور GT؛ & lt؛ / div & gt؛
& lt؛ / div & gt؛

02. سی ایس ایس شروع کریں

ڈیزائن بنانے کے لئے، پس منظر کی تدریسی تصویر جسم میں شامل کیا جائے گا اور اسکرین کے سائز کو بھرنے کے لئے مقرر کیا جائے گا. لاپتہ تمام تہوں کو رکھتا ہے، اور مواد کے لئے بہاؤ پوشیدہ ہے تاکہ سکیننگ اثرات کو لاگو کیا جا سکے. 

 جسم {
مارجن: 0؛
پڈنگنگ: 0؛
اونچائی: 100٪؛
پس منظر: URL (img / bg.jpg)
مرکز مرکز؛
پس منظر کا سائز: کور؛
}
.wrapper {
چوڑائی: 100VW؛
اونچائی: 100vh؛
پوزیشن: رشتہ دار؛
چھپا ہوا رساو؛
}

03. ہر پرت کی حیثیت

اگلے کوڈ کو یقینی بناتا ہے کہ ہر پرت بالکل ٹھیک ہے، ایک دوسرے پر، ایک دوسرے کے اندر، چھت کے اندر. اس کا سائز دیکھنے کی چوڑائی اور اونچائی کو بھرتا ہے تاکہ تصاویر اسکرین کو بھریں. 

 .pos {
پوزیشن: مطلق؛
اوپر: 0؛
بائیں: 0؛
چوڑائی: 100VW؛
اونچائی: 100vh؛
}

04. متن شامل کریں

ٹیکسٹ کلاس واقعی صحیح تصویر میں اضافہ کرتا ہے، اور اس کا استعمال کرتے ہوئے اسے حرکت پذیری کرنے سے پہلے اس کی شروعاتی پوزیشن قائم کرتا ہے آگے ہو جاو کلیدی فریموں کو جو حتمی قدم میں شامل کیا جائے گا. 

. ٹیکسٹ {
پس منظر: یو آر ایل (img / text.png)
مرکز مرکز؛
پس منظر کا سائز: کور؛
ٹرانسمیشن: ترجمہ 3D (0، 30px، 0)؛
دھندلاپن: 0؛
حرکت پذیری: منتقل اپ 1.8s آسانی سے؛
حرکت پذیری بھر موڈ: فارورڈز؛
}

05. پہلا پہاڑ متحرک

پہلا پہاڑ اسکرین سے ایک اور دور ہے، اور یہ ایک چھوٹا سا سکیننگ مل جائے گا جو متحرک ہو جائے گا. تمام تہوں کی دھندلاپن بھی کم ہے تاکہ وہ جگہ پر ظاہر ہو. 

 .mountain1 {
پس منظر: URL (img / ماؤنڈ 1.png)
مرکز مرکز؛
پس منظر کا سائز: کور؛
ٹرانسمیشن: اسکیل 3 ڈی (1.1، 1.1، 1.1)؛
دھندلاپن: 0.2؛
حرکت پذیری: سکالر 1S آسانی سے؛
حرکت پذیری بھر موڈ: فارورڈز؛
}

06. پیش منظر پہاڑ کو متحرک کریں

پیش منظر کے لئے پہاڑ دوسرے پہاڑ کے تقریبا ایک جیسی ہے - یہ صرف ایک پیمانے پر جگہ میں زیادہ سے زیادہ کرتا ہے. دونوں پہاڑوں نے ان کی حرکت پذیری کے لئے 'سکالر' کی keyframes کا اشتراک کیا. 

 .mountain2 {
پس منظر: یو آر ایل (img / ماؤنڈ 2.png)
مرکز مرکز؛
پس منظر کا سائز: کور؛
ٹرانسمیشن: اسکیل 3 ڈی (1.3، 1.3، 1.3)؛
دھندلاپن: 0.1؛
حرکت پذیری: سکالر 1.2s آسانی سے؛
حرکت پذیری بھر موڈ: فارورڈز؛
}

07. keyframe حرکت پذیری شامل کریں

keyframes اب تخلیق کیا جاتا ہے کہ اس کی وضاحت کرتا ہے. تحریک کے اختتام ریاست میں، یہ اختتام ریاست جگہ میں رکھا جائے گا. متن کو منتقل کر دیا گیا ہے، اور پہاڑوں کو ڈیزائن میں فٹ ہونے کے لئے، نیچے کی طرف اشارہ کیا جاتا ہے. 

 keyframes منتقل اپ {
100٪ {
ٹرانسمیشن: ترجمہ 3D (0، 0، 0)؛
دھندلاپن: 1؛
}
}

keyframes scaler {
100٪ {
ٹرانسمیشن: اسکیل 3 ڈی (1، 1، 1)؛
دھندلاپن: 1؛
}
}

generate CSS

ایک بڑی رعایت کے لئے سی ایس ایس پیدا کرنے کے لئے ایک ٹکٹ اٹھاو (تصویری کریڈٹ: مستقبل)

یہ مضمون اصل میں مسئلہ 289 میں شائع کیا گیا تھا ویب ڈیزائنر روایات اب فروخت پر . یہاں سبسکرائب کریں .

مزید پڑھ:

  • سی ایس ایس کے ساتھ SVG پر حرکت پذیری کو کیسے شامل کریں
  • خوشگوار ویب متحرک تصاویر کے لئے DOS اور Dons
  • سی ایس ایس کے سائز کے ساتھ کیسے ڈیزائن کرنا: ایک تعارف

کيسے - انتہائی مشہور مضامین

مخلوط میڈیا آرٹ ٹیوٹوریل: ڈیجیٹل آرٹ ورک پر پانی کے رنگ کس طرح

کيسے Sep 14, 2025

(تصویری کریڈٹ: نوومی vandoren) ایک آزاد فنکار کے طور پر، میں ایک مکمل �..

فوٹوشاپ میں ایک پرت پلٹائیں: ایک مکمل گائیڈ

کيسے Sep 14, 2025

ڈبل دیکھنا یہ تصویر اصل کے ساتھ فلپ اور مرکب کیا گیا ہے (تصویری کریڈ�..

گرو CMS کے ساتھ شروع کریں

کيسے Sep 14, 2025

(تصویری کریڈٹ: مستقبل) گرو ایک فرق کے ساتھ ایک مواد مینجمنٹ سسٹم (C..

مایا میں ریٹوپولوجی کو کیسے تیز کرنا

کيسے Sep 14, 2025

(تصویری کریڈٹ: انتونی وارڈ) مایا میں ریٹوپولوجی کو انجام دینے کی �..

ایڈوب XD کے ساتھ پروٹوٹائپ کی تعمیر

کيسے Sep 14, 2025

(تصویری کریڈٹ: مستقبل) معاصر ویب اور اے پی پی ڈیزائن میں اکثر اوقا..

انٹرایکٹو 3D نوع ٹائپ اثرات بنائیں

کيسے Sep 14, 2025

نوع ٹائپ نے ہمیشہ اوزار کے کسی بھی ڈیزائنر کے ہتھیاروں میں ایک اہم حصہ ا..

ایک مزاحیہ کور بنانے کے لئے روایتی اور ڈیجیٹل مہارت کو یکجا

کيسے Sep 14, 2025

سالوں کے لئے میں ڈیجیٹل کام کرکے دھمکی دے رہا تھا. پلاسٹک کی سطح پر پلاس�..

موسم سرما کے ماحول کو کیسے بنائیں

کيسے Sep 14, 2025

ایک ذاتی تصویر پر کام کرنا شروع کرنے سے پہلے میں عام طور پر تیار کام میں ..

اقسام