در این مطلب قصد ساخت افکتی برای زمانی که متنی را hover می کنیم, داریم. این ترفند توسط wesbos@ در این پست معرفی شده است.
پیشنیازها
دموی نهایی
See the Pen Fun hover effect by Mojtaba Seyedi (@seyedi) on CodePen.
نحوه ساخت
اول از همه با استفاده از گرادینت خطی به حالت زیر می رسیم:
a {
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
}
حال کافی است که با دو برابر کردن اندازه background-size باعث شویم تا فقط یک رنگ از دو رنگ دیده شود:
a {
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
background-size: 200%; /* دو برابر کردن اندازه پس زمینه */
}
سپس مکان پس زمینه را با استفاده از ویژگی background-position در زمان hover به اندازه 100 درصد پس زمینه جابه جا می کنیم تا به نتیجه دلخواه برسیم.
a {
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
background-size: 200%; /* دو برابر کردن اندازه پس زمینه */
background-position: 0;
}
a:hover {
background-position: 100%;
}
تصویر زیر یک شبیه سازی برای درک بهتر از اتفاقی که می افتد, می باشد:
و در مرحله آخر با استفاده از ترنزیشن به نتیجه دلخواه می رسیم:
a {
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
background-size: 200%; /* دو برابر کردن اندازه پس زمینه */
background-position: 0;
transition: background 0.4s;
}
a:hover {
background-position: 100%;
}
اگر بخواهیم که متن در حالت عادی, رنگی در پس زمینه نداشته باشد و فقط در زمانی که نشانه گر روی آن قرار می گیرد رنگ, در زیر آن حرکت کند کافی است که نصف گرادینت را شیشه ای کنیم:
background-image: linear-gradient(to left, #25B0A9 50%, transparent 50%);
و اینکه اگر دنبال این هستید که بصورت دو زبانه (دو جهته) از این تکنیک استفاده کنید, دموی زیر را بررسی کنید:
See the Pen bi-direction hover effect by Mojtaba Seyedi (@seyedi) on CodePen.
افکت ما هم آماده است,
شاد باشید… :)
مطلب مفیدی بود،
وبسایت خوبی دارید، امیدوارم همینطوری ادامه بدید.
موفق باشید
ممنون از توجهتون. با آرزوی موفقیت برای شما
دم شما گرم
ممنون. دم شما هم گرم.
با سلام و عرض ادب
جناب سیدی عزیز واقعا همیشه منتظر نوشته ها و مقالات زیبایتان هستم.امیدوارم همیشه پاینده باشید .
سلام خدمت شما دوست عزیز
ممنون از همراهی قشنگتون :)
جامع و در عین حال ساده و قابل فهم، بسیار عالی. با تشکر…
خواهش میکنم. ممنون از شما آقای محمدیان عزیز :)
ممنون ازمطلبتون
جناب اقای سیدی لطفا بگید که به چه روشی گیف درست میکنید؟
فیلم میگیرید بعد گیف درست میکنید؟ اگه بگید ممنون میشیم. قاعدتا با فتوشاپ نمیشه فریم به فریم اینقدر سریع و تمیز اوکی کردش
ممنون
از اینجا دانلودش کنید: http://www.cockos.com/licecap :)
سپاس از توجه شما.
پایدار باشید
سلام
ممنون از وب سایت و مطالب متفاوتی که می گذارید
یک سوال دارم
می خوام کاری کنم که وقتی ماوس روی نوشته می رود از پایین به بالا رنگ background تغییر کند.
برای این کار جهت gradient رو to top گذاشتم اما نشد
ممنون می شم راهنمایی بفرمایید
سلام. دقیقا همین افکت رو نمیتونین توی راستای عمودی داشته باشین. ولی اگر نوشته رو اینلاین داشته باشید می تونید این افکت رو بسازید: http://jsbin.com/kutica/4/e…
و اگر عنصر نوشته بلاک باشه این یکی رو: http://jsbin.com/kutica/3/edit
خیلی ممنون
سلام و عرض ادب
تشکر بابت مطلبتون
یک سوال داشتم
چجوری شده که این hover خط به خط اجرا میشه؟
یعنی اول خط اول بعد خط دوم و بعد خط سوم
چرا همه خط ها در یک زمان تغییر پیدا نمی کنند؟
سلام. چون عنصر inline هستش. زمانی همه با هم اجرا میشن که عنصر block باشه
بسیار تشکر استفاده کردم
خیلی عالی بود
سلام
چطوری میشه با hover روی چند المنت دیگر تاثیر گذاشت مثلا وقتی عنصری hover شد چند المنت دیگر رنگ بک گراندشون تغییر کنه؟
عالی بود مهندس
با سلام و وقت بخیر اگر بخواهیم بجای چپ و راست بصورت بالا و پایین مراحل فوق انجام شود چه تغییراتی باید لحاظ شود؟