چگونه transitionهای نرمی برای اعداد بر روی وبسایت خود بسازیم؟

یک راه موثر برای جالب‌تر کردن نمایش اطلاعات عددی، اضافه کردن یک انیمیشن transition می‌باشد. ساخت یک انیمیشن transition می‌تواند با استفاده از JavaScript انجام شود، اما کدنویسی زمان زیادی از شما می‌طلبد. برای یک جایگزین سریع‌تر، Odometer را امتحان کنید. همچنین برای کدنویسی‌های موجود در این مقاله هم نیاز به دانشی در زمینه JavaScript دارید، که دوره‌ای حول محور همین زبان بر روی راکت موجود می‌باشد.

Odometer یک پلاگین JavaScript است که می‌تواند به شما کمک کند تا اطلاعات عددی خود را با برخی transitionهای نرم و تم‌های جالب، جذاب‌تر کنید. راه‌اندازی آن ساده بوده و بر روی بسیاری از مرورگرهای فعلی پشتیبانی می‌شود.

پیاده‌سازی

Odometer یک پلاگین JavaScript مستقل است. شما فقط باید با استفاده از این کد فایل js و تم‌های آن را در صفحه خود شامل کنید:

<link rel="stylesheet" href="odometer-theme-car.css" />
<script type="text/javascript" src="odometer.js"></script>

کار شما تمام شده است! حال هر عنصری که آن را با استفاده از کلاس odometer جمع‌بندی کنید، به یک odometer تبدیل خواهد شد.

در این مثال، من از یک تم odometer ماشین مانند استفاده می‌کنم. Odometer شش تم مختلف از جمله تم پیشفرض، digital، minimal، plaza، slot machine و train station را به همراه دارد.

برای بروزرسانی مقدار، شما می‌توانید از JavaScript‌ بومی و یا کد jQuery استفاده کنید. اول، تابع setTimeout را فراخوانی کنید، و سپس هم مقدار بروزرسانی شده را به مانند این قطعه کد بروزرسانی کنید:

<script>
  setTimeout(function(){
    odometer.innerHTML = 5555;
  }, 1000);
</script>

یا این که می‌توانید به این صورت از یک فرم jQuery استفاده کنید:

setTimeout(function(){
  $('.odometer').html(5555);
}, 1000);

مقدار ۱۰۰۰ در کد یعنی این که روند بروزرسانی شده یک ثانیه بعد از بارگذاری کامل صفحه، اجرا خواهد شد.

سپس یک کلاس odometer به هر عنصری که می‌خواهید اضافه کنید. مثلا:

<p class="odometer">3252</p>

و مقدار ۳۲۵۲ هم سپس با یک transition جالب به ۵۵۵۵ (که پیش‌تر تعریف شد) تغییر خواهد کرد.

گزینه‌ها

به عنوان برخی ویژگی‌های پیشرفته‌تر، Odometer برخی گزینه‌ها را برای شما فراهم می‌کند تا آن‌ها را سفارشی‌سازی کنید. این ابزار وقتی که تنظیمات پیشفرض برای شما مناسب نیستند، کاربردی است. برای این که بتوانید گزینه‌های مذکور را تنظیم کنید، اول یک آبجکت odometerOptions را به این صورت بسازید:

<script>
window.odometerOptions = {
  format: '(ddd).dd'
};
</script>

گزینه format قانون قالب‌بندی، مثلا نمایش یک ممیز قبل از اعدادی خاص را تحت تاثیر قرار می‌دهد. (ddd) یعنی هیچ ممیزی در عدد مورد نظر وجود ندارد. همچنین برای گزینه‌های دیگر، این لیست را بررسی کنید:

window.odometerOptions = {
  auto: false, // Don't automatically initialize everything with class 'odometer'
  selector: '.my-numbers', // Change the selector used to automatically find things to be animated
  format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
  duration: 3000, // Change how long the javascript expects the CSS animation to take
  theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
  animation: 'count' // Count is a simpler animation method which just increments the value,
                     // use it when you're looking for something more subtle.
};

نتیجه گیری

برای کسانی که اغلب اطلاعات عددی را نمایش می‌دهند و می‌خواهند که این اطلاعات چشمگیرتر باشند، Odometer یک انتخاب خوب است. فقط دقت کنید که اگر هر چیزی به جز یک عدد را در این پلاگین وارد کنید، این پلاگین کار نخواهد کرد. به هر حال، آن را امتحان کنید و نظر خود را به گوش ما برسانید.

منبع