Date:

Share:

SVG Overlay and Infinite Menu Background Animation

Related Articles

Small menu effect with SVG overlay and endless CSS animation in the background.

From our sponsor: Looking for an intuitive whiteboard style project management tool? Try the shortcut for free.

Today I want to share with you a little effect of the menu. It consists of two things that are an overlay animation of an SVG path when it opens (or closes) and an infinite background animation powered by an image network CSS.

Nothing really special, but I enjoyed putting it together and I hope it is somehow useful to you!

The SVG path animation for the overlay is based on This demo By Sebastian Gilbert who is a good start to a nice movement. If you need to adjust paths, I can recommend it fantastic Path Editor tool By Jan Armlin.

Theodore 01
Theodore 02
Theodore 025
Theodore 03

The endless background animation of the menu is done with CSS animation. The trick is to have a repeating set of images and once we translate into a visually equal part, we will start the animation anew.

.tiles 
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150vh;
	display: flex;
	opacity: 0.5;
	flex-direction: column;
	justify-content: center;
	transform: translate3d(-50%,-50%, 0) rotate(22.5deg);


.tiles__line 
	display: flex;
	transform: translateX(25%);
	animation: runner 10s linear infinite;


.tiles__line:nth-child(2) 
	animation-duration: 16s;


.tiles__line:nth-child(3) 
	animation-duration: 22s;


@keyframes runner 
	to 
		transform: translateX(-25%);
	

See the CSS-Only Marquee Effect if you want to understand its details.

And this is how everything connects:

Hope you enjoy it and find it useful!

Creating the effect of clear glass and plastic in Three.js

Inspirational Site Summary # 31

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles