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");
});

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

 

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

সিএসএস ৩ অ্যানিমেশনস (CSS3 Animations)

Huge Sell on Popular Electronics

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

সুদীপ্ত সাহা

 

ফ্লাস বা জাভাস্ক্রিপ্ট দ্বারা তৈরি ওয়েব পেজের অ্যানিমেশনগুলো সিএসএস3 অ্যানিমেশন দ্বারা বদল করা যায়।

 

ব্রাউজার সাপোর্ট

নিচের টেবিলে প্রদর্শিত নাম্বারগুলো নির্দেশ করছে কোন ব্রাউজারের কোন ভার্শনগুলো এই প্রপার্টিকে সম্পূর্ণভাবে সাপোর্ট করে।
-webkit-, -moz-, অথবা -o- যুক্ত ব্রাউজারের প্রিফিক্স ভার্সনগুলো নির্দেশ করছে যা প্রথম এই প্রপার্টি সাপোর্ট করছে।

Property chrome edge ie firefox safari opera
@keyframes

43.0
4.0 -webkit-

12.0

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

30.0
15.0 -webkit-
12.0 -o-
animation

43.0
4.0 -webkit-

12.0

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

30.0
15.0 -webkit-
12.0 -o-

 

সিএসএস3 @keyframes এর রুল

যেখানে অ্যানিমেশন তৈরি হয় সেখানে @keyframes এর রুল প্রবর্তিত হয়।

@keyframes এর ভেতরে কোন সিএসএস স্টাইলকে নির্দিষ্ট করে দিলে অ্যানিমেশনটি বর্তমান স্টাইল থেকে ধীরে ধীরে নতুন স্টাইলে পরিবর্তন হবে।

সিএসএস3 অ্যানিমেশন

যখন @keyframes রুলের ভেতরে কোন অ্যানিমেশন তৈরি হবে তখন আপনাকে অবশ্যই সিলেক্টর ঠিক করে দিতে হবে, তা না হলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না।
অ্যানিমেশনের সিলেক্টর নির্দিষ্ট করে দেয়ার জন্য অন্তত দুইটি প্রপার্টি ব্যবহার করতে হয়ঃ
অ্যানিমেশনের নাম -webkit-animation: myfirst, এবং অ্যানিমেশনের ব্যাপ্তিকাল

উদাহরনঃ
কোন -webkit-animation এর মধ্যে "myfirst" নামের অ্যানিমেশন তৈরি করা। অ্যানিমেশনের ব্যাপ্তিকালঃ ৫ সেকেন্ড

div {
     -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
     animation: myfirst 5s;
 }
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
     }
/* Standard syntax */
@keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
 }

 

ইঙ্গিতঃ যদি ব্যাপ্তিকাল নির্দিষ্ট করা না হয় তাহলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না, কারন ডিফল্ট ভ্যালু ০ ধরে নেয়া হবে।

 

সিএসএস3 অ্যানিমেশন কি?

অ্যানিমেশন হল কোন ইলিমেন্টকে ধীরে ধীরে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করার পদ্ধতি। আপনার যত প্রপার্টি ইচ্ছা এবং যতবার ইচ্ছা আপনি তা পরিবর্তন করতে পারবেন। পরিবর্তন কখন হবে তা আপনি % আকারে নির্দিষ্ট করে দিতে পারবেন, এছাড়াও আপনি "from" এবং "to" কীওয়ার্ড ব্যবহার করতে পারবেন(যেটা ০% এবং ১০০% এর মধ্যবর্তী কিছুকে বুঝাবে)

উদাহরনঃ
২৫% এবং ৫০% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }
/* Standard syntax */
      @keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }

 

 

উদাহরনঃ
২৫%, ৫০% এবং ৭৫% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }
/* Standard syntax */
 @keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }

 

 

অ্যানিমেশনের আরও উদাহরন

নিচের অ্যানিমেশনটিতে অ্যানিমেশনের সাতটি প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
 /* Chrome, Safari, Opera */
 -webkit-animation-name: myfirst;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-play-state: running;
 /* Standard syntax */
 animation-name: myfirst;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 }

 

 

উপরের উদাহরণের মতোই আরেকটি অ্যানিমেশন ইফেক্ট (animation-play-state প্রপার্টি বাদে)। এখানে কিছু শর্ট-কার্ট অ্যানিমেশন প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
     -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
     animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
 }

সিএসএস3 অ্যানিমেশন প্রপার্টি

নিচের টেবিলে @keyframes রুল এবং সকল অ্যানিমেশন প্রপার্টি লিস্ট করা হয়েছেঃ

প্রপার্টি

বর্ণনা
@keyframes অ্যানিমেশনকে নির্দিষ্ট করে ।
animation animation-play-state এবং animation-fill-mode প্রপার্টি বাদে সকল প্রপার্টিকে একসাথে ব্যাবহার করার শর্টকার্ট পদ্ধতি ।
animation-delay অ্যানিমেশন কখন শুরু হবে তা নির্দেশ করে ।
animation-direction অ্যানিমেশন অন্য কোন সাইকেলে পুনরায় শুরু হবে কিনা তা নির্দেশ করে ।
animation-duration একটি অ্যানিমেশন সম্পূর্ণ হতে কত সেকেন্ড বা মিলিসেকেন্ড লাগবে তা নির্দেশ করে ।
animation-fill-mode অ্যানিমেশন যখন প্লে হবে না তখন ইলিমেন্টের স্টাইল কেমন হবে তা নির্দেশ করে ।
animation-iteration-count অ্যানিমেশন কতবার প্লে হবে তা নির্দেশ করে 3
animation-name অ্যানিমেশনের নাম নির্দেশ করে 3।
animation-play-state অ্যানিমেশন প্লে হবে নাকি পস অবস্থায় থাকবে তা নির্দেশ করে 3
animation-timing-function অ্যানিমেশনের স্পিড নির্দেশ করে ।