اسکرولماجک: تفریحی ویب ڈیزائن

ویب ڈیزائن میں ایک رجحان اس انداز کی طرح ہوتا ہے جسے سائٹس کے ادراک کے لئے اپنایا گیا ہے جسے عام طور پر عارضی ادوار میں صارفین کی طرف سے سختی سے قبول کیا جاتا ہے۔ 2016 میں اب تک کے رجحانات کا ایک حصہ اور ، بظاہر ، 2017 میں اپنا لہجہ مرتب کرنا جاری رکھے گا ، بہت سارے اسکرول والے متحرک تصاویر اور لمبے حصے ہیں۔

یہ کوئی راز نہیں ہے کہ صارف کے لئے یہ انداز کافی حد تک دلکش اور دل لگی ہے ، متحرک تصاویر کے ذریعہ ہم سائٹ کو بدیہی اور تفریحی بنا سکتے ہیں جب تک کہ وہ اچھی طرح سے استعمال نہ ہوں۔ اسی وجہ سے ہم نے jQuery اسکرول میجک پلگ ان کا استعمال کرتے ہوئے ، آپ کی ویب سائٹ پر متحرک اسکرول کو شامل کرنے کے لئے ایک ٹیوٹوریل تشکیل دیا ہے۔

اسکرول میجک: تفریحی ویب ڈیزائن

اسکرول میجک ایک لائبریری ہے جو جاوا اسکرپٹ میں بنائی گئی ویب سائٹ کو چلاتے وقت بات چیت کو حاصل کرتی ہے۔ یہ اس کے پیشرو سپر اسٹروکلوگرام کا مکمل رائٹر ہے اور اس کا فن تعمیر ان پلگ ان پر مبنی ہے جو آسانی سے تخصیص اور توسیع کی پیش کش کرتے ہیں۔

اگر ہم مندرجہ ذیل چیزوں میں سے کچھ پر عمل درآمد کرنا چاہتے ہیں تو یہ مثالی ہے:

• سائٹ کی پوزیشن یا نقل مکانی پر مبنی حرکت پذیری ۔ایینییمشن کو متحرک کریں یا اس کی کتاب کی نقل و حرکت کے ساتھ ہم وقت سازی کریں۔ زیادہ کوشش کے بغیر پیرالاکس اثر شامل کریں۔ لامحدود طومار کے ساتھ ایک صفحہ بنائیں ، ایجیکس کے ساتھ مواد کی لوڈنگ کو ہینڈل کریں۔

اسکرول میجک خصوصیات

• بہتر کارکردگی ، یہ ہلکی ، لچکدار اور قابل توسیع کی اجازت دیتی ہے۔ایونٹ مینجمنٹ اور آبجیکٹ اورینٹڈ پروگرامنگ ۔یہ انکولی ویب ڈیزائن کی حمایت کرتا ہے۔ اس میں دونوں سمتوں میں نقل و حرکت کی حمایت حاصل ہے (افقی اور عمودی) اس میں کنٹینرز (ڈوی) میں نقل و حرکت کی حمایت ہے۔ یہاں تک کہ ایک صفحے پر متعدد۔یہ براؤزرز کے لئے بالکل کام کرتا ہے: فائر فاکس 26+ ، کروم 30+ ، سفاری 5.1+ ، اوپیرا 10+ ، یعنی 9+۔ اس کے گیٹ ہب مخزن میں ، اس میں تفصیلی دستاویزات اور بہت سی درخواست کی مثالیں موجود ہیں۔

اسکرول میجک حاصل کریں

اسے مختلف طریقوں سے حاصل کرنے کے لئے دستیاب ہے۔

1: گٹ ہب

گٹ کلون گٹ: //github.com/janpaepke/ScrollMagic.git

2: بوور

bover انسٹال کریں scrolmagic

3: نوڈ پیکیج مینیجر

npm انسٹال کریں scrolmagic

4: سی ڈی این

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/crolMagic.min.js

آپ یہ بھی پڑھ سکتے ہیں کہ آؤٹ لک میں ای میل کے ڈیزائن کو کس طرح اپنی مرضی کے مطابق بنایا جائے

تنصیب اور استعمال

انسٹالیشن بہت آسان ہے ، ہم صرف ان HTML فائلوں میں دانی فائل کو شامل کرتے ہیں جہاں ہم اسے استعمال کرنا چاہتے ہیں۔

؛

استعمال کے ل، ، پلگ ان ایک کنٹرولر پر مبنی ڈیزائن کا نمونہ فراہم کرتا ہے ، جس میں ایک یا زیادہ مناظر شامل کیے جاتے ہیں۔ یہ مناظر اس بات کی وضاحت کے لئے استعمال ہوتے ہیں کہ کنٹینر میں کیا ہوتا ہے جب وہ کسی خاص نقطہ پر منتقل ہوجاتے ہیں۔

یہ ایک بنیادی مثال ہوگی۔

// init کنٹرولر ور کنٹرولر = نیا ScrolMagic.Controller ()؛ // ایک منظر نیا بنائیں ScrolMagic.Scene ({مدت: 100، // یہ منظر 100px آفسیٹ کے طومار کے فاصلے تک قائم رہنا چاہئے: 50 // اس منظر کو 50px for تک طومار کرنے کے بعد شروع کریں) عنصر ") // منظر کی مدت کے ل element عنصر کو پنوں میں شامل کریں. شامل کریں (کنٹرولر)؛ // منظر کو کنٹرولر کو تفویض کریں

اس سے زیادہ اعلی درجے کی مثال یہ ہوگی کہ ، متعدد آفسیٹ حاصل کریں ، اس کا ماخذ کوڈ یہ ہوگا:

function (فنکشن () {// دستاویز کے لئے تیار انتظار کریں // ابتداء کنٹرولر ور کنٹرولر = نیا اسکرول میگک۔ کنٹرولر ()؛ // بلٹ ٹیوین ور ٹین = ٹائین میکس ڈاٹ ٹی او ("# متحرک" ، 0.5 ، {پیمانہ: 3 ، آسانی: لکیری ڈرائزٹون})؛ // بل sceneڈ منظر وار منظر = نیا اسکرول میگک۔سکین ({ٹرگر ایلیمنٹ: "# ملٹی ڈائریکٹ" ، دورانیے: 400 ، آفسیٹ: 250}). سیٹ ٹین (درمیان). سیٹپین ("# متحرک")۔ addIndicators ({name: "resize"}) // اشارے شامل کریں (پلگ ان کی ضرورت ہے).ddTo (کنٹرولر)؛ // init کنٹرولر افقی var controller_h = new ScrolMagic.Controller ({عمودی: جھوٹا})؛ // بل tنگ افقی ویئر tween_h = TweenMax.to ("# متحرک"، 0.5، {گردش: 360، آسانی: Linear.easeNone})؛ // بلٹ منظر var منظر_h = نیا اسکرول میجک.سیسی ({مدت: 700}). سیٹ ٹین (tween_h)۔ سیٹ پین ("# متحرک"). ایڈی انڈیکیٹر ({نام: "گھمائیں"}) // اشارے شامل کریں (پلگ ان کی ضرورت ہے)۔ ایڈ ڈیٹو (کنٹرولر_ح)؛})؛

پلگ ان دستاویزات میں آپ کو ان کے سورس کوڈ کے ساتھ اور بھی بہت سی مثالیں مل سکتی ہیں۔

ہم آپ کو سفارش کرتے ہیں کہ USB اسٹک کا استعمال کرتے ہوئے ونڈوز 10 کی صاف انسٹالیشن کیسے کریں