"Text Morph" using HTML

<!DOCtype html>
<html>

<style>
  /* Explanation in JS tab */
  /* Cool font from Google Fonts! */
  
  @import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');
  body {
    margin: 0px;
  }
  
  #container {
    /* Center the text in the viewport. */
    position: absolute;
    margin: auto;
    width: 100vw;
    height: 80pt;
    top: 0;
    bottom: 0;
    /* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
    filter: url(#threshold) blur(0.6px);
  }
  /* Your average text styling */
  
  #text1,
  #text2 {
    position: absolute;
    width: 100%;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 80pt;
    text-align: center;
    user-select: none;
  }
</style>

<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>
  <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 = [
      "I",
      "am",
      "Devansh Mishra ",
      "I like ",
      "CODING",
      
    ];

    // 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>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more