Streaming live at 10am (PST)

Recreate the Canva.com Effect


#1

One of my clients requested the same mouse movement effect as the Canva.com homepage.

I was able to recreate the effect here in webflow with a slight mod to a script I found on canva.com's own blog.

http://canva-com-hero-effect.webflow.io/

I also made a version with a video in foreground - http://canva-com-hero-effect.webflow.io/video

Figured I'd share it here with the community -
https://preview.webflow.com/preview/canva-com-hero-effect?preview=1deb3e84249ec9d42ef0fc7cd4eee2bf


Awesome Interaction (Never seen before!) Any ideas?
2018 Design Help
Https://www.canva.com/
#2

That's so cool @Damon_Daisley_Wilson thank you so much for sharing that!


#3

WHAT?!?!?!? HOW?!?!?!

AAHH!H!!!!


#4

That's genious! Thanks for sharing that :dizzy_face:


#5

AWESOME!!!!! that is GENIUS thanks for sharing!

Arthur


#7

Pretty sweet! Thank you for sharing


#8

Awesome thankyou for sharing this @Damon_Daisley_Wilson!


#9

This is amazing @Damon_Daisley_Wilson, thanks for sharing!!!

Has anyone gotten this effect to work on tablet/mobile?


#10

@Damon_Daisley_Wilson Too cool!!! How do we find the script we need to add make the effect come to life? I can't seem to locate it in the read only site you provided. Thanks for sharing!


#11

I believe the information you're looking for should be in the page details section.

If you scroll down that until you get to the Before tag then I believe that should be what you're looking for here.

For me though, the first two links worked but the preview wouldn't do anything at all. I was testing in Safari so no idea if that had anything to do with it though?

Best wishes,

Mark


#12

@mark_bowen showed you where to get the scripts.

Scripts don't run in preview mode, you'll have to use the links to see everything in action.

Glad you like it.


#13

Aha! That would explain why it's not working for me, yes!! :wink:

Thanks and thanks for sharing such a lovely effect.

Best wishes,

Mark


#14

Thanks @Mark_Bowen and @Damon_Daisley_Wilson

Can't wait to see if I bring this life!


#15

It's amazing!!!!!!! I'm trying to do something similar, but I can not.

Can I ask you something? First, it creates two separate images? how to combine them?


#16

Just look at the preview link in webflow, there you can see how its setup.


#17

I looked, but i can't do :frowning: Do I have to buy full version?


#18

It’s very cool! Thank you!