Tag Archives: Effect

JQuery : জেকুএরি

জেকয়ারি এফেক্ট মেথডস। jQuery Effect Methods Reference

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকয়ারি এফেক্ট মেথড
নয়ন চন্দ্র সরকার

জেকয়ারি হল এমন একটি জাভাস্ক্রিপ্ট লাইব্রি যা সহজ, ছোট এবং সমৃদ্ধ এবং যা, এইচ টি এম এল ডকুমেন্ট গুলোকে একটা এ পি আই এর মাধ্যমে বিভিন্ন ব্রাউজার দক্ষতা সহকারে হস্তচালন করতে সাহায্য করে। নিচে এর এফেক্ট গুলো আলোচনা করা হল।

জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।

“animate ( ) মেথডঃ
এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।

clearQueue ( ) মেথডঃ
এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।

Delay( ) মেথডঃ
এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।

Dequeue ( ) মেথডঃ
এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।

FadeIn ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।

Fadeout ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।

fadeTo ( ) মেথডঃ
এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।

fadeToggle ( ) মেথডঃ
এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।

Finish ( ) মেথডঃ
এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।

Hide ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।

Queue ( ) মেথডঃ
এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।

Show ( ) মেথডঃ
এটা সো করায়

Slidedown ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।

Slideup ( ) মেথডঃ
এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।

Stop ( ) মেথডঃ
এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।
Toggle ( ) মেথডঃ
এটা hide() এবং show() এর মধ্যে তগল করে

jQuery-001 । জে কুয়েরি - ০০১

jQuery ইফেক্টস – স্লাইড ইফেক্ট। jQuery Effects – Sliding

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আলামিন মনির

 

JQuery দিয়ে আপনি বিভিন্ন উপাদানের একটি স্লাইডার প্রভাব তৈরি করতে পারেন.

jQuery এর নিম্নলিখিত স্লাইড পদ্ধতি আছে:

jQuery slideDown()

JQuery এর slideDown () মেথড প্রদর্শন করে।

jQuery slideUp()

JQuery এর slideUp () মেথড প্রদর্শন করে।

jQuery slideToggle()

JQuery এর SlideToggle () মেথড প্রদর্শন করে।

তিনটি পদ্ধতি ধাপে ধাপে নিম্নে আলোচনা করা হলঃ

 

jQuery এর slidedown () পদ্ধতি

JQuery এর slidedown() মেথড এটি দিয়ে উপাদান নিচের দিকে স্লাইড করে।

Syntax

$(selector).slideDown(speed,callback);

বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে slidedown () মেথড দেখানো হল:

$("#flip").click(function(){
    $("#panel").slideDown();
});

ফলাফল :  slideDown()

 

jQuery এর slideUp () পদ্ধতি

JQuery এর slideUp () মেথডটি একটি উপাদানকে উপরের দিকে স্লাইড করে।
Syntax

$(selector).slideUp(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে slideUp () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideUp();
});

ফলাফল : slideUp()

 

slideToggle () পদ্ধতি

JQuery এর slideToggle () মেথড slidedown () এবং slideUp () পদ্ধতির মধ্যে toggles করে।

যে সকল উপাদানের স্লাইড নিচে slid হয়েছে, slideToggle () তাদের স্লাইড হবে

যে সকল উপাদানের স্লাইড আপ slid হয়েছে, slideToggle () তাদের নিচে স্লাইড হবে.

Syntax

$(selector).slideToggle(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড.
নিম্নলিখিত উদাহরণে slideToggle () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideToggle();
});

ফলাফল : slideToggle()

 

jQuery-001 । জে কুয়েরি - ০০১

jQuery ইফেক্টস – জাপ্সা ইফেক্ট । jQuery Effects – Fading

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আলামিন মনির

 

jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হলঃ

JQuery দিয়ে আপনি একটি লেখাকে দৃশ্যমানতা এবং এই উপাদানটি আউট/বিবর্ণ করতে পারেন।

jQuery এর নিম্নলিখিত বিবর্ণ পদ্ধতি আছে:

fadeIn()

JQuery এর FadeIn () মেথড প্রদর্শন করে।

jQuery fadeOut()

JQuery এর Fadeout () মেথড প্রদর্শন করে।

jQuery fadeToggle()

JQuery এর fadeToggle () মেথড প্রদর্শন করে।

jQuery fadeTo()

JQuery এর fadeTo () মেথড প্রদর্শন করে।

 

jQuery এর FadeIn () পদ্ধতি

JQuery তে FadeIn () মেথডটি লুকানো উপাদান দেখতে ব্যবহার করা হয়।

Syntax 
$(selector).fadeIn(speed,callback);

আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে FadeIn () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

ফলাফল : fadeIn()

 

jQuery এর fadeout () পদ্ধতি

JQuery এর fadeout () মেথড দিয়ে একটি দৃশ্যমান উপাদানকে আউট করতে ব্যবহার করা হয়।

Syntax 
$(selector).fadeOut(speed,callback);

 

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeout () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

ফলাফল : fadeOut()

 

jQuery এর fadeToggle () পদ্ধতি

JQuery এর fadeToggle () মেথড হচ্ছে FadeIn () এবং fadeout () পদ্ধতির মধ্যে পার্থক্য।

উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার বিবর্ণ করে দেয়।

উপাদান কে হাইড করে দেয় এবং fadeToggle () তাদের আবার দৃশ্যমান করে দেয়।

Syntax 
$(selector).fadeToggle(speed,callback);

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeToggle () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

ফলাফল : fadeToggle()

 

jQuery এর fadeTo () পদ্ধতি

JQuery এর fadeTo () মেথড (0 এবং 1 এর মধ্যে মান) একটি প্রদত্ত অস্বচ্ছতা ফেইড দেখাতে পারবেন।

Syntax
$(selector).fadeTo(speed,opacity,callback);

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

FadeTo () মেথড প্রয়োজন অস্বচ্ছতা করতে প্যারামিটারের মান দিয়ে দিতে পারবেন। অস্বচ্ছতা ফেইড নির্দিষ্ট (0 মধ্যে মান 1) এর মধ্যে।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeTo () মেথড দেখানো হলঃ

$("button").click(function(){
     $("#div1").fadeTo("slow", 0.15);
     $("#div2").fadeTo("slow", 0.4);
     $("#div3").fadeTo("slow", 0.7);
 });

ফলাফল : fadeTo()

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস ৩ টেক্সট ইফেক্টস (CSS3 Text Effects)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

css3 তে বেশ কিছুই নতুন টেক্সট ইফেক্টস আছে।

এই অধ্যায়ে আপনারা নিচের অধ্যায়গুলো সম্পর্কে জানবেন-

  1. text-shadow
  2. word-wrap

 

ব্রাউজার সাপোর্ট (Browser Support)

এই প্রপার্টি দুটো css3 ভার্সন, তাই সকল নতুন বা latest version এর ব্রাউজার গুলো সাপোর্ট করবে।

নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে।

সংখ্যা -o- দ্বারা browser version নির্দেশ করা হয়েছে-

প্রোপার্টি
 chrome edge ie firefox safari opera
text-overflow

4.0

12.0

6.0

7.0

3.1

11.0
9.0 -o-
word-wrap

23.0

12.0

5.5

3.5

6.1

12.1
word-break

4.0

12.0

5.5

15.0

3.1

15.0

 

text-shadow

কোন কিছুর Shadow বা ছায়া তৈরি করতে আপনাকে চারটা জিনিস ব্যাখ্যা করে দিতে হবে যথা- horizontal shadow, the vertical shadow, the blur distance, এবং the color of the shadow বা ছায়াটির রং কি হবে।
উদাহরণ-

h1{
     text-shadow: 5px 5px 5px #ff0000;
 }

আপনি color code এবং value গুলো পরিবর্তন করে কোন value এর কারনে কোন পরিবর্তন আসছে তা দেখে নিতে পারেন।

 

CSS3 Word Wrapping

যখন একটা word বা শব্দ অনেক বড় হয়, যা এরিয়ার ভিতর আঁটানো যায়না তখন শব্দটা বাইরে চলে যায়।
css3 তে word wrap প্রপার্টিটা শব্দটিকে তার area এর ভিতরে চেপে ঢুকতে বাধ্য করে, এতে যদি অন্য কোন শব্দের মাঝখানে ঢুকে যায় তবুও।
উদাহরণ-

P{
    word-wrap: break-word;
 }

 

নিম্নে কিছু টেক্সট প্রপার্টি (CSS3 Text Properties) দেয়া হল

  • hanging-punctuation = এটি ব্যাখ্যা করে যে কোন punctuation charecter কে বক্স এর বাইরে অবস্থান করান যায় কি না। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
  • punctuation-trim = কোন punctuation character কে ছাটার ক্ষেত্রে এটি ব্যবহার করা যায়। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
  • text-overflow = যখন কোন প্রপার্টি overflow করে তখন এই প্রপার্টি ব্যবহার করা যায়।
  • text-shadow = এই প্রপার্টি টি যে কোন text বা শব্দের shadow বা ছায়া ৈরি করে।
  • word-break = এটি সাধারণত লাইন ভাঙার কাজ করে।
  • word-wrap = খুব বড় শব্দগুলোকে ভেঙে পরের লাইন তৈরি করে।
Complete Courses, Microsoft Word 2010 - 100, Professional, Root

লেকচার ২২: মাইক্রোসফট ওয়ার্ড 2010 – টেক্সট ইফেক্ট (Word 2010 – Text Effect)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--