স্ক্রোলজ্যাগিক: মজাদার ওয়েব ডিজাইন

ওয়েব ডিজাইনে একটি প্রবণতা এমন স্টাইলের মতো যা সাধারণত ব্যবহারকারীদের দ্বারা অস্থায়ী সময়কালে দৃ strongly়তার সাথে গৃহীত সাইটগুলি অনুধাবনের জন্য গৃহীত হয়। ২০১ 2016 সালে এ পর্যন্ত প্রবণতার অংশ এবং স্পষ্টতই, ২০১ in সালে স্বর সেট করতে থাকবে, প্রচুর স্ক্রোল সহ অ্যানিমেশন এবং দীর্ঘ বিভাগ।

এটি কোনও গোপন বিষয় নয় যে এই স্টাইলটি ব্যবহারকারীর জন্য বেশ আকর্ষণীয় এবং মজাদার, অ্যানিমেশনগুলির সাহায্যে আমরা সাইটটি ন্যাভিগেট করে তুলতে পারি স্বজ্ঞাত এবং যতক্ষণ না তারা ভালভাবে ব্যবহার করা যায় ততক্ষণ বিনোদনমূলক। এই কারণে আমরা jQuery স্ক্রোলম্যাগিক প্লাগইন ব্যবহার করে আপনার ওয়েবসাইটে অ্যানিমেটেড স্ক্রোলগুলি অন্তর্ভুক্ত করার জন্য একটি টিউটোরিয়াল তৈরি করেছি।

স্ক্রোলম্যাগিক: মজাদার ওয়েব ডিজাইন

স্ক্রোলম্যাগিক হ'ল ওয়েবসাইটগুলি সরানোর সময় মিথস্ক্রিয়া অর্জনের জন্য জাভাস্ক্রিপ্টে তৈরি একটি লাইব্রেরি। এটি এর পূর্বসূরি সুপারসক্রোল্লোরামার সম্পূর্ণ পুনর্লিখন এবং এর আর্কিটেকচারটি সহজেই কাস্টমাইজেশন এবং এক্সটেনসিবিলিটি সরবরাহ করে এমন প্লাগইনগুলির উপর ভিত্তি করে।

আমরা নীচের কিছু জিনিস বাস্তবায়ন করতে চাইলে এটি আদর্শ:

• সাইটের অবস্থান বা স্থানচ্যুতির ভিত্তিতে অ্যানিমেশন.এনিমেশনটি ট্রিগার করুন বা স্ক্রোলটির গতিবিধির সাথে এটি সিঙ্ক্রোনাইজ করুন much

স্ক্রোলম্যাগিক বৈশিষ্ট্য

• অপ্টিমাইজড পারফরম্যান্স, এটি হালকা, নমনীয় এবং এক্সটেনসিটির অনুমতি দেয় ইভেন্ট ইভেন্ট ম্যানেজমেন্ট এবং অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং এটি অ্যাডাপটিভ ওয়েব ডিজাইনকে সমর্থন করে এটি উভয় দিকের চলাচলের জন্য সমর্থন করে (অনুভূমিক এবং উল্লম্ব) এতে ধারকগুলির মধ্যে চলাচলের জন্য সমর্থন রয়েছে (ডিভি) এমনকি এক পৃষ্ঠায় একাধিক I এটি ব্রাউজারগুলির জন্য পুরোপুরি কাজ করে: ফায়ারফক্স 26+, ক্রোম 30+, সাফারি 5.1+, অপেরা 10+, আই 9+। এর গিটহাব সংগ্রহস্থলে এটির বিশদ ডকুমেন্টেশন এবং অনেক অ্যাপ্লিকেশন উদাহরণ রয়েছে।

স্ক্রোলম্যাগিক পান

এটি বিভিন্ন উপায়ে এটি পাওয়া যায়।

1: গিটহাব

গিট ক্লোন গিট: //github.com/janpaepke/ScrollMagic.git

2: বোর

বোর ইনস্টল করুন স্ক্রোলমাজিক

3: নোড প্যাকেজ ম্যানেজার

এনপিএম ইনস্টল করুন স্ক্রোলম্যাগিক

4: সিডিএন

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

আপনি আউটলুকে কোনও ইমেলের নকশা কীভাবে কাস্টমাইজ করবেন তাও পড়তে পারেন

ইনস্টলেশন ও ব্যবহার

ইনস্টলেশনটি বেশ সহজ, আমরা কেবল HTML টি ফাইলগুলিতে কার্নেল ফাইলটি অন্তর্ভুক্ত করি যেখানে আমরা এটি ব্যবহার করতে চাই।

;

ব্যবহারের জন্য, প্লাগইন একটি নিয়ামক-ভিত্তিক নকশার প্যাটার্ন সরবরাহ করে, যেখানে এক বা একাধিক দৃশ্যের যোগ করা হয়। এই দৃশ্যগুলি নির্দিষ্ট পয়েন্টে চলে যাওয়ার পরে পাত্রে কী ঘটে তা সংজ্ঞায়িত করতে ব্যবহৃত হয়।

এটি একটি প্রাথমিক উদাহরণ হবে:

// init কন্ট্রোলার ভার কন্ট্রোলার = নতুন স্ক্রোলম্যাগিক C কন্ট্রোলার (); // একটি দৃশ্য নতুন স্ক্রোলম্যাগিক তৈরি করুন। দৃশ্য ({সময়কাল: 100, // 100px অফসেটের স্ক্রোল দূরত্বের জন্য দৃশ্যটি শেষ হওয়া উচিত: 50 // 50px for স্ক্রোল করার পরে এই দৃশ্যটি শুরু করুন) সেটপিন ("# আমার-স্টিকি- উপাদান ") // দৃশ্যের সময়কালের জন্য উপাদানগুলিকে পিন করে.ডডটো (নিয়ামক); // দৃশ্যটি নিয়ন্ত্রণকারীকে বরাদ্দ করুন

আরও উন্নত উদাহরণটি হ'ল, একাধিক অফসেট অর্জন করুন, এর উত্স কোডটি হ'ল:

function (ফাংশন () {// ডকুমেন্ট প্রস্তুতের জন্য অপেক্ষা করুন // init কন্ট্রোলার ভার কন্ট্রোলার = নতুন স্ক্রোলম্যাগিক C কন্ট্রোলার (); // বিল্ড টিউন ভার টুইন = টিউনম্যাক্স.টো ("# অ্যানিমেট", 0.5, {স্কেল: 3, সহজ: লিনিয়ার.সিজিট নন}); // বিল্ড সিন ভার দৃশ্য = নতুন স্ক্রোলম্যাগিক।সীন ({ট্রিগ্রেমেন্ট: "# মাল্টিডাইরেক্ট", সময়কাল: 400, অফসেট: 250}).সেটটিউইন (মাঝখানে)। সেটপিন ("# অ্যানিমেট")। addIndicators ({নাম: "পুনরায় আকার দিন" //) // সূচকগুলি যোগ করুন (প্লাগইন প্রয়োজন) TdTTo (নিয়ন্ত্রক); // আরআর কন্ট্রোলার অনুভূমিক ভার কন্ট্রোলার_এইচ = নতুন স্ক্রোলম্যাগিক.কন্ট্রোলার ({উল্লম্ব: মিথ্যা build); // বিল্ডিংয়ের মধ্যে অনুভূমিক ভার tween_h = TweenMax.to ("# অ্যানিমেট", 0.5, {ঘূর্ণন: 360, স্বাচ্ছন্দ্য: লিনিয়ার.সেজটোন নন}); // বিল্ড দৃশ্যের দৃশ্য দৃশ্য_h = নতুন স্ক্রোলম্যাগিক.সাইন ({সময়কাল: 700}).সেটটাইন (টিউন_এইচ)। সেটপিন ("# অ্যানিমেট").এডিডিআইডিফিকেশনস ({নাম: "ঘোরান"}) // সূচক যুক্ত করুন (প্লাগইন প্রয়োজন).এডডিটিও (নিয়ন্ত্রক_হ);});

প্লাগইন ডকুমেন্টেশনে আপনি তাদের উত্স কোড সহ আরও অনেক উদাহরণ পেতে পারেন।

আমরা আপনাকে ইউএসবি স্টিক ব্যবহার করে উইন্ডোজ 10 এর একটি পরিষ্কার ইনস্টলেশন কীভাবে করব CO