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

Welcome to daily interaction #101!

This demo showcases an infinite logo carousel on page load. There are two rows of logo placeholders that both move at different speeds. You can replace the logo text with an image, and change all the colors to match your brand.

For this I used Flexbox to create equal distance block widths, and then for the more square blocks I give it a specific width and height of 100 by 100. For smaller devices the blocks are all the same size.

The effect was achieved by having two rows next to each other and once one row goes out of view it starts at the beginning to create the infinite loop effect.

*The only caveat with this interaction is that if you navigate away from the page the animation does not loop and the timing starts to get altered for the logos.

The WebDev For You Slack Channel is also open so be sure to subscribe if you have any questions or want to know more about each interaction!

https://www.webdevforyou.com/

WebDev for You - Daily Interaction #101

WebDev For You - Daily Interaction #101

Welcome to daily interaction #97.

This is a fairly simple animation with a few 3D cards hovering up and down. I could see it being useful for a hero section of a website where information can be represented in an interesting way. The moving cards could grab the users attention initially. Anything can be placed in each card - an image, more text, or an illustration. If you set the opacity to transparent for each card and add a unique vector illustration I think it could work really well.

The animation was created by adding a 3d wrapper and adding perspective to it. Then a card wrapper was added with 4 different blocks inside of it. I was able to get a 2x2 square via Flexbox by wrapping the children inside of the card wrapper. I then rotated the entire card wrapper. Then with interactions I moved each card different distances vertically to create the effect.

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

WebDev for You - Daily Interaction #97

WebDev For You - Daily Interaction #97

Coming soon page design - minimalist with some interactions and easy to watch.

Coming Soon - 404studio

Coming Soon One Pager 404studio

This demo showcases moving lines around an image. The image also has a 3d rotation on hover.

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

WebDev for You - Daily Interaction #67

WebDev For You - Daily Interaction #67

Welcome to daily interaction #95. This demo showcases a 3d marquee on page load.

For this demo I had two blocks inside of a wrapper with a perspective applied to it to create a 3d space. I also applied a self-perspective to the block themselves which seems to have altered the position of them as well. Still grasping the concept of self perspective and child perspective, but it's been a fun learning process. I then added text blocks inside of each left and right block. I set the overflow to hidden for both blocks so the text could move in and out of each block.

For the animation I just have the text move in from 100% to -100% on the x-axis. The duration of the text movement is 5 seconds. The second text has a delay of 2.5 so the animation works because the text blocks have the same width. Also the easing is set to linear so the easing doesn't effect the time and the text looks like it's just passing through each block.

Inspired by: https://codepen.io/comehope/pen/GdrrZq

WebDev for You - Daily Interaction #95

WebDev For You - Daily Interaction #95

This demo showcases a header intro animation on load.

Inspired by this Dribbble shot: https://dribbble.com/shots/4822277-NYC

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

WebDev for You - Daily Interaction #49

WebDev For You - Daily Interaction #49

BRAINKICK IS
Rusted bicycles + poor sanitation. Does that give you an idea? How about unused car seats + biodiversity crisis? Brainkick forces you to match unused resources with personal, local and global problems to generate ideas for the circular economy. 

//

FEATURES
 * Uses custom code in Webflow to pull two random CMS items and animate then in and out from an IX2 interaction. 

* Animated line in the page border

* Lottie animation on button hover

// 

WHY IT'S CLONEABLE
Brainkick is a side project that uses the power of Webflow to help others do good. It's created by www.EmilVillumsen.com. I made it cloneable in hope of allowing as many as possible see the power of thinking in unused resources. To help the climate and the environment in using what's already around. Feel free to use the technique behind the tool.

// 

Stay tuned here on updates as it'll continue to evolve. Next features are dark mode, ability to lock resources or problems, and typing in in your own content.

Brainkick

Brainkick.app

OceanSafe is a textile technology company for circular, biodegradable, and toxin-free textiles. The core of their solutions is proprietary biodegradable synthetic textile fibers and yarns.

You can find the live page here: https://oceansafe.co