شفافیت کامل عکس توسط جی کوئری هنگام حرکت موس روی عکس
  1. رنگی کردن عکس توسط جی کوئری هنگام حرکت موس روی عکس

شفافیت کامل عکس توسط جی کوئری هنگام حرکت موس روی عکس :
خب شفافیت کامل عکس از حالت نیمه جان ! کار آسونیه و یاد گرفتنش صرفاً برای قسمت بعدی این آموزش است. خب ابتدا می گردیم دوتا عکس زیبا پیدا می کنیم. برای این کار هزار تا سایت هست ولی سایت مورد علاقۀ من ۱x هست که خودم رو موظف کردم هر روز یه گشتی بین عکساش بزنم. بعد از انتخاب عکس ها بک گراند رو مشکی می کنم. این کار کاملاً سلیقه ایه و اگر سفید یا هر رنگ دیگه ای باشه مشکلی برای آموزش امروز ما پیش نمیاد. امروز هم تمام اسکریپت ها و استایل ها رو در فایل ایندکس خواهم نوشت.

01

بعد از مشکی کردن رنگ زمینه و سفید کردن فونت بین تگ body یک تگ Div با Id درست می کنیم. تا عکسی که قرار است fade out یا ظاهر شود رو قرار بدیم.

تگها در اینجا کامل  و صحیح بعلت تنبلی بنده نشان داده نمیشوند و فقط دستورات قابل مشاهده می باشد

<div id="opacity">
<p> شفافیت کامل عکس هنگام حرکت موس روی عکس p>
<img src="b.jpg"/>
div>

خب ابتدا باید عکس محو باشد که با حرکت موس به حالت اول برگردد پس سراغ کد جی کوئری می رویم :

$(function() {
        $('#opacity img').animate({"opacity": .2 });
});

این کد به این معنیست که روی تگ Img که درون div با Id=opacity عملیاتی انجام بده. ( انیمیشن ) و شفافیت رو بکن ۰٫۲ به همین سادگی. این برای ابتدای کار.
بعد از اون باید کدی بنویسیم که با حرکت موس روی عکس شفافیت به حالت عادی که ۱ است برگردد پس کد بالا را تکمیل می کنیم :

$(function() {
        $('#opacity img').animate({"opacity": .2 });
$('#opacity img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
                    }
        });

به این معنی که هنگامیکه موس روی img آمد شفافیت را به ۱ برسان. خب این کافی نیست چون در این حالت اگر موس رو از روی عکس برداریم به حالت نیم جان که ۰٫۲ است برنمی گردد و همینطور شفاف می ماند. پس کد را تکمیل می کنیم :

$(function() {
        $('#opacity img').animate({"opacity": .2 });
$('#opacity img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
 
, function() {
                        (this).stop().animate({ "opacity": .2 );}
});

یعنی دوباره کد را به حالت اول بر می گردونیم و شفافیت به ۰٫۲ میرسد. به همین سادگی.

رنگی کردن عکس توسط جی کوئری هنگام حرکت موس روی عکس :
خب بین تگ body یک تگ Div با Id درست می کنیم. تا عکسی که قرار است از سیاه و سفید به حالت رنگی در بیاد رو بین اون قرار بدیم.

<body>
<div id="fadehover">
 
        div>
body>

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

<div id="fadehover">
<p> رنگی کردن عکس هنگام حرکت موس روی عکس p>
<img src="a-bw.jpg" class="a-bw" />
<img src="a.jpg" class="a" />
        div>

خب ابتدا عکس a هم به صورت سیاه و سفید هم رنگی به صفحه اضافه می کنیم. دقت کنید برای هر عکس از کلاس با نام های مختلف استفاده کردم. برای عکس رنگی کلاسی به نام a و برای عکس سیاه و سفید کلاسی به نام a-bw . حالا وقت اینه که دو عکس رو دقیقاً روی هم بندازیم به این صورت :

img.a  {
    position: absolute;
    left: 5px;
    top: 40px;
 }
 
  img.a-bw  {
    position: absolute;
    z-index: 10;
    left: 5px;

    top: 40px;
 }

من برای هر دو عکس پوزیشنی ثابت در فاصلۀ ۵ پیکسل از کنار چپ و ۴۰ پیکسل از بالای صفحه انتخاب کردم و برای اینکه عکس سیاه و سفید رو باشد اون رو در بعد z مختصات ۱۰ مرحله جلو آوردم. ببنید برای این کار می تونید عکس رنگی رو ۱۰ مرحله عقب بفرستید و هیچ فرقی نمی کنه به این صورت :

img.a  {
    position: absolute;
    left: 5px;
    top: 40px;
    z-index: -10;
 
 }
 
  img.a-bw  {
    position: absolute;
    left: 5px;
    top: 40px;
 }

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

//Black and White To Colorful
$("img.a-bw").hover(
function() {
$(this).animate({ "opacity": "0" }, "slow");},
function() {
$(this).animate({ "opacity": "1" }, "slow");}
);

این کد دقیقاً مثل کد مرحلۀ پیش است با این تفاوت که به جای ۰٫۲ شفافیت رو به ۰ می رسونیم که کاملاً محو شود.

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