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

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

Images from https://k72.ca/en/about

Team Grid

Team Page Image Transition

Welcome to Daily Interaction #132.

This demo showcases a fullscreen menu animation when clicking on the menu trigger.

For this effect the menu comes down and lines scale in to create an interesting effect. The menu items also reveal from top to bottom. The menu items are in a wrapper set to an overflow of hidden so it creates the reveal effect. There is also a submenu at the bottom of the menu that fades in and moves up from the bottom. The scale, opacity, and move animations for the menu elements were set in interactions.

There is also a menu trigger animation that turns the menu lines into an x on click, and then reverses on second click.

Inspired by: https://animal.cc/

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

WebDev for You - Daily Interaction #132

WebDev For You - Daily Interaction #132

Welcome to daily interaction #110.

This demo showcases a social media card animation on click. For this demo I have 3 social media cards appear below the profile card on click. This effect was achieved by resizing the social media blocks from 0 to it's original size which causes the up and down motion of the profile card at the top. I also used scale, move, and opacity transformations in interactions to change the 'contact me' button from text to an arrow. Another 'contact me' text also appears in the lower left hand corner of the card when clicking.

Inspired by: https://codepen.io/BeanBaag/pen/dzyGpM

https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev for You - Daily Interaction #110

WebDev For You - Daily Interaction #110

Welcome to daily interaction #62.

This demo showcases a side menu animation on click.

Inspired by: https://archi-graphi.fr/

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

WebDev for You - Daily Interaction #62

WebDev For You - Daily Interaction #62

Here's a free-to-use page transition using a snippet of custom piece of code to allow for the animation to happen.

This project was created as part of Webflow Copenhagen's MeetUp #4.

//

Watch the recording of the MeetUp here where we go over how to make page transitions like this
https://webflow.zoom.us/rec/share/39RzFLWq7F5LEpHKxFHuA_4kHoPGeaa8hHQd-aAKyUuAQLwFkxzwpEUdvrwxQYZ4

//

Created by Emil Villumsen
https://twitter.com/EmilVillumsen

//

MeetUp group 
https://www.meetup.com/Copenhagen-Webflow-Meetup/    

//

Design reference
https://vedran-badun.com

Staggered page transition

Staggered Page transition | Webflow CPH #4

Welcome to Daily Interaction #117.

This demo showcases a menu trigger animation on hover and click.

On hover lines move in and out of the menu trigger. On click the menu trigger turns into an x and the color for the lines change as well. 

This effect was achieved by adding two div blocks inside of a menu trigger wrapper to represent the lines. Inside of those blocks another div block was add with the same background color as the browser background. When the user interacts with the menu trigger wrapper the lines move and scale to create the effect. When the user clicks the menu trigger the lines change color to be visible with the menu wrapper that appears behind it.

Inspired by: https://www.ouiwill.com/

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

WebDev for You - Daily Interaction #117

WebDev For You - Daily Interaction #117

Welcome to Daily Interaction #107!

This demo showcases a menu that comes out of the menu trigger. When the menu trigger is clicked a set of menu items reveal. This was accomplished by placing the menu wrapper inside of another wrapper with an overflow of hidden. The menu wrapper had a position of absolute so as not to move when the overflow wrapper got larger. Then in the interaction I set the width of the overflow wrapper to 0% initially and then when you click the menu trigger the overflow wrapper becomes 100% width revealing the menu wrapper and the menu items inside of it. I also applied a simple hover effect to the menu items when the menu opens, and the menu trigger turns into an x on click and back to a 3 line menu trigger on second click.

Inspired by: https://codepen.io/speresunko/pen/JvbgWW

https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev for You - Daily Interaction #107

WebDev For You - Daily Interaction #107

I found some great code from lewis on the forums to disable the right clicking on light boxes and I wanted to have something easy to duplicate. So here's a clonable for ya.

Put the HTML code in the footer of either your page or project.

The first line disables images and the second disables the Lightbox images.

(I know I know this is totally pointless, but sometimes it makes clients happy.) Don't ever put anything on the internet that you don't want shared haha!

Enjoy!

No Right Click For You

Minim - Disable Right-Click

I hate spam calls so I ask all my site visitors to text me first (on my Google Voice number) but I wanted it to be easy for them. So one line of code later and you  make a custom button open the user's default messaging app.

Click To SMS Text Button

Minim Click To Text

Welcome to daily interaction #69.

This demo showcases a menu trigger animation on click.

Inspired by the following CodePen: https://codepen.io/alexTi-dev/pen/bwLvaE

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

WebDev for You - Daily Interaction #69

WebDev For You - Daily Interaction #69

Happy April Fool's Day!

Can you catch the button?

This demo was just for fun and not really intended for cloning :P.

WebDev for You - Daily Interaction #96

WebDev For You - Daily Interaction #96

Pretty soon we will be able to build an eCommerce store, now let's build daily interaction #34!

This demo showcases a menu trigger animation on click.

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

WebDev for You - Daily Interaction #34

WebDev For You - Daily Interaction #34

He got the birdie, now let's build daily interaction #40

This demo showcases a menu trigger animation on click.

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

WebDev for You - Daily Interaction #40

WebDev For You - Daily Interaction #40

This demo showcases a side menu on click.

Inspired by: https://www.spindle.co/

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

WebDev for You - Daily Interaction #43

WebDev For You - Daily Interaction #43

This demo showcases a menu trigger animation on click.

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

WebDev for You - Daily Interaction #46

WebDev For You - Daily Interaction #46

Welcome to daily interaction #48.

This demo showcases a menu trigger animation on click using Grid.

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

WebDev for You - Daily Interaction #48

WebDev For You - Daily Interaction #48

On hover / on click interaction, Changing the clocks times

Also using the cms to fill the images