SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Nice cursor effect

4 years 10 months ago - 4 years 10 months ago #105330 by Juc2
Nice cursor effect was created by Juc2
Hi all,

On this page (scroll down to "sign up for newsletter") moving the cursor anywhere on the page moves the red face's eyes. I think this is very cool - can anyone see in firebug or page source how this is done (I would guess it uses some javascript)?

Thanks...

Please Log in to join the conversation.

4 years 10 months ago - 4 years 10 months ago #105343 by Valentin
Replied by Valentin on topic Nice cursor effect
Hi Juc2,

The code of that site is minified which makes hard to know the specific code used in that features.
I think is related to javascript too. Searching the web you can find some similar examples:
www.onextrapixel.com/2014/04/09/create-a...s-to-viewers-cursor/ - click on demo to see the result

Looking forward to help you

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 10 months ago #105345 by Nick
Replied by Nick on topic Nice cursor effect
Hi Juc2,

That is a cleaver little trick :)

Here's the HTML code:
<div class="head">
		<div class="left-eye overlay"></div>
		<div class="left-eye">
			<div class="eye eye__left" style="top: -5px; left: -31px;">
				<span></span>
			</div>
		</div>
 
		<div class="right-eye overlay"></div>
		<div class="right-eye">
			<div class="eye eye__right" style="top: -5px; left: -31px;">
				<span></span>
			</div>
		</div>
	</div>

Notice the style="top: some number; left: some number" ? That's used to adjust the sprite image which contains the eyes too:
www.lupita.co.uk/assets/img/little-dude-sprite.png

Here's the unminified Javascript that animates the eyes by changing the styling numbers based on the position of the mouse:
animatedEyes: function() {
    $("html").hasClass("lt-ie9") ||
        ($(".dude").length && ($("html").hasClass("touch") ? window.addEventListener("deviceorientation", function(b) {
            var g = -10 * b.beta,
                b = -10 * b.gamma;
            if (90 == window.orientation || -90 == window.orientation) g = b;
            $(".eye__left").css({
                top: Math.max(-10, Math.min(10, g / 10)) - 15,
                left: Math.max(-15, Math.min(15, b / 10)) - 15
            });
            $(".eye__right").css({
                top: Math.max(-10, Math.min(10, g / 10)) - 15,
                left: Math.max(-15, Math.min(12, b / 10)) - 15
            })
        }) : window.addEventListener("mousemove", function(b) {
            var g = b.pageX,
                b = b.pageY;
            $(".eye__left span").offset();
            var i =
                $(".head"),
                h = (g -= i.offset().left + i.outerWidth(!0) / 2) * g,
                i = (b -= i.offset().top + i.outerHeight(!0) / 2) * b;
            Math.ceil(Math.sqrt(h + i));
            $(".eye__left").css({
                top: Math.max(-10, Math.min(10, b / 10)) - 15,
                left: Math.max(-9, Math.min(22, g / 10)) - 22
            });
            $(".eye__right").css({
                top: Math.max(-10, Math.min(10, b / 10)) - 15,
                left: Math.max(-9, Math.min(22, g / 10)) - 22
            })
        }), new logging([38, 38, 40, 40, 37, 39, 37, 39, 66, 65], function() {
            $("html, body").animate({
                scrollTop: $(".dude").offset().top
            }, 250);
            $(".dude .head").addClass("rotate");
            $(".dude").css({
                background: "none"
            })
        }, !1)), $(".dude-404").length && ($("html").hasClass("touch") ? window.addEventListener("deviceorientation", function(b) {
            var g = -5 * b.beta,
                b = -5 * b.gamma;
            if (90 == window.orientation || -90 == window.orientation) g = b;
            $(".eye__left").css({
                top: Math.max(-10, Math.min(10, g / 10)) - 15,
                left: Math.max(-15, Math.min(5, b / 10)) - 15
            });
            $(".eye__right").css({
                top: Math.max(-10, Math.min(10, g / 10)) - 15,
                left: Math.max(-15, Math.min(12, b / 10)) - 15
            })
        }) : window.addEventListener("mousemove", function(b) {
            var g = b.pageX,
                b = b.pageY;
            $(".eye__left span").offset();
            var i = $(".head"),
                h = (g -= i.offset().left + i.outerWidth(!0) / 2) * g,
                i = (b -= i.offset().top + i.outerHeight(!0) / 2) * b;
            Math.ceil(Math.sqrt(h + i));
            $(".eye__left").css({
                top: Math.max(-10, Math.min(10, b / 10)) - 15,
                left: Math.max(-15, Math.min(15, g / 10)) - 30
            });
            $(".eye__right").css({
                top: Math.max(-10, Math.min(10, b / 10)) - 15,
                left: Math.max(-15, Math.min(15, g / 10)) - 30
            })
        }), new logging([38, 38, 40, 40, 37, 39, 37, 39, 66, 65], function() {
            $("html, body").animate({
                scrollTop: $(".dude").offset().top
            }, 250);
            $(".dude .head").addClass("rotate");
            $(".dude").css({
                background: "none"
            })
        }, !1)))
}

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 10 months ago #105367 by Juc2
Replied by Juc2 on topic Nice cursor effect
@ Valentin and Nick - ok thanks - I am putting trying this on my "to do" list!

Thanks...

Please Log in to join the conversation.

4 years 10 months ago #105427 by Nick
Replied by Nick on topic Nice cursor effect
You're very welcome, Juc2! We're glad to help.

Cheers,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!