ডিজাইনের জন্য 27 ফ্রি অ্যানিমেশন সরঞ্জাম

"অ্যানিমেশন জন্য 15 সরঞ্জাম, "আমি সামগ্রী মার্কেটিংয়ের জন্য সহজে ব্যবহারযোগ্য অ্যানিমেশন সরঞ্জামগুলি প্রোফাইল করেছি। তবে দর্শকদের অভিজ্ঞতা বাড়ানোর জন্য অ্যানিমেশনটি একটি সাইটে নকশা যোগ করতে পারে।

এখানে নকশা জন্য অ্যানিমেশন সরঞ্জাম একটি তালিকা। সহজ রূপান্তর এবং প্রভাবগুলির জন্য প্লাগিন এবং লাইব্রেরি রয়েছে, পাশাপাশি জটিল অ্যানিমেশনের জন্য প্ল্যাটফর্ম রয়েছে। এই সরঞ্জাম সব বিনামূল্যে।

ডিজাইন জন্য অ্যানিমেশন সরঞ্জাম

অলস লাইন পেইন্টার SVG পাথ অ্যানিমেশনের জন্য একটি jQuery প্লাগইন। শুধু আপনার SVG ফাইল Lazy কনভার্টার মধ্যে ড্রপ এবং কোড কপি।

অলস লাইন পেইন্টার

অলস লাইন পেইন্টার

Animista পূর্বে ব্যবহার করে পরীক্ষা করার জন্য প্রাক-তৈরি CSS অ্যানিমেশনগুলির একটি সংগ্রহ রয়েছে। অ্যানিমেশন প্রবেশ, এক্সটাইটস, টেক্সট, পটভূমি, অথবা মনোযোগ আকর্ষণ করতে বিবর্ণ তৈরি।

Flubber দুটি স্বতন্ত্র আকারের মধ্যে একটি মসৃণ অ্যানিমেটেড রূপান্তর প্রদান একটি লাইব্রেরি।

Shift.css টাইম, অন্তর্ভুক্ত সিএসএস অ্যানিমেশন নির্মাণ করার জন্য একটি সহজ কাঠামো প্রদান করে। Shift কন্টেইনারের মধ্যে, এইচটিএমএল, নেস্টেড, এবং অভিযোজিত উপাদানগুলি অ্যানিমেশন করুন।

Animate.css ক্রস ব্রাউজার অ্যানিমেশনের একটি সংগ্রহ। অ্যানিমেশন অনুপ্রবেশ এবং প্রস্থান, পাশাপাশি মনোযোগ সন্ধানকারীদের জন্য প্রভাব: বাউন্স, ফ্ল্যাশ, পালস, রাবারব্যান্ড, ঝাঁক, সুইং, tada, wobble, এবং জেলো। জোর, হোম পেজ, স্লাইডার, এবং সাধারণ বিবর্ণ জন্য ব্যবহার করুন।

Animate.css

Animate.css

Popmotion একটি জাভাস্ক্রিপ্ট গতি লাইব্রেরি। অ্যানিমেশনগুলিতে টুইন, বসন্ত, কী ফ্রেম, ক্ষয়, টাইমলাইন, স্ট্যাগার, ক্রসফ্যাড, লাইন অঙ্কন এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে।

Animo.js জাভাস্ক্রিপ্ট সঙ্গে রূপান্তর এবং অ্যানিমেশন পরিচালনার জন্য একটি হাতিয়ার। অ্যানিমো প্লাগিনগুলির একটি ছোট লাইব্রেরিও রয়েছে যা প্রত্যেকে অ্যানিমোয়ের শক্তিটি জোড়ায় তৈরি করে।

Bonsai.js একটি স্বজ্ঞাত গ্রাফিক্স API এবং একটি SVG রেন্ডারার সহ একটি লাইটওয়েট জাভাস্ক্রিপ্ট গ্রাফিক্স লাইব্রেরি।

Motion.ui. Zurb থেকে, মোশন UI দ্রুত সিএসএস সংক্রমণ এবং অ্যানিমেশনের জন্য একটি লাইব্রেরি। মোশন UI এর মূল ফাংশনটি ভিতরে এবং বাইরে স্থানান্তর উপাদান। এই পরিবর্তনগুলি ওভারলে, অফ-ক্যানভাস মেনু, মোডাল এবং আরও অনেক কিছুতে প্রয়োগ করুন।

মোশন UI

মোশন UI

Snabbt.js একটি সংক্ষিপ্ত জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি। এটি আপনার উপাদানগুলি অনুবাদ, ঘোরা, স্কেল, স্কু, এবং আকার পরিবর্তন করবে। লক্ষ্য এমন একটি লাইব্রেরি তৈরি করা যা ব্যবহারকারীকে ব্রাউজার রেন্ডারিং সম্পর্কে অনেক কিছু জানার প্রয়োজন ছাড়াই মসৃণ অ্যানিমেশন করতে দেয়।

Bounce.js বাধ্যতামূলক CSS3 চালিত কীফ্রেম অ্যানিমেশন জেনারেট করার জন্য একটি সরঞ্জাম এবং JavaScript লাইব্রেরি। অতিরিক্ত জাভাস্ক্রিপ্ট ছাড়া ব্যবহার স্ট্যাটিক keyframes উত্পাদন। ফ্লাই এ জেনারেট করতে, Bounce.js লাইব্রেরি ব্যবহার করুন।

Obnoxious.css পাঁচটি ক্লাসের সাথে একটি অ্যানিমেশন সেট: এটি ঝাঁকান, তীব্র, ফন্টালিশিয়াস, স্ট্রোব, এবং টুইস্টার।

রকেট একটি আইটেম অন্য উপাদান সরানো হয় যখন একটি অ্যানিমেশন তৈরি করে। এটি পালস, ফ্লিপ, বৃত্ত, বৃত্ত, এবং ঘোরান সহ আট প্রভাব রয়েছে।

রকেট

রকেট

CSS3 অ্যানিমেশন ঠকাই পত্রক প্রিসেট অ্যানিমেশন একটি সেট। প্রবেশদ্বার বা বিভিন্ন বিবিধ প্রভাবগুলি চয়ন করুন, যেমন বাউন্স, পালস, ভাসমান, টসিং, টান বা ডাউন, এবং বাম বা ডান দিকে।

মঙ্গলবার একটি quirky সিএসএস অ্যানিমেশন লাইব্রেরি। নমুনা, কেবল প্রবেশদ্বার এবং exits নির্বাচন করুন, তারপর অ্যানিমেশন ক্লিক করুন

CSS3 অ্যানিমেশন একটি keyframe অ্যানিমেশন জেনারেটর। কোনও ডেস্কটপ সফ্টওয়্যার ব্যবহার না করে আপনার ব্রাউজারে দ্রুত এবং সহজ CSS3 কীফ্রেম অ্যানিমেশন তৈরি করুন।

Tridiv CSS- এ 3D আকারগুলি তৈরি করার জন্য একটি ওয়েব ভিত্তিক সম্পাদক।

Tridiv

Tridiv

Hover.css লিঙ্ক, বোতাম, লোগো, SVG এবং বৈশিষ্ট্যযুক্ত চিত্রগুলিতে প্রয়োগ করার জন্য CSS3- চালিত হোভার প্রভাবগুলির একটি সংগ্রহ। আপনার নিজস্ব উপাদান প্রয়োগ করুন, সংশোধন, বা অনুপ্রেরণা জন্য ব্যবহার করুন।

Velocity.js jQuery এর অ্যানিমেশন হিসাবে একই API সহ একটি অ্যানিমেশন ইঞ্জিন। এটা jQuery এর সাথে এবং ছাড়া কাজ করে। এটি দ্রুত এবং বৈশিষ্ট্য রঙ অ্যানিমেশন, রূপান্তর, loops, easings, SVG সমর্থন, এবং স্ক্রোলিং বৈশিষ্ট্য।

SVG.js SVGs manipulating এবং অ্যানিমেশন জন্য একটি লাইটওয়েট লাইব্রেরি। SVG.js এর কোন নির্ভরতা নেই এবং SVG স্পেক্টের সম্পূর্ণ কভারেজ সরবরাহ করার সময় যতটা সম্ভব সম্ভব হবার লক্ষ্য রাখে।

ম্যাজিক অ্যানিমেশন, CSS3 বিশেষ প্রভাব অ্যানিমেশনের অন্য লাইব্রেরি, মূল গতির জন্য একটি উপকারী।

KUTE.js কাস্টম অ্যানিমেশান তৈরি করতে সহায়তার জন্য সরঞ্জামগুলির সংগ্রহ সহ একটি জাভাস্ক্রিপ্ট অ্যানিমেশন ইঞ্জিন। KUTE.js একটি সিএসএস প্লাগইন, একটি এসভিজি প্লাগইন, একটি এটিআরটি প্লাগইন, একটি টেক্সট প্লাগইন, একটি jQuery প্লাগইন - পাশাপাশি সহজে ফাংশন, কালার কনভার্টার এবং ইউটিলিটি ফাংশন সহ আসে। KUTE.js আপনি tweens এবং চেইনটি tweens তৈরি করতে পারবেন।

KUTE.js

KUTE.js

Choreographer.js জটিল অ্যানিমেশন জন্য একটি সহজ লাইব্রেরি। স্ক্রোল পজিশন, মাউস পজিশন এবং সময়-স্ট্যাম্পের মতো যে পরিমাপ আপনি চান তার উপর ভিত্তি করে অ্যানিমেশন চালান। দুটি অন্তর্নির্মিত অ্যানিমেশন ফাংশন অন্তর্ভুক্ত: স্কেল এবং পরিবর্তন।

জাফরান CS3 অ্যানিমেশান এবং রূপান্তরগুলি আরও সহজ করে তুলতে সাস মিশ্রণ এবং হেল্পারগুলির একটি সংগ্রহ। আপনার Sass ঘোষণায় একটি mixin অন্তর্ভুক্ত করুন, তারপরে ভেরিয়েবল এবং mixin পরামিতি ব্যবহার করে কোন কনফিগারেশন সেট করুন।

Mojs.io ওয়েব জন্য একটি মোবাইল গ্রাফিক্স টুল বেল্ট। Mojs দ্রুত ঘোষণামূলক APIs সঙ্গে দ্রুত এবং রেটিনা-প্রস্তুত। বস্টিং অ্যানিমেশন, বুদ্বুদ লেআউট, এবং আরো তৈরি করুন।

Animae.js একটি হালকা জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি। এটি সিএসএস বৈশিষ্ট্য, সিএসএস ট্রান্সফর্ম, এসভিজি বা ডোম বৈশিষ্ট্য, এবং জাভাস্ক্রিপ্ট বস্তুর সাথে কাজ করে। কীফ্রেমগুলি ব্যবহার করুন, প্লে করুন, বিরতি দিন, পুনরায় শুরু করুন এবং অ্যানিমেশন বা সময়সীমাগুলি সন্ধান করুন। অতিরিক্ত বৈশিষ্ট্যগুলিতে সিএসএস রূপান্তর, এসভিজি অ্যানিমেশন, ফাংশন সহজীকরণ, এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে।

CSShake আপনার DOM সরানোর জন্য CSS ক্লাস সরবরাহ করে। মৌলিক সংগ্রহে 11 শেক বৈচিত্র রয়েছে।

CSShake

CSShake

উৎস