Recreate the Canva.com Effect

Community resources Webflow Tips
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 - Videopic

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

25 Likes
2

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

3 Likes
3

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

AAHH!H!!!

3 Likes
4

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

2 Likes
5

AWESOME!!! that is GENIUS thanks for sharing!

Arthur

2 Likes
7

Pretty sweet! Thank you for sharing

1 Like
8

Awesome thankyou for sharing this @Damon_Daisley_Wilson!

1 Like
9

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

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

1 Like
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!

1 Like
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.

659×607 853 KB

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

1 Like
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.

1 Like
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!

19

I know this is an old post but Im trying to create this effect except I would want the video in the background and I would want a tint over it and the mouse hover would show part of the video. If anyone could help me in achieving this effect that would be appreciated

Thanks in advance