Coding BD given Creative Text Animation Effects. We created a simple text animation css. It is the most important part Of html css & javascript. We have given more importance to javascript effects. They used pure javascript effects. because they need a highly effective carousel. Thank you so much.
Free Source Code
😍😍 If You like this video Please like, share and subscribe This video.😍😍
😍😍 Check Others Programming Video👇
➡️ Parallax Animation effects: https://www.youtube.com/watch?v=pRvNZ6aMBoo
➡️ Sticky Navigation Bar On Scroll Using Vanilla Javascript: https://www.youtube.com/watch?v=XQJSc–XgO8
➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s
➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART…
➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky…
➡️ Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0
➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5…
➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF…
➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV…
➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6Hp…
➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR…
➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ…
➡️ Animated eid mubarak 2021 using Html CSS & Javascript: https://www.youtube.com/watch?v=60H2g…
Here is all Source code. You can follow this steps:
- Create 1 folder
- create 1 HTML file: index.html
- create 1 CSS file: style.css
- copy HTML code and pest HTML file, copy CSS code and past CSS file
- Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation | Coding BD</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Explanation in JS tab -->
<!-- The two texts -->
<div id="container">
<span id="text1"></span>
<span id="text2"></span>
</div>
<!-- The SVG filter used to create the merging effect -->
<svg id="filters">
<defs>
<filter id="threshold">
<!-- Basically just a threshold effect - pixels with a high enough opacity are set to full opacity, and all other pixels are set to completely transparent. -->
<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 255 -140" />
</filter>
</defs>
</svg>
</body>
</html>/* Explanation in JS tab */
/* Cool font from Google Fonts! */
@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px;
}
#container {
position: absolute;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
filter: url(#threshold) blur(0.6px);
}
#text1,
#text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: "Raleway", sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
<script>
/*
This pen cleverly utilizes SVG filters to create a "Morphing Text" effect. Essentially, it layers 2 text elements on top of each other, and blurs them depending on which text element should be more visible. Once the blurring is applied, both texts are fed through a threshold filter together, which produces the "gooey" effect. Check the CSS - Comment the #container rule's filter out to see how the blurring works!
*/
const elts = {
text1: document.getElementById("text1"),
text2: document.getElementById("text2")
};
// The strings to morph between. You can change these to anything you want!
const texts = ["Do", "You", "Have", "Subscribe", "Our", "Channel..?", "Yes I subscribed", "Thank you"];
// Controls the speed of morphing.
const morphTime = 1;
const cooldownTime = 0.25;
let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;
elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];
function doMorph() {
morph -= cooldown;
cooldown = 0;
let fraction = morph / morphTime;
if (fraction > 1) {
cooldown = cooldownTime;
fraction = 1;
}
setMorph(fraction);
}
// A lot of the magic happens here, this is what applies the blur filter to the text.
function setMorph(fraction) {
// fraction = Math.cos(fraction * Math.PI) / -2 + .5;
elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
fraction = 1 - fraction;
elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}
function doCooldown() {
morph = 0;
elts.text2.style.filter = "";
elts.text2.style.opacity = "100%";
elts.text1.style.filter = "";
elts.text1.style.opacity = "0%";
}
// Animation loop, which is called every frame.
function animate() {
requestAnimationFrame(animate);
let newTime = new Date();
let shouldIncrementIndex = cooldown > 0;
let dt = (newTime - time) / 1000;
time = newTime;
cooldown -= dt;
if (cooldown <= 0) {
if (shouldIncrementIndex) {
textIndex++;
}
doMorph();
} else {
doCooldown();
}
}
// Start the animation.
animate();
</script>