مرجع دانلود اسکریپت

وان اسکریپت | اولین مرجع دانلود رایگان اسکریپت در ایران

خرید هاست
تبلیغات
تبلیغات
تبلیغات

درخواست شما

اگـر به دنبال قالب و اسکریپت یا هر مطلب دیگری هستید و آن را پیدا نکرده اید ، می توانید درخواست خود را به تیم وان اسـکریپت ارسال کنید تا در کوتاه ترین زمان مطلب مورد نظر شما در سایت قـرار گیرد ! وان اسـکریپت همچنان به دنبال ارائه خدمــاتی با کیفیت بالا به کاربران خود می باشد.

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

آموزش ایجاد افکت های مختلف چرخش عکسReviewed by SMZ on Oct 27Rating: 5.0آموزش ایجاد افکت های مختلف چرخش عکسچندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس به روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را مرور کنیم و ببینیم که چطور میتوان کاری کرد که در هنگام قرار گرفتن ماوس بر روی یک تصویر دلخواه، تصویر مورد نظر به اندازه ای از پیش تعریف شده بچرخد. از شما دعوت میکنیم در آموزش امروز با وان اسکریپت همراه شوید. از مقدمه چینی بیشتر پرهیز میکنیم و یک راست به سراغ پیاده سازی افکت چرخش تصاویر در CSS میرویم.

آموزش ایجاد افکت های مختلف چرخش عکس با رفتن ماوس به روی آن!

چندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس به روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را مرور کنیم و ببینیم که چطور میتوان کاری کرد که در هنگام قرار گرفتن ماوس بر روی یک تصویر دلخواه، تصویر مورد نظر به اندازه ای از پیش تعریف شده بچرخد.

از شما دعوت میکنیم در آموزش امروز با وان اسکریپت همراه شوید. از مقدمه چینی بیشتر پرهیز میکنیم و یک راست به سراغ پیاده سازی افکت چرخش تصاویر در CSS میرویم.

rotate-effect-css-code

ساختار HTML

ساختار HTML ای که در اینجا مورد استفاده قرار داده ایم، بسیار ساده است. به کد زیر دقت کنید:

همانطور که مشاهده میکنید یک در برگیرنده (در اینجا تگ p) داریم که کلاس mrcode-rotate به آن نسبت داده شده. شما میتوانید در اینجا بجای تگ p از div یا هر تگ دیگری که مد نظر شماست استفاده کنید. درون این تگ، یک لینک و درون لینک نیز یک تصویر قرار داده ایم. بدیهی است که قرار دادن تگ a الزامی نیست و تصویر شما میتواند فاقد لینک باشد. بنابراین بر اساس توضیحات ارائه شده، میتوانید کد بالا را به دلخواه خود تغییر دهید. تنها بخش حائز اهمیت این است که تصویر مورد نظر شما درون یک در بر گیرنده با کلاس mrcode-rotate قرار گرفته باشد تا CSS ای که در ادامه درج میشود به درستی برای شما کار کند. کد های CSS را جهت سادگی کار شما به سه بخش تقسیم کرده ایم که به دلخواه خود میتوانید از کدی که با نیاز شما سازگار تر باشد استفاده کنید.

چرخش ۳۶۰ درجه تصویر به همراه بازگشت (مشاهده دموی این حالت)

در مرحله ی اول میخواهیم کاری کنیم که تصویر انتخابی ما، ۳۶۰ درجه چرخیده و سپس به آرامی به جای اول خودش باز گردد. برای این کار از استایل های زیر استفاده میکنیم:

همانطور که در بالا به آن اشاره شد، با استفاده از استایل های بالا، هر گاه ماوس بر روی تصویر مورد نظر قرار بگیرد، تصویر ۳۶۰ درجه چرخیده و در صورت خارج شدن ماوس از روی آن، تصویر مجددا با چرخش برعکس به حالت اولیه باز میگردد.

چرخش ۶۰ درجه تصویر به همراه بازگشت (مشاهده دموی این حالت)

خوب، حالا شاید مایل نباشید تصویر را یک دور کامل بچرخانید و تنها مایل باشید تصویر اندکی به سمت مورد نظر بچرخد. مثلا با استفاده از کد های زیر تصمیم داریم تصویر را تنها ۶۰ درجه چرخانده و در صورت خروج ماوس به حالت اولیه بازگردانیم:

بدیهی است که شما میتوانید هر درجه ای که مایل هستید را بجای عدد ۶۰ قرار دهید تا تصویر دقیقا به همان مقدار به جهت مورد نظر شما مایل شود. توجه داشته باشید که درجه در ۵ خط متفاوت تعریف شده، بنابراین برای رسیدن به نتیجه ی مناسب باید درجه را در هر ۵ جا تغییر دهید.

چرخش ۳۶۰ درجه بدون بازگشت (مشاهده دموی این حالت)

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

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

امیدواریم از آموزش امروز لذت برده باشید.
راستی اگر مایلید وان اسکریپت به شما افکت CSS خاصی را آموزش دهد، فراموش نکنید که آن را در بخش نظرات با ما در میان بگذارید.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
نوشته شده در ۱۳۹۵/۰۸/۰۶ / 960 نمایش / کد مطلب : 15797

دیدگاه خود را به اشتراک بگذارید

پاسخ دهید

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

خرید vpn