8 Snippets of CSS & JavaScript to Create Reflection & Refraction Effects

The simple action of light reflected from a surface or refracted through a surface can produce spectacular views. We see it every day in the physical world. It may be the way the sun looks through your office window or the light striking a mirror at right angles. They are like little science experiments that take place right in front of us.

Thanks to the latest CSS and JavaScript techniques, these effects are also dazzling web users. Everything from relatively simple reflection details to light-bending reflexes are popping up on our screens. Even very realistic behaviors are possible.

Today, we will introduce you to some excellent code items that bring mirror effects, reflection and refraction to life. Let’s take a look!

Bonsai animation by Kamil

This finely animated bonsai provides a calming feeling that surpasses the serious technology that makes it work. It uses SVG and GSAP animation library to create a beautiful water reflection effect.

Watch the Pen Bonsai animation by Kamil

PBR reflection with ycw

This is a very unique fragment with a multitude of effects. First, there is a rotating shape that hover in front of a mirror-like surface. Note also the shiny reflection below. The lighting and shading is great. You can also use your mouse or touch to change the perspective.

See the Reflection PBR Pen at ycw

Orb Cursor Movement Mirrored Light by Diana Le

This fragment is proof that mirror effects can be applied in unfamiliar ways. Two bright orbs appear against a black background. Move your cursor to control on the left (white), while the other indicates your movements. More fun than these orbs should be all over the screen together!

Watch Oriana Light Orb Cursor Movement with Diana Le

GLSL: Refractive rays by Liam Egan

The color and texture of this animation is inspiring. Rows of rows of fields move towards you, and your cursor position changes the refractive index. The look goes from glass to static to old school TV. HTML 5 canvas and JavaScript are used to create the ultra-smooth movement.

Look at the GLSL Pen: Refractive Rays by Liam Egan

Pure CSS text mirror and Tim

Applying mirror text is surprising. With just a few dozen lines of pure CSS, you can achieve an engaging effect that is sure to grab a user ‘s attention. The SEC’s secret is to transform the property, which turns the mirrored version upside down. From there, a gradient is used to create a more realistic look.

Look at the Pen Pure css text mirror by Tim

Text Refraction by Juan Fuentes

Add some custom text and this article will make it look like it is viewed through a crystal ball. Cursor movements alter both the view and the magnitude of the effect. When combined with the colorful background, the whole presentation evokes 1960s imitation.

Look at the Refraction of Pen Text by Juan Fuentes

Phone Reflection by Luke Lincoln

Take a look at this abstract view of modern obsession – staring blankly at your phone. Click on the phone and the simulated text slowly shows up the body of the subject. It’s like what you would see in a dark movie theater.

Check out the Phone Pen Reflection by luke lincoln

Three.js Reflection the seanwasere

Speaking of abstract works, this virtual game show is something to see. 3D balls roll with mirrors around and the light bounces from them. You can also change the perspective of the scene, adding even more intrigue to the excellent special effects. If astronauts play games in space, this might be the one.

See the Pen Three.js Reflection by seanwasere

Adding a New Perspective to the Web

Impressively, as it turns out, the developers are creating some mirror effects, reflections and refraction that are just amazing for the web. Not only do they look incredible, but many of them also make great use of physics to add a layer of realism.

Want to see more excellent clips? Take a look at our CodePen collection!

Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *