Tag Archives: animation

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

jQuery stop() মেথড । jQuery Stop Animations

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

কোনো animation বা effect শেষ হবার পূর্বেই সেটাকে থামানোর ক্ষেত্রে jQuery stop() method ব্যবহার করা হয়।

Sliding, fading এবং custom animation সহ সকল jQuery effect ফাংশনের ক্ষেত্রে stop() method ব্যবহার করা হয়।

সিনট্যাক্স

$(selector).stop(stopAll,goToEnd);

stopAll parameter একটি optional parameter যা animation queue টি clear হয়েছে কি না তা নির্দেশ করে। এর Default মান হলো False, যা শুধুমাত্র active animation কে stop করে এবং সারির পরবর্তী animation গুলোকে চলতে দেয়।

goToEnd parameter একটি optional parameter যা current animation কে complete করবে কি না তা নির্দেশ করে। এর Default মান হলো False.

সুতরাং Default মান যখন অপরিবর্তিত থাকে তখন stop() method টি কোনো Selected element এর current animation কে চলতে বাধা প্রদান করে।

নিম্নোক্ত উদাহরণের সাহায্যে stop() method এর একটি ব্যবহার দেখানো হলো যেখানে কোনো parameter ব্যবহার করা হয় নি।

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

ফলাফল : stop()

 

অনুবাদক: ফয়সাল রকি

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 অ্যানিমেশনের স্পিড নির্দেশ করে ।