Skip to main content

Liquid Distortion Effect On Text | HTML, CSS And BlotterJS

by Rustcode
liquid-distortion-effect-using-blotterjs-rustcode


In web development, Javascript has very broad libraries that help every developer to create various animation and dynamic websites. so in this article, we will learn how to add effect on website text using a JsPlugin


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
<title>Liquid Distortion Effect On Text | Rustcode</title>
</head>
<body>

 main content.

</body>
</html>


2. BLOTTERJS PLUGIN

The basic HTML structure is ready for us, now let's include the JavaScript plugin in this HTML document. You can download all those plugin from here.

Blotter Script: Download

Liquid Script: Download

Blotter Github: Download

<!DOCTYPE html>
<html>
<head>
    <title>Liquid text | BlotterJS</title>
    <script src="https://cdn.rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script>
    <script src="https://rawgit.com/bradley/Blotter/master/build/materials/liquidDistortMaterial.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  main content.

<script src="script.js"></script>
</body>
</html>


3. CONTENT

<body>

 <div id="blotter-container"></div>

<script src="script.js"></script>
</body>


4. CSS

div {
 padding-top: 220px;
 text-align: center;
}


5. SCRIPT

const text = new Blotter.Text('BlotterJS', {
    family: "Arial, serif",
  	size: 100,
    paddingLeft: 100,
    paddingRight: 100
});


let material = new Blotter.LiquidDistortMaterial();

material.uniforms.uSpeed.value = 0.3;
material.uniforms.uVolatility.value = 0.10;
material.uniforms.uSeed.value = 0.1;

let blotter = new Blotter(material, {
  texts: text
});

let scope = blotter.forText(text);
let element = document.getElementById('blotter-container');
scope.appendTo(element);


6. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


7. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment