এনজিএমিট সহ অ্যাঙ্গুলারজেএস অ্যাপস অ্যানিমেটিং

অ্যাঙ্গুলারজেএস একটি সুপারহিরিক জাভাস্ক্রিপ্ট কাঠামো যা সিঙ্গল পেজ অ্যাপ্লিকেশন (এসপিএ) তৈরি করা খুব সহজ করে তোলে। এর উপরে অ্যাঙ্গুলারজেএস একটি মুষ্টিমেয় কৌণিক মডিউলগুলি নিয়ে আসে যা একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে ব্যবহার করা যেতে পারে। এই পোস্টে আমরা দেখতে পাচ্ছি কীভাবে কৌণিক দৃশ্যে পৃষ্ঠা রূপান্তর / অ্যানিমেশন যুক্ত করতে জনপ্রিয় এনজিএমিট ব্যবহার করতে হয়।

এনজিএমিট বিভিন্ন নির্দেশের সাথে এনজিআরপিট, এনজিভিউ, এনজিইনক্লুড, এনজিআইএফ, এনজিমেজেজ ইত্যাদি ব্যবহার করা যেতে পারে n

এই পোস্টে আমরা এনজিভিউ সহ অ্যানিমেশনগুলি ব্যবহার করব

এখানে আমরা অ্যাডোব থেকে বন্ধনী আইডিই ব্যবহার করছি তবে আপনি অন্যকে ব্যবহার করতে পারবেন না যেমন, সাব্লাইম টেক্সট, জেটব্রেইনস থেকে ওয়েবস্টোরম ইত্যাদি tor

বিঃদ্রঃ : আমাদের এইচটিএমএল পৃষ্ঠাগুলিকে একটি সুন্দর চেহারা দেওয়ার জন্য আমরা বুটসওয়াচ বুটস্ট্র্যাপ এপিআই ব্যবহার করব

প্রকল্পের কাঠামো:

বন্ধনী আইডিইতে নীচে প্রকল্প কাঠামো রয়েছে

প্রকল্পে ব্যবহৃত প্রতিটি ফাইলের সংক্ষিপ্ত বিবরণ এখানে দেওয়া হল

animation.css - প্রধান সিএসএস ফাইল যেখানে আমরা আমাদের পৃষ্ঠা অ্যানিমেশনগুলি সংজ্ঞায়িত করি

bootstrap.min.css - আমাদের দেওয়ার জন্য বুটস ওয়াচ বুটস্ট্র্যাপ ট্যাগ একটি সুন্দর চেহারা

config.js - প্রধান জাভাস্ক্রিপ্ট ফাইল যেখানে আমরা আমাদের কৌণিক মডিউলটি রাস্তা এবং নিয়ন্ত্রণকারীদের সাথে সংজ্ঞায়িত করি

শেলপেজ। html - এটি শেল পৃষ্ঠা যাতে অন্যান্য দর্শনগুলি গতিশীলভাবে লোড হবে

ভিউ 1 এইচটিএমএল, ভিউ 2 এইচটিএমএল, ভিউ 3 এইচটিএমএল - এটি আংশিক দর্শন যা শেলপেজে লোড হবে

অ্যানিমেশনগুলি কীভাবে প্রয়োগ করা হয়:

এনজিএমিট সিএসএস ক্লাসগুলি ভিউটিতে প্রবেশ করছে বা ছেড়ে চলেছে তার উপর নির্ভর করে বিভিন্ন কৌণিক নির্দেশিকায় প্রয়োগ করে

.ng-enter - এই সিএসএস ক্লাসটি পৃষ্ঠাটিতে যখনই লোড হয়ে যায় নির্দেশের উপর প্রয়োগ করে

.ng-leave - এই সিএসএস ক্লাসটি পৃষ্ঠাটি ছাড়ার সময় নির্দেশের উপর প্রয়োগ করে

আসুন প্রতিটি ফাইল একের পর এক চলুন

শেলপেজ। html

সাজান ফাংশন সি ++

শেলপেজ প্রয়োজনীয় সংস্থানগুলি লোড করে, শরীরে এনজি-অ্যাপ্লিকেশন প্রয়োগ করে এবং এনজিও-ভিউ যুক্ত করে গতিযুক্তরূপে ইনজেক্টগুলি ইনজেক্ট করতে।

config.js

কনফিগ ফাইলে, আমরা আমাদের কৌণিক মডিউলটি রুট এবং নিয়ামকগুলির সাথে সংজ্ঞায়িত করি।

মডিউল ট্রানজিশন অ্যাপ্লিকেশনটির দুটি নির্ভরতা রয়েছে: এনজিএমেট এবং এনজিআউটে

var রূপান্তর অ্যাপ = কৌণিক.মডিউল ('রূপান্তর অ্যাপ্লিকেশন', ['এনজিএনেট', 'এনজিআরউটি']) ট্রানজিশন অ্যাপকনফাইগ (ফাংশন ($ রুটপ্রভাইডার) $ $ রুটপ্রভাইডার। যখন ('/', {টেমপ্লেট ইউআরএল: 'পার্টিয়ালস / ভিউ1 এইচটিটিএমএল' , কন্ট্রোলার: 'ভিউ 1 কনট্রোলার'}) .যখন ('/ ভিউ 2', {টেমপ্লেটআরল: 'পার্টিয়াল / ভিউ 2 এইচটিএমএল', কন্ট্রোলার: 'ভিউ 2 কনট্রোলার'})। যখন ('/ ভিউ 3', {টেমপ্লেটআরল: 'পার্টিয়াল / ভিউ 3)। এইচটিএমএল ', কন্ট্রোলার:' ভিউ 3 কনট্রোলার '})}) রূপান্তর অ্যাপ্লিকেশন। কন্ট্রোলার (' ভিউ 1 কনট্রোলার ', ফাংশন ($ স্কোপ) {$ স্কোপ.সিএসসিএলস =' ভিউ 1 '}) ট্রানজিশন অ্যাপকন্ট্রোলার (' ভিউ 2 কনট্রোলার ', ফাংশন ($ স্কোপ) $ স্কোপ.সিএসসি ক্লাস = 'ভিউ 2'}) ট্রান্সফিশন অ্যাপকন্ট্রোলার ('ভিউ 3 কনট্রোলার', ফাংশন ($ স্কোপ) {$ স্কোপ.সিএসসি ক্লাস = 'ভিউ 3'})

আমরা তিনটি আংশিক দর্শন (ভিউ 1, ভিউ 2, ভিউ 3) সংজ্ঞায়িত করেছি যা ইউআরএলের উপর নির্ভর করে শেলপেজে ইনজেকশন দেওয়া হবে। সম্মানজনক কন্ট্রোলার একটি সিএসএস ক্লাস অ্যাট্রিবিউট সেট করে, যা সিএসএস ক্লাসের নাম, যা এনজি-ভিউতে প্রয়োগ করা হবে। আমরা এই সিএসএস ক্লাসে আমাদের অ্যানিমেশনগুলি সংজ্ঞায়িত করব যা প্রতিটি পৃষ্ঠাকে বিভিন্ন অ্যানিমেশন সহ লোড করবে।

আংশিক পৃষ্ঠাগুলি view1.html, view2.html, view3.html

আংশিক পৃষ্ঠাগুলিতে তেমন কিছুই নেই, কেবল কিছু পাঠ্য এবং অন্যান্য দর্শনের লিঙ্ক

ভিউ 1 এইচটিএমএল

এটি ভিউ 1
  দেখুন 2   দেখুন 3 

view2.html

এটি ভিউ 2
  দেখুন 1   দেখুন 3 

view3.html

এটি ভিউ 3
  দেখুন 1   দেখুন 2 

মনে রাখবেন যে এই তিনটি এইচটিএমএল ফাইলগুলি আংশিক পৃষ্ঠাগুলি যা কনফিগার.জেএস ফাইলে আমরা সংজ্ঞায়িত করেছি এমন ইউআরএল অনুসারে শেলপেজ.ইচটিএমএল ইনজেকশন করা হবে

স্টাইল এবং অ্যানিমেশন সংজ্ঞায়িত:

আসুন এতে সিএসএস প্রয়োগ করে আমাদের দৃষ্টিভঙ্গিতে কিছু জীবন দিন

জাভাতে টোকেন কী?

.ভিউ {নীচে: 0 প্যাডিং-শীর্ষ: 200 পিক্স অবস্থান: নিখুঁত পাঠ্য-সারিবদ্ধ: কেন্দ্র শীর্ষ: 0 প্রস্থ: 100%}। একটি a মার্জিন-শীর্ষ: 50px view। ভিউ এইচ 1 {ফন্ট-আকার: 60px x # শিরোনাম { রঙ: # 333 অবস্থান: নিখুঁত পাঠ্য-প্রান্তিককরণ: কেন্দ্রের শীর্ষ: 50px প্রস্থ: 100%} / * আংশিক দর্শন পৃষ্ঠাগুলির জন্য পটভূমি এবং পাঠ্য রঙ (ভিউ 1, ভিউ 2, ভিউ 3) ------------- ------------------------------------------------------ * * / .ভিউ 1 {ব্যাকগ্রাউন্ড: # বেফ 2 ডিগ্রি রঙ: # 00907c view .ভিউ 2 {পটভূমি: # ডি 4 ডি 0 ইআর রঙ: # 55316f} .ভিউ 3 {পটভূমি: # এফএফসিবিএ 4 রঙ: আরজিবা (149, 95, 40, 0.91)

বিভিন্ন দর্শনগুলির মধ্যে একটি পরিষ্কার রূপান্তর করতে, আমরা CSS জেড-ইনডেক্স সম্পত্তি সেট করব

.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}

এখন আমাদের অ্যানিমেশনগুলি সংজ্ঞায়িত করার সময় এসেছে

বাম এনিমেশন স্লাইড

/ * স্লাইড আউট বাম * * / @keyframes স্লাইডআউট লেফট {থেকে {রূপান্তর: অনুবাদ অনুবাদ (-100%)}} @ -মোজ-কীফ্রেমস স্লাইডআউট লেফট L থেকে {-মোজ-ট্রান্সফর্ম: ট্রান্সলেটএক্স (-100%)}} @ -উববিত-কিফ্রেমস স্লাইডআউট লেফট {থেকে {-ওয়েবকিট-ট্রান্সফর্ম: ট্রান্সলেট এক্স (-100%)}}

স্কেল আপ অ্যানিমেশন

/ * স্কেল আপ * / @ কিফ্রেমস স্কেলআপ + {থেকে {অস্বচ্ছতা: 0.3 টি রূপান্তর: স্কেল (0.8)}-@ -মোজ-কীফ্রেমস স্কেলআপ {acity অস্বচ্ছতা থেকে: 0.3-মমজ-ট্রান্সফর্ম: স্কেল (0.8)}} @-ওয়েবেকিট- কীফ্রেমস স্কেলআপ {থেকে {অস্বচ্ছতা: 0.3-ওয়েবেকিট-ট্রান্সফর্ম: স্কেল (0.8)}}

ডান অ্যানিমেশন থেকে স্লাইড ইন

/ * ডান দিক থেকে স্লাইড * / @ কিফ্রেমস স্লাইডআইএনআরাইট {থেকে {ট্রান্সফর্ম: ট্রান্সলেটএক্স (100%)} থেকে {ট্রান্সফর্ম: ট্রান্সলেটএক্স (0)}-@ -মোজ-কীফ্রেমস স্লাইডআইনরাাইট {থেকে {-মোজ-ট্রান্সফর্ম: ট্রান্সলেটএক্স (100) %)} থেকে mo -মোজ-ট্রান্সফর্ম: ট্রান্সলেটেক্স (0)}} @ -webkit-keyframes স্লাইডআইএনআরাইট {থেকে we-ওয়েবেকিট-ট্রান্সফর্ম: ট্রান্সলেটএক্স (100%)} থেকে {-ওয়েবেকিট-ট্রান্সফর্ম: ট্রান্সলেটএক্স (0)}}

নীচে অ্যানিমেশন থেকে স্লাইড ইন

/ * নীচে থেকে স্লাইড * / @ কিফ্রেমস স্লাইডইনআপ {থেকে {ট্রান্সফর্ম: ট্রান্সলেটওয়্যার (100%)} থেকে {ট্রান্সফর্ম: ট্রান্সলেটওয়্যার (0)}-@ -মোজ-কীফ্রেমস স্লাইডইনআপ {থেকে {-মোমজ-ট্রান্সফর্ম: ট্রান্সলেট ওয়াই (100) %)} থেকে mo -মোজ-ট্রান্সফর্ম: ট্রান্সলেট ওয়াই (0)}} @ -webkit-keyframes স্লাইডআইএনইউপি {থেকে we-ওয়েবেকিট-ট্রান্সফর্ম: ট্রান্সলেটারওয়াই (100%)} থেকে {-ওয়েবেকিট-ট্রান্সফর্ম: ট্রান্সলেটওয়্যার (0)}}

ঘোরান এবং পতন অ্যানিমেশন

/ * ঘোরানো এবং পড়ুন * / @ -webkit-keyframes রোটেটফ্যাল {0% we -উবকিট-ট্রান্সফর্ম: রোটেটজেড (0deg)} 20% we-ওয়েবেকিট-ট্রান্সফর্ম: রোটেটজেড (10 ডিগ্রি)-ওয়েবেকিট-এনিমেশন-টাইমিং-ফাংশন: সহজলভ্য- } 40% out -webkit-transform: rotateZ (17deg) de 60% we -webkit-transform: rotateZ (16deg)} 100% we-ওয়েবেকিট-ট্রান্সফর্ম: ট্রান্সলেটওয়াই (100%) রোটেটজেড (17deg)}} @-মোজ -কিফ্রেমস রোটেটফ্যাল {0% mo -মোজ-ট্রান্সফর্ম: রোটেটজেড (0deg)} 20% mo -মোজ-ট্রান্সফর্ম: রোটেটজেড (10 ডিগ্রি) -মোজ-অ্যানিমেশন-সময়-ফাংশন: স্বাচ্ছন্দ্য} 40% mo-মোজ-ট্রান্সফর্ম: রোটেটজেড (17deg)} 60% mo-মোজ-ট্রান্সফর্ম: রোটেটজেড (16deg)} 100% mo -মোজ-ট্রান্সফর্ম: ট্রান্সলেটওয়াই (100%) রোটেটজেড (17deg)}} @ কিফ্রেমস রোটেটফ্যাল {0% {রূপান্তর: রোটেটজেড (0 ডিগ্রি) } 20% {রূপান্তর: রোটেটজেড (10deg) অ্যানিমেশন-সময়করণ-ফাংশন: স্বাচ্ছন্দ্য} 40% {রূপান্তর: রোটেটজেড (17deg)} 60% {রূপান্তর: রোটেটজেড (16deg)} 100% {রূপান্তর: অনুবাদক (100%) রোটেটজেড (17 ডিগ্রি)}

সংবাদপত্র অ্যানিমেশন ঘোরান

/ * আবর্তিত পত্রিকা * / @ -webkit- কীফ্রেমগুলি আবর্তন করুনআউট নিউজপ্যাপার {থেকে {-ওয়েবেকিত-ট্রান্সফর্ম: ট্রান্সলেটজেড (-3000px) রোটেটজেড (360deg) ধোঁয়াশা: 0}} @ -মোজ-কীফ্রেমগুলি রোটেটআউটনউইউসপ্রেস-টু ট্রান্সফর্ম: (-3000px) রোটেটজেড (360deg) অস্বচ্ছতা: 0}} @ কিফ্রেমগুলি আবর্তনআউট নিউজপেপার {থেকে {রূপান্তর: ট্রান্সলেটজেড (-3000px) রোটেটজেড (360deg) অস্বচ্ছতা: 0}}

অ্যানিমেশন প্রয়োগ করা:

আমাদের আগে সংজ্ঞায়িত অ্যানিমেশনগুলি প্রয়োগ করার সময়

1 অ্যানিমেশন দেখুন

/ * পৃষ্ঠার জন্য 1 অ্যানিমেশন দেখুন এবং প্রবেশ করুন * /। ভিউ 1.ng-ছেড়ে দিন we -উবকিট-অ্যানিমেশন: স্লাইডআউট লেফট 0.5 এস-এ-মজ-অ্যানিমেশন উভয়ই: স্লাইডআউট লেফট 0.5 এস উভয়ই স্বাচ্ছন্দ্যে অ্যানিমেশন: স্লাইডআউট লেফট 0.5 উভয়ই স্বাচ্ছন্দ্য -in} .view1.ng-enter {-ওয়েবেকিট-অ্যানিমেশন: স্কেলআপ 0.5 এস উভয়ই ইজ-ইন-মোজ-অ্যানিমেশন: স্কেলআপ 0.5 ই উভয় স্বাচ্ছন্দ্যে অ্যানিমেশন: স্কেলআপ 0.5s উভয়ই স্বাচ্ছন্দ্যে}

2 অ্যানিমেশন দেখুন

/ * পৃষ্ঠা প্রস্থানের জন্য 2 অ্যানিমেশন দেখুন এবং প্রবেশ করুন * / .view2.ng-leave {-webkit- রূপান্তর-উত্স: 0% 0% -উবকিট-অ্যানিমেশন: মোড়ক-রূপান্তর-উত্স: 0% উভয়ই ঘোরান 0% -মোজ-অ্যানিমেশন: রোটেটফাল 1 এস উভয়ই স্বাচ্ছন্দ্যে রূপান্তর-উত্স: 0% 0% অ্যানিমেশন: রোটেটফ্যাল 1 এস উভয়ই স্বাচ্ছন্দ্যে view .ভিউ 2.ng- প্রবেশ করুন {-ওয়েবেকিট-অ্যানিমেশন: স্লাইডআইনরাইট 0.5s উভয়ই স্বাচ্ছন্দ্যে - মোজ-অ্যানিমেশন: স্লাইডআইএনআরাইট 0.5s উভয়ই স্বাচ্ছন্দ্যে অ্যানিমেশন: স্লাইডআইএনআরাইট 0.5s উভয়ই স্বাচ্ছন্দ্যে}

3 অ্যানিমেশন দেখুন

/ * পৃষ্ঠা প্রস্থানের জন্য 3 অ্যানিমেশন দেখুন এবং প্রবেশ করুন * / .view3.ng-ছেড়ে দিন we-ওয়েবেকিট-ট্রান্সফর্ম-উত্স: 50% 50% -উবকিট-অ্যানিমেশন: ঘোরানআউটনউইউজ পেপার .5 উভয়ই ইজ-ইন-মোজ-ট্রান্সফর্ম-উত্স: 50 % 50% -মোজ-অ্যানিমেশন: রোটেটআউটনিউজপ্যাপার .5 উভয়ই স্বাচ্ছন্দ্যে রূপান্তর-উত্স: 50% 50% অ্যানিমেশন: ঘোরানোআউটনিউজপ্যাপার .5 উভয়ই স্বাচ্ছন্দ্যে view .ভিউ 3.ng-প্রবেশ করুন {-উইবকিট-অ্যানিমেশন: স্লাইডইনআপ 0.5s উভয়ই স্বাচ্ছন্দ্যে -আন-মোজ-অ্যানিমেশন: স্লাইডইনআপ 0.5 এস উভয়ই স্বাচ্ছন্দ্যে অ্যানিমেশন: স্লাইডইনআপ 0.5s উভয়ই স্বাচ্ছন্দ্যে-

আমরা সমস্ত পরিবর্তন সঙ্গে সম্পন্ন করা হয়। এখন অ্যাপ্লিকেশনটি চালানোর সময় এসেছে

অ্যাপ্লিকেশন চলমান

অ্যাপ্লিকেশন চালানোর সময়, আপনাকে নীচের পৃষ্ঠাটি সহ উপস্থাপন করা হবে:

লিঙ্কগুলিতে ক্লিক করুন এবং আপনি আংশিক পৃষ্ঠাগুলি প্রবেশ এবং ছেড়ে যাওয়ার সময় অ্যানিমেশনগুলি খেলতে পারবেন।

অন্যান্য বিভিন্ন অ্যানিমেশন ব্যবহার করা যেতে পারে। এছাড়াও, সম্ভাব্য প্রভাবগুলির একটি অপ্রতিরোধ্য সেটটি এখানে হতে পারে: http://tympanus.net/ ডেভেলপমেন্ট / পেজ ট্রান্সশিশনস /

কোডটি ডাউনলোড করুন এবং নিজে চেষ্টা করুন

[বাটনলিডস ফর্ম_ টাইটেল = 'ডাউনলোড কোড' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? মিডিয়া_ফাইল_িড = 80450196 কোর্স_আইডি = 283 বাটন_টেক্সট = 'ডাউনলোড কোড']

আমি আশা করি আপনি এনজিএমেট ব্লগের সাথে উপরের অ্যানিমেশনটি পছন্দ করেছেন। আপনি যদি কৌণিক জেএসের গভীরে ডুব দিতে চান তবে আমি আপনাকে সুপারিশ করব কেন আমাদের দিকে নজর নেই কোর্স পৃষ্ঠা। এডুরেকাতে কৌণিক জেএস শংসাপত্র প্রশিক্ষণ আপনাকে লাইভ ইন্সট্রাক্টর নেতৃত্বাধীন সেশন এবং হ্যান্ড-অন প্রশিক্ষণের মাধ্যমে বাস্তব জীবনের ব্যবহারের ক্ষেত্রে ব্যবহার করে কৌণিক জেএসে বিশেষজ্ঞ তৈরি করবে।

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।

সম্পর্কিত পোস্ট:

স্যাক্স পার্সার ব্যবহার করে এক্সএমএল ফাইলগুলি পার্সিং করা