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