Particles Morphing Text using JavaScript - Coding Torque

Particles Morphing Text

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Particles Morphing Text using JavaScript. You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let's get started 🚀.

Let's go step by step:

Step 1: HTML Code

<div class="triggers">
	<span data-disabled="true" data-color="#3D8CD0">CLICK</span>
	<span data-disabled="true" data-color="#D32A7B">TO</span>
	<span data-disabled="true" data-color="#2AD37A">SWITCH</span>
</div>

Step 2: CSS(LESS) Code

body {
	font-family: 'Titillium Web', sans-serif;
	margin: 0;
	overflow: hidden;
}

.triggers {
	bottom: 20px;
	color: white;
	left: 50%;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	width: 100%;
	z-index: 10;
	
	span {
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		margin: 0 20px;
		padding: 2px 4px;
		transition: opacity .5s, color .5s;
		
		&[data-disabled="true"] {
			opacity: 0.3;
			pointer-events: none;
		}
		&:hover {
			color: red;
		}
	}
}

Output Till Now

Check Codepen for JavaScript:

See the Pen Three Particle Morphing Text by John Healey (@jhealey5) on CodePen.

Code Credits: @jhealey5

Written by: Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 

 Follow us on Instagram for more projects like this👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights