web素材

Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle …

Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame …

Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot Surf Project by Filip Slováček. When a grid item is clicked, the background and the thu…

Today we want to share something a little bit different with you: an image-less animated Star Wars tribute to Kylo Ren made with HTML & CSS only. This demo is kindly sponsored by PageCloud, the we…

Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controllin…

Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of eff…

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the backg…

Today we’d like to share some more animated organic SVG shapes with you. The idea is to integrate some flowy, natural looking shapes into a web page as decorative elements, sometimes with an interacti…

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we u…

Today we’d like to share some menu hover effects with you. We hope this set inspires you and gives you some ideas for your next project. The effects are either powered by CSS only or with the help of …

After making the Developer/Designer Page Layout Concept we wanted to try out some different effects for the pieces animation on the image. There are quite a lot of possibilities to animate the fragmen…

Today we’d like to share a little slideshow with you that is powered by CSS grids. The idea is to have several images shown in an artsy way and apply a different layout for each slide. We also play wi…

After playing with some on-scroll morphing background shapes, we wanted to explore some hover effects in this demo. By morphing SVG paths we can create some organic, flowy movements on hover. Doing so…

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make d…

Today we’d like to share a couple of simple tooltip animation ideas with you. The tooltips have different shapes mostly made of SVGs and we are animating them with anime.js. Some of these bouncy fella…

Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are curren…

Today we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kin…

Since WebGL is getting more and more popular, we start to see a bunch of websites using it for amazing creative designs. The brand Fornasetti recently published their website using the power of WebGL …

Today we want to show you some shader art made with WebGL. The idea is to create a decorative background effect by twisting images and hexagonal grid patterns smoothly on page scroll. The effect aims …

Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer.…

Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For …

Today we’d like to share an experimental 3D layout with you. The idea is to show some information about a gallery’s exhibition in an interesting way. Each artist has a “room” in the gallery which show…

Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation i…

Today we’d like to share some tiny hover effect ideas with you. The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to …