স্বাধীনতা ২.০ এর স্বাগত জানাচ্ছি, দেশ পূর্ণগঠণে সাহায্য করুন

WooCommerce অর্ডার বাটনে Shake Animation যুক্ত করে সেলস বাড়িয়ে নিন

অর্ডার বাটনে এনিমেশন যুক্ত করে সেলস বাড়িয়ে নিন কয়েক গুন।
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
WooCommerce অর্ডার বাটনে যদি Shake Animation যুক্ত করা যায় তাহলে ক্রেতার দৃষ্টি খুব সহজেই অর্ডার বাটনে পড়ে, এতে করে কস্ট করে Place Order বাটন খুজতে হয় না, এবং ক্রেতা খুব সহজে অর্ডার করতে পারে, এবং অর্ডার করার প্রতি আগ্রহ পায়। এই পোস্টে JavaScript ও CSS Animation ব্যবহার করে Order button এ Shake Animation যুক্ত করার কোড শেয়ার করবো।
WooCommerce অর্ডার বাটনে Shake Animation যুক্ত করে সেলস বাড়িয়ে নিন

প্রয়োজনীয় কোডসমূহ:

WooCommerce-এর অর্ডার বাটনে প্রতি ৩ সেকেন্ড পরপর shake animation চালু করতে নিচের জাভাস্ক্রিপ্ট এবং CSS কোডগুলো ব্যবহার করতে পারেন।

নিচের কোডটি বসানোর পর নিচের ছবির মতো এনিমেট করবে।

WooCommerce অর্ডার বাটনে Shake Animation যুক্ত করে সেলস বাড়িয়ে নিন


Shake Animation JavaScript & CSS Code:

প্রতি ৩ সেকেন্ড পরপর একবার shake animation হবে। এই জন্য জাভাস্ক্রিপ্ট কোডটি কাস্টমভাবে বসাতে পারবেন। যদি Elementor ব্যবহার করেন তবে HTML Widget নিয়ে নিচের দিকে এই জাভাস্ক্রিপ্ট ও CSS কোড বসাতে পারেন। নিচেতে কোডটি দেওয়া হলো:
  <script>
  // প্রতি ৩ সেকেন্ড পর shake animation চালু হবে
  setInterval(() => {
    const button = document.querySelector('.alt');  // WooCommerce-এর অর্ডার বাটনের সিলেক্টর
    
    // Shake animation যোগ করা
    button.classList.add('shake');
    
    // ১ সেকেন্ড পরে shake animation সরানো হবে
    setTimeout(() => {
      button.classList.remove('shake');
    }, 1000);
    
  }, 3000); // প্রতি ৩ সেকেন্ডে চালু হবে
</script>
<style>
/* Shake Animation */
@-webkit-keyframes rsiShaker1 {
    0%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    10%, 20% {
        -webkit-transform: scale3d(.97, .97, .97) rotate(-1deg);
        transform: scale3d(.97, .97, .97) rotate(-1deg);
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03) rotate(1deg);
        transform: scale3d(1.03, 1.03, 1.03) rotate(1deg);
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03) rotate(-1deg);
        transform: scale3d(1.03, 1.03, 1.03) rotate(-1deg);
    }
}

@keyframes rsiShaker1 {
    0%, to {
        transform: scaleX(1);
    }
    10%, 20% {
        transform: scale3d(.97, .97, .97) rotate(-1deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.03, 1.03, 1.03) rotate(1deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.03, 1.03, 1.03) rotate(-1deg);
    }
}

/* Shake ক্লাসে এনিমেশন */
.alt.shake {
  animation: rsiShaker1 .5s ease-in-out;
}
</style>
  

কিভাবে কোড কাজ করে?

  • প্রতি ৩ সেকেন্ড পর জাভাস্ক্রিপ্ট কোডের মাধ্যমে অর্ডার বাটনে .shake ক্লাস যুক্ত হয় এবং এক সেকেন্ড পরে তা রিমুভ হয়।
  • .shake ক্লাস যুক্ত হলে CSS-এর rsiShaker1 এনিমেশন চালু হয়, যা বাটনটিকে একটু একটু করে ঘোরানো এবং ছোট-বড় করা হয়।
WooCommerce-এর অর্ডার বাটনে এই shake animation যুক্ত করলে ক্রেতাদের দৃষ্টি সহজেই আকর্ষণ করা সম্ভব। WooCommerce ওয়েবসাইটে এনিমেশনগুলি যুক্ত করলে ক্রেতাদের কেনাকাটায় উদ্বুদ্ধ করতে সহায়ক ভূমিকা পালন করে।

About the Author

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.
I have a blog for learning web design, the nam…

একটি মন্তব্য পোস্ট করুন

কোনো প্রশ্ন থাকলে অনুগ্রহ করে বিস্তারিত ভাবে বলুন, আশা করি আমরা আপনাকে হেল্প করতে পারবো।তবে অনুগ্রহ করে স্পাম করবেন না।

All information presented on this website is collected from internet. We may make unintentional mistakes while writing the post. We sincerely apologize for any unpleasant mistakes and WikiJana.Com is not responsible for any incorrect information. If you see any incorrect information please let us know immediately. We will try to fix it as soon as possible. Click here to report.

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.