رفتن به مطلب

تغییر افکت عکس های وردپرس


Configer

پست های پیشنهاد شده

سلام

یه چندتا عکس توی سایتم هست

وقتی ماوس میره روش کم رنگ تر میشه

میخام این افکت رو عوض کنم

مثلا وقتی ماوس رفت روش چرخشی بشه یا ویبره بخوره

کد افکت هاشو کسی داره؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود بر شما.

 

افکت کم رنگ شدن تصویر ، به دلیل استفاده از خاصیت استایل opacity هست. در واقع یک خاصیت تک خطی به صورت زیر که این افکت رو اعمال می کنه :

opacity: 0.5;

همونطور هم که میدونید مقدار این خاصیت نهایتا عدد 1 می تونه باشه. عدد 1 هم یعنی وضوح کامل . حالا برای مثال مقدار 0.5 این وضوح رو کم می کنه یا به گفته خودتون عنصر مورد نظر رو کم رنگ تر می کنه. هر چی این رقم اعشاری پایین تر بره، کمرنگ تر میشه.

خود این خاصیت هم به راحتی روی هر عنصری از صفحه می تونه برای نوع hover یک عنصر استفاده بشه. تااینجا یه نکته آموزشی بود.

 

اما افکت چرخشی یا ویبره، خودشون نیازمند چندین خاصیت و کلس و ID جداگانه هستند.

در ادامه آموزش رو تقریبا به صورت مبتدی بیان می کنم تا اگر دوستان دیگری هم خواستید استفاده کنند، بهتر بتونند متوجه بشن.

 

 

روش استفاده از افکت چرخشی :

یک دمو از این کد براتون آماده کردم که لینک ها تنها برای اعضای سایت قابل نمایش است. می تونید ببینید. (با اجازه برای تصویر هم از آواتار خودتون استفاده کردم).

در این نوع افکت، زمانی که موس روی تصویر بره، یک چرخش 360 درجه ای اتفاق میفته.

 

برای استفاده از این افکت، ابتدا باید کد زیر رو در فایل CSS قالبمون قرار بدیم.

.roteffect{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    
    
}
.roteffect:hover{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

این کد هم همونطور که پیداست برای تعریف یک کلس جدید و امکان Hover اون استفاده میشه.

در کد بالا ما یک کلس جدید به نام roteffect ایجاد کردیم. حالا این کلس رو به تصویر یا عنصری که می خواهیم این افکت رو بگیره پیوست می کنیم. مثلا:

<img src="http://forum.20script.ir/uploads/monthly_2017_03/2733.thumb.jpg" class="roteffect"/>

به هر حال شما باید این کلس رو به نوعی به تصاویر یا عنصر مورد نظرتون اضافه کنید. چه کد مربوط به عنصر به صورت HTML در دسترس باشه، چه به صورت یک حلقه کد PHP باشه، بالاخره این کلس باید به کد عنصر مورد نظر اضافه بشه.

 

بعد از اون هم که دیگه فقط می تونید ازش لذت ببرید! حالا هر خاصیت دیگه ای هم که خواستید می تونید به کد CSS اضافه کنید.

 


افکت لرزشی :

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

 

استفاده از این هم آسون هست. مثل قبل ابتدا دستورات CSS رو وارد قالب می کنیم :

@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

برای استفاده از این افکت هم کافیه کلس hvr-buzz-out رو به یک عنصر اضافه کنید. مثال:

<img src="http://forum.20script.ir/uploads/monthly_2017_03/2733.thumb.jpg." class="hvr-buzz-out" />

مشکلی بود بپرسید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 8 ماه پیش ...
در 1 ساعت قبل، marjan68 گفته است :

سلام من یه عکس طوسی دارم تو سایت . میخوام وقتی موس میره روش آبی بشه 

چیکار باید بکنم؟

درود.

آدرس سایت و محل قرار گیری این عکس رو همینجا بزارید تا بهتر راهنمایی کنیم.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در در 17 تیر 1397 در 14:47، Masih گفته است :

درود.

آدرس سایت و محل قرار گیری این عکس رو همینجا بزارید تا بهتر راهنمایی کنیم.

لینک ها تنها برای اعضای سایت قابل نمایش است.

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

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 15 ساعت قبل، marjan68 گفته است :

لینک ها تنها برای اعضای سایت قابل نمایش است.

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

 

درود مجدد.

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

برای اینکار، اول لوگوی زیر رو در پوشه images قالبتون در کنار فایل logod.png آپلود کنید و بعد کد زیر رو در یکی از فایل های استایل قالبتون قرار بدید. دقت کنید که لوگویی که بنده به رنگ آبی درآورده ممکنه اون رنگی نباشه که می خواهید. بهتره شما که فایل اصلی لوگو رو به صورت PSD دارید، رنگ مورد نظر رو روی متن اعمال کنید و ازش استفاده کنید :

* نام این لوگوی زیر رو به logoe.png تغییر بدید موقع ذخیره کردن داخل سیستمتون.

logoe.png.e4e7819d48b8f1c909c7db5cba14bb82.png

 

.wleft2:hover {background-image: url('images/logoe.png');}

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 8 ساعت قبل، Masih گفته است :

درود مجدد.

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

برای اینکار، اول لوگوی زیر رو در پوشه images قالبتون در کنار فایل logod.png آپلود کنید و بعد کد زیر رو در یکی از فایل های استایل قالبتون قرار بدید. دقت کنید که لوگویی که بنده به رنگ آبی درآورده ممکنه اون رنگی نباشه که می خواهید. بهتره شما که فایل اصلی لوگو رو به صورت PSD دارید، رنگ مورد نظر رو روی متن اعمال کنید و ازش استفاده کنید :

* نام این لوگوی زیر رو به logoe.png تغییر بدید موقع ذخیره کردن داخل سیستمتون.

لینک ها تنها برای اعضای سایت قابل نمایش است.

 


.wleft2:hover {background-image: url('images/logoe.png');}

 

ممنون واقعا . درست شد 

خیلی لطف کردین

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...