آموزش چرخاندن تصویر با اسکرول صفحه

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

پس از آن یک تصویر انتخاب کرده و به آن مقدار position  را برابر با fixed بدهید.

حالا برای چرخاندن تصویر با اسکرول صفحه ، کتابخانه ی jQueryRotate را از آدرس    https://code.google.com/p/jqueryrotate/ دریافت کرده و به همراه فایل جی کوئری ، توسط کد زیر در فایل html خود اینکلود کنید:

<script src="js/jquery.min.js"></script>
<script src="js/jqueryrotate.js"></script>

 

حالا تکه کد زیر را در قسمت هد یا انتهای تگ بادی قرار دهید:

 

<script>
$(window).on('scroll', function () {
        $(".logoimg").rotate({
            duration: .5, /* why wait? No easing needed now, either */
            angle: $('.logoimg').getRotateAngle(),
            animateTo: -360 * $(window).scrollTop() / ($(document).height() - $(window).height())
        });
});
</script>

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

حالا به المنتتان که یک تصویر یا یک تگ div می باشد ، کلاس logoimg بدهید ، تغییرات را ذخیره کرده و صفحه را تماشا نمایید.

موفق باشید.

اگر مفید بود به اشتراک بگذارید ! کلوب فیس نما گوگل پلاس

یک نظر

  1. لطفا نمونه نهایی آموزش هارو هم بزارید

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*