What you will learn?

  • Liquid Distortion Effect (very few lines of code)
  • Clip image with text using background-clip property

Quick Introduction

Yesterday I was checking few animations on codepen and there I saw one animation which looked like some liquid distortion effect. I was amazed by that animation and when I looked at its code I was mind blown because it was exact 10 lines of code.

After researching a bit I found out that animation was made using a library on GitHub by robin dela.

Obviously that animation itself is hard to make without this library but we can use this small library and add that liquid distortion effects to our project with just 6-10 lines of code.

Here’s what we are making:

liquid distortion effect using css

Importing Few Libraries

This library by robin dela works underhood by using two other animation librariesGsap and Three.js. So we have to import these libraries first.

Both libraries CDNs scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js" integrity="sha256-3arngJBQR3FTyeRtL3muAGFaGcL8iHsubYOqq48mBLw=" crossorigin="anonymous"></script>
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js" integrity="sha256-gSh8eotzb/CVvCREGPUNgIWuDnTYnZvVOQnRrP1eDjI=" crossorigin="anonymous"></script>

Basic HTML

<div class="container">
        <div class="heading">
            <h1>
                LIQUID DISTORTION <br>EFFECT
            </h1>
        </div>
        <div class="images"></div>
    </div>

The above code is basic HTML markup in which there is .container class that wraps the whole content and used to center the entire content using CSS later.

But the main part here is .images class in which we will inject images through javascript and create a liquid distortion effect.

General CSS

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');4

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Bowlby One SC', cursive;
    letter-spacing: 5px;
    background-color: rgb(34, 33, 33);
}

The code above just removes default margin, paddings and sets box-sizing to border-box. And sets background color and font.

Clipping Image to Text

Awesome Liquid Distortion Effect[2020]: Few Lines of Code 1 » Csspoint101
h1{
    font-size: 40px;
    background-image: url(https://unsplash.it/200);
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
}

As you can see above I have clipped images inside text. That is done using a background-clip property. First I have set that to text and then I made the color of the text to transparent so we could see the image.

But as of now the background-clip property is not fully supported so don’t forget to use WebKit.

And you everytime you reload that page you get random image. How I am getting that? Is that javascript?

No, I am using unsplash.com (site from where you can get free stock photos) link which allows grabbing images from there site of specific width and height.

.container{
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.images{
    width: 480px;
    height:500px ;
    margin-top: 5%;
    object-fit: cover;
    box-shadow: 11px 14px 17px -8px rgba(0,0,0,0.62);
}

The above code centers the whole content using a flexbox and adds some style to the image container.

JavaScript Part

You can download the whole library here but I would suggest you go to the dist folder and click on hover-effect.umd.js and copy this file as raw and paste in any file and save. Then link that file with your HTML file.

After adding the library go to this link and download that image pattern you want to show and save in your project folder. In my case, I have downloaded fluid.jpg.

We will use this image as a liquid distortion effect pattern in the javascript part. Or you can use your own pattern image if you have one


var myAnimation = new hoverEffect({
	parent: document.querySelector('.images'),
	image1: './images/img1.jpg',
	image2: './images/img2.jpg',
	displacementImage: 'images/fluid.jpg'
});

First, you need to mention your parent container in which you want an animation in my case it is .images class.

Then add the images(your image) you want to animate and finally use that image which I told you to save and set that to displacementImage property.

That’s it your liquid distortion effect is ready by just writing a few lines of code.

Thanks for reading my article. If you liked it do share it with your friends and also check out another post on- Learn to create Custom Cursor with CSS or 50+ Best SVG Animation and 20+ Best Programming Books.