Discover the best mousemovement websites created by professional designers. Get inspired and start planning your perfect mousemovement web design today!

Hi everyone !

Because everyone was wondering (or maybe not), I made a website to decide which was better between pizza and burger. 
(But it was mainly to design a mouse move animation 😁)

Vote for your favorite, and feel free to clone or like the project if you enjoyed it!

Pizza VS Burger

In celebration of cross-site copy/paste! - Pre-built elements and interactions for use on new projects. Film 4 style page transitions. Thanks for looking! :-)

Artefact

Webflow

A 3d transforms interaction based on mouse position. 

Learn how to build this https://university.webflow.com/lesson/rotation-on-mouseover-interactions

Rotation on mouseover

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

Trying out remaking and animating this shot done by me: https://dribbble.com/shots/5366442-Minimal-Portfolio-Exploration

*Done for learning purposes, clients are not real.
Let me know what you think.

Minimal Portfolio

Minimal Mouse Portfolio

Parallax Exercice

Magnetic Background

Apple changed its homepage for a short period to support International Women's Day. To make it special, I recreated it and replaced some of the images with the women in my life. You can compare it to the original here:

https://web.archive.org/web/20200309051055/https://www.apple.com/

It's not a perfect replication, for instance, Webflow's mouse move interaction doesn't translate to mobile. But I'm happy to hear suggestions on how to improve it. 

Regardless, feel free to clone and make it your own!

Apple - International Women's Day

Apple International Women's Day 2020

Interactive ghost mouse background. 

Sweet code made by Liam Egan. 

Implemented in webflow from this codepen : 
https://codepen.io/shubniggurath/pen/dKwegY

Enjoy!

Mouse Interactive Background

mouse-interactive-background

Watch the tutorial at https://www.patreon.com/posts/68438340

Velocity

Velocity-Based Interactions

Hi my gorgeous friends of Webflow!

Have you ever tried to embed an HTML canvas into your projects? By playing a bit with Java Script, you can use it to add a fancy cursor tracking effect to your websites! :)

Enjoy, and feel free to leave a comment!

Have an awesome Webflow journey y'all,

Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Canvas Cursor Tracking

OGL (lite version of webGL)

https://github.com/oframe/ogl

ogl-mousemove

ogl mousemove effect

text outline animation fixed

Fixed  Text Stroke Animation

Welcome to Daily Interaction #133.

This demo showcases a parallax card animation on mouse move.

With this effect a card rotates on mouse move, and the image inside the card rotates and moves as well to create the effect of the image moving inside of the card. A caption also appears when hovering over the card. The card is in a 3d-wrapper with a child perspective applied to it to give the card a 3d effect as it moves.

Inspired by: https://codepen.io/andymerskin/pen/XNMWvQ

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #133

WebDev For You - Daily Interaction #133

three.js and vanta.js  :)

You can edit:
  skyColor: 0x5eb7d9,
  cloudColor: 0xb1c2dc,
  cloudShadowColor: 0x1b3a57,
  sunColor: 0xff9c21,
  sunGlareColor: 0xfa6331,
  sunlightColor: 0xfa9531

https://github.com/tengbao/vanta/tree/master/dist

Interactive Sky

Interactive sky

Watch the tutorial at https://www.youtube.com/watch?v=BNVSkKtHuns

Based on https://isabelmoranta.com/

Isabel Project Hovers

interactive webgl space

Webgl shooting stars

Playing around with creating a fold out A5 card on the web. Using mouse movement and absolute positioning with a simple x-axis mouse movement interaction. All images can be found @jacob.robinson.

Fold out test

fold-out-test

99% Webflow 
1% Custom CSS


.without-fill {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
}

Discover mousemovement websites built by the Webflow community

Discover mousemovement websites built by the Webflow community