Tag Archives: ইফেক্ট

JQuery : জেকুএরি

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন

Huge Sell on Popular Electronics

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

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন :
Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :
সিনট্যাক্স:
$(selector).animate({params},speed,callback);
সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে তার CSS property এর মধ্যে define করতে হবে.
অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য . "slow", "fast", অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়
অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়.
একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো
$("button").click(function(){
$("div").animate({left:'250px'});
});

এবার jQuery animate() method একাধিক Properties এর উদাহরণ নীচে দেওয়া হলো যার মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?
উত্তর প্রায়, হ্যাঁ!

এখন আমরা দেখব কিভাবে animate() method Relative Values ব্যবহার করে |
যেমন নিচের example দেখুন
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায় |
যেমন নিচের উধাহরণ দেখুন
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়
যেমন নিচের উধাহরণ দুটি লক্ষ করুন
উধাহরণ 1 .
আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

উধাহরণ 2
এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

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

জেকোয়েরি ইফেক্টস ব্যবহার করে টেক্সট হাইড এবং শো করা

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 hide()

একটি সহজ jQuery hide() মেথড প্রদর্শন করে

উদাহরণ ২ঃ jQuery hide()

আরেকটি সহজ jQuery hide() মেথড প্রদর্শন করে। কিভাবে টেক্সট এর কিছু অংশ লুকায়।

 

jQuery hide() এবং show() ট্যাগের ব্যবহার

jQuery তে hide() and show() মেথড ব্যবহার করে এইচটিএমএল এলিমেন্ট লুকাতে এবং প্রদর্শন করতে পারি:

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

ফলাফল : Hide এবং Show

Syntax

এটাতে কিন্তু আমরা কিছু Syntax যোগ করে স্পিড বাড়াতে কমাতে পারি । তাহলে দেখুন Syntax গুলো কেমন ।

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

এই অপশনাল প্যারামিটার গুলো নির্দেশ করে দেখাতে এবং বন্ধ করতে কেমন সময় নিবে। এর মান "slow", "fast", বা milliseconds হতে পারে।

উদাহরণ:

$("button").click(function(){
    $("p").hide(1000);
});

ফলাফল : স্পিড নিয়ন্ত্রণ

 

jQuery toggle() মেথড এর ব্যবহার

jQuery toggle() মেথডটি আপনি hide() এবং show() মেথডের মাঝে ব্যবহার করতে পারেন। তাহলে বন্ধ তথ্যগুলো দেখাবে, আর দেখানোগুলো বন্ধ করবে ।

$("button").click(function(){
    $("p").toggle();
});

ফলাফল : Toggle

Syntax

এখানেও আমরা একটা স্পিড Syntax যোগ করে এর স্পীড নিয়ন্ত্রণ করতে পারি ।

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

এই স্পীড প্যারামিটার এটিকে দ্রুত, আস্তে এবং মিলিসেকেন্ডে পরিবর্তন করতে পারে ।

 

কোথাও না বুঝতে পারলে কমেন্ট করুন।

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

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন : jQuery Animations – The animate() Method

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--

শউলি

 

Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :

সিনট্যাক্স

$(selector).animate({params},speed,callback);

সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে হবে তার CSS property এর মধ্যে define করতে হবে।

অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য । "slow", "fast", অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়।

অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়।

একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো

$("button").click(function(){
    $("div").animate({left: '250px'});
});

ফলাফল : animate()

 

jQuery animate() method একাধিক Properties

এর মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

ফলাফল : একাধিক Properties

 

এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?

উত্তর প্রায়, হ্যাঁ!

 

এখন আমরা দেখব কিভাবে animate() মেথড Relative Values ব্যবহার করে |

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

ফলাফল : Relative Values

 

পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায়

যেমন নিচের উধাহরণ দেখুন

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
});

ফলাফল : Pre-defined

 

এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়

যেমন নিচের উধাহরণ দুটি লক্ষ করুন

উধাহরণ 1 .

আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});

ফলাফল : Queue Functionality

 

উধাহরণ 2

এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

ফলাফল : ফন্ট সাইজ

 

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--