اخبار سایت
در زندگی وقتی کاری برای انجام یا چیزی برای عشق ورزیدن یا بارقه ای برای امیدوار بودن داشتید ، آن گاه بدانید فرد شادی خواهید بود - ارسطو
مجموعه آموزش های ویدیویی به زبان فارسی
خانه / آموزش CSS / آموزش ساخت افکت انیمیشنی شناور در css
cssscrollanimationeffect-cover

آموزش ساخت افکت انیمیشنی شناور در css

در این آموزش قصد داریم به شما نشان دهیم که چطور میتوان تنها با استفاده از css یک افکت جالب و انیمیشنی شناور ساخت.در این آموزش ما تنها از کدهای سی اس اس برای ایجاد افکت مورد نظرمان استفاده میکنیم.

گام اول:استفاده از تصویر

ما از یک عکس متشکل از ۲ تصویر مجزا استفاده میکنیم،که قسمت بالایی آن در حالت عادی در صفحه نمایش داده میشود و قسمت پایینی آن وقتی نمایش داده میشود که نشان گر موس را روی عکس مورد نظر قرار میدهیم،ما برای این کار از عکس زیر استفاده کرده ایم:

icon

گام دوم:ساخت فایل css

یک فولدر(پوشه) در سیستمتان ایجاد کنید و نامی را برای آن در نظر بگیرید.بعد وارد پوشه شوید و فایلی با پسوند .css بسازید.برای ساخت این فایل میتوانید از نرم افزار notepad ++ یا notepad ویندوزتان استفاده کنید،برای ساخت این فایل در برنامه notepad کافیست در آخر اسم فایل مورد نظر .css اضافه کنید تا فایل سی اس اس ایجاد شود.بعد اسم آن را به ۱ تغییر دهید.(۱.css) خب حالا فایل ساخته شده را باز کنید و کد زیر را در آن قرارداده و آن را ذخیره کنید:

#twitter { }

a#twitter{
width:58px;
height:58px;
display:block;
background:url("icon.png") no-repeat;
background-position:0 0;
-webkit-transition-property:background-position;
-moz-transition-property:background-position;
-o-transition-property:background-position;
transition-property:background-position;
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
a#twitter:hover{
background:url("icon.png") 100% 0 no-repeat;
background-position:0 100%
}

گام سوم:ایجاد فایل html ودیدن نتیجه کار

مراحل بالا را برای ساخت فایل طی کنید ولی این بار به جای گذاشتن .css در آخر نام فایل،از .html برای ایجاد فایلی با پسوند اچ تی ام ال بهره ببرید.حال فایل ساخته شده را باز کرده و کد زیر را در آن قرار داده و آن را ذخیره کنید.


 

<link rel="stylesheet" href="1.css">
<a id ="twitter" href="https://twitter.com"></a>

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

حال با اجرای فایل html که ساخته بودید باید نتیجه ای همانند تصویر متحرک زیر داشته باشید، که وقتی نشانگر موس را روی عکس ببرید، عکس به این صورت تعویض شود.

cssscrollanimationeffect-demo

نکته ۱:اگر میخواهید از این جلوه مستقیما در وبسایتتان استفاده کنید،میتوانید کد css این آموزش را در فایل کدهای css قالبتان کپی کنید و کد html را هم در قسمتی مناسب در قالبتان قرار دهید.

نکته ۲:اگر میخواهید کد را مستقیما در قالب وبسایتتان به کار ببرید،و کد css را در قسمت کد های قالبتان کپی کرده اید،این قسمت آن را حذف کنید:

<link rel="stylesheet" href="1.css">

اگر نتوانستید به نتیجه کار برسید و اگر سوالی در مورد این آموزش دارید،لطفا از طریق قسمت نظرات،پرسشتان را مطرح کنید

همچنین میتوانید سورس و نمونه آماده این آموزش را از اینجا دانلود کنید

دانلود

درباره admin

۱۲ دیدگاه

  1. سلام. خسته نباشین. من کد css رو تو هاست به نام ۱.css ذخیره کردم آدرس عکسو هم تو کد css تغییر دادم ولی نمیدون چطوری باید تو یه موقعیت تعریف کنم که نمایش بده یعنی شما تو فایل html آدرس فایل css رو تعریف کردین ولی من هرکاری میکنم نمیشه لطفا راهنمایی کنید

  2. سلام.نمونه آماده این افکت رو برای دانلود گذاشتم،میتونید از این لینک دانلود کنید:
    http://digital-art.ir/wp-content/themes/boulevard/images/css-imageanimationeffect-www.digital-art.ir.zip
    این فایل رو دانلود کنید و محتویاتش رو در هاستتون آپلود کنید(البته در سیستمتون هم قابل مشاهده هست)،بعد فقط کافیه آدرس و موقعیت فایل ها که در درون فایل html و css نوشته شده رو تغییر بدید
    البته قبلش باید ببینید وقتی فایل عکس و css رو آپلود میکنید به چه مکانی میره،یعنی آدرسش رو پیدا کنید،مثلا وقتی فایل css رو در هاست آپلود کردید ممکنه این آدرس مکان قرارگیری این فایل باشه :http://www.mysite/digital/1.css پس
    فایل html رو باز کنید و به جای ۱.css قرار بدید http://www.mysite/digital/1.css

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

  3. سلام. این فایلو دانلود کنید
    http://s2.picofile.com/file/7846660535/css_imageanimationeffect_.zip.html
    بعد به آدرس های فایل css و html نگاه کنید و بگین اشتباه من کجاست که عکسو بهم نشون نمیده . یه نکته که نمیدونم مهم هست یا نه اینکه از جوملا استفاده میکنم

    • سلام.آدرس ها رو کاملا اشتباه وارد کردید،من الان درستش کردم،میتونید از لینک زیر دانلودش کنید
      http://www.uploadtak.com/images/q6285_1.zip
      بعد که این فایل رو دانلود کردید وارد هاست بشید و به جای قبلی آپلودش کنید.حالا فایل htmlfile.html رو اجرا کنید تا افکت نمایش داده بشه

  4. سلام. عالی بود واقعآ دستتون درد نکنه. فقط یه چیزی سایز عکسو هر کاری میکنم تغییر نمیکنه همون اندازه هست.
    width:120px;
    height:140px;
    سایز مورد نظر من اینه. یه لطف کنید اینو هم ردیف کنید واسم واقعا ممنون میشم.

  5. سلام.خواهش میکنم

    فایل ۱.css رو باز کنید و
    width:58px;
    height:58px;
    رو به
    width:120px;
    height:140px;
    تغییر بدید

    اگر تغییر نکرد یه بار کلید Ctrl + F5 رو از کیبورد بزنید تا کش مرورگر رو پاک کنید.

    فایل آماده CSS رو هم گذاشتم، میتونید از لینک زیر دانلودش کنید

    http://www.uploadtak.com/images/l114_2.zip

  6. دستت دردنکنه عالی بود.

  7. سلام من یک قالب وبلاگ طراحی کردم فقط نمیدونم چه طوری آپلود و چهطوری لینک آپلود شده css رو به اچ ی ام الم بدم؟.با تشکر فراوان.

    • سلام دوست عزیز.
      اول فایل css رو توی یکی از سایت هایی که لینک دانلود رو به طور مستقیم میدن آپلود کنین. (توجه داشته باشید، که لینک حتما باید مستقیم باشه، مثلا وقتی فایل css مورد نظر رو توش آپلود می کنین در آخر لینکی که سایت به شما میده باید آخرش .css داشته باشه)
      بعد شما از طریق ۲ راه میتونید فایل css رو فراخوانی کنید.
      ۱. از طریق تگ استایل
      به این صورت که کد css مورد نظرتون رو بین دو تگ

      قالب وارد کنید.(یا خودتون تگ استایل به وجود بیارید، کافیه یکم کدهای قالبهای دیگه رو نگاه کنید)
      ۲. به صورت فایل اکسترنال
      با اضافه کردن کد زیر داخل تگ head قالبتون، میتونید فایل css رو فراخوانی کنید. به جای mystyle.css کافیه لینک فایل css رو که آپلود کردین وارد کنید.
      موفق باشید

  8. با سلام میخواستم بپرسم اگر کسی بخواهد طراحی وب یاد بگیرد چه چیزهایی باید یاد بگیرد و چقدر درامد شغلی دارد وکجا استخدام میشود

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

  9. سلام من می خواستم بدونم اگه بخواهیم یه اهنگ رو از طریق css یاhtmlبه سایتمون اضافه کنیم از چه کدی باید استفاده کنیم ممنون میشم اگه راهنماییم کنید

پاسخ دهید

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

*