ساعت فلت زیبا , CSS , جیکوئری , BeautiFull Clock flat

ساعت فلت زیبا با CSS و جیکوئری –  BeautiFull Clock flat

سلام

شاید شما  هم دوست داشته باشید در سایتتون زمان را نمایش بدید خوب اگر دوست دارید من امروز براتون یک ساعت زیبا با طراحی فلت آماده کرده ام .

 پیش نمایش کد ساعت فلت

نکته : در این آموزش ها نیازی به دانش جی کوئری و  جاوا اسکریپت نیست و شما فقط با کپی پیس کردن میتوانید از پلاگین استفاده کنید. در جا هایی که تنظیمات دلخواهی در کد های جاوا اسکریپت باشد در آموزش حتما قید میشود.( البته که شما اگر دانش کد نویسی جاوا اسکریپت داشته باشید خیلی بهتر می توانید از پلاگین استفاده کنید)

 

در بین تگ هید (head) پوسته کد های زیر را بگذارید تا تابع های کتابخانه ای و استایل های را فراخوانی کند:

 

<link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/prefixfree.min.js"></script>

 

و کد های html را در بین تگ bady و یا هر جایی که دوست دارید  قرار دهید :

 

 <div class='clock'>
  <div class='face'>
    <div class='midnight'></div>
    <div class='three'></div>
    <div class='six'></div>
    <div class='nine'></div>
    <div class='hour' id='analoghour'></div>
    <div class='minute' id='analogminute'></div>
    <div class='second' id='analogsecond'></div>
    <div class='dot'></div>
  </div>
</div>

 

کد های css و جیکوئری آن به علت زیاد بود در پست قرار نمیدم و شما با دانلود کردن سورس آموزش می تونید از فایل های جیکئوری آن استفاده کنید .
در پایان قبل از بستن کد html باید دو فایل تابع کتابخانه ای جیکوئری را فراخوانی کنید .(حتما در پایان باید فراخوانی شود).

 

<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>

  <script src="js/index.js"></script>

 

 دانلود سورس آموزش

 

 

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

1 دیدگاه بر “ساعت فلت زیبا با CSS و جیکوئری – BeautiFull Clock flat”

  1. hadi گفت:

    خیلی عالی بود متشکرم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.