HTML CSS & JAVASCRIPT, YouTube

Creative Text Animation Effects

Creative Text Animation Effects html css & javascript

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 

Creative Text Animation Effects

😍😍 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:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. 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>

Leave a Reply

Your email address will not be published.