رنگی کردن عکس توسط جی کوئری هنگام حرکت موس روی عکس :
خب بین تگ body یک تگ Div با Id درست می کنیم. تا عکسی که قرار است از سیاه و سفید به حالت رنگی در بیاد رو بین اون قرار بدیم.
برای این تکنیک ما احتیاج داریم که عکس رو هم به صورت رنگی هم به صورت سیاه و سفید داشته باشیم. من تا کنون هیچ کدی ندیدم که بتونه به صورت اتوماتیک عکس رو به حالت سیاه و سفید در بیاره. پس شیوۀ کار به این صورت است که من دو عکس رو دقیقاً روی هم طوری قرار می دم که عکس سیاه سفید روی عکس زنگی باشه و با تکنیک جی کوئری کاری می کنم که با حرکت موس روی عکس ها ، عکس سیاه سفید محو بشه. به این صورت شما نا خوداگاه عکس رنگی که زیر عکس سیاه و سفید هست رو میبینید.
خب ابتدا عکس a هم به صورت سیاه و سفید هم رنگی به صفحه اضافه می کنیم. دقت کنید برای هر عکس از کلاس با نام های مختلف استفاده کردم. برای عکس رنگی کلاسی به نام a و برای عکس سیاه و سفید کلاسی به نام a-bw . حالا وقت اینه که دو عکس رو دقیقاً روی هم بندازیم به این صورت :
من برای هر دو عکس پوزیشنی ثابت در فاصلۀ ۵ پیکسل از کنار چپ و ۴۰ پیکسل از بالای صفحه انتخاب کردم و برای اینکه عکس سیاه و سفید رو باشد اون رو در بعد z مختصات ۱۰ مرحله جلو آوردم. ببنید برای این کار می تونید عکس رنگی رو ۱۰ مرحله عقب بفرستید و هیچ فرقی نمی کنه به این صورت :
خب اگر الان صفحه رو ریفرش کنید فقط عکس سیاه و سفید رو میبینید. برای اینکه با حرکت موس عکس سیاه و سفید کاملاً محو بشه از کد جی کوئری استفاده می کنیم :
