HTML

In this section, we'll define a simple HTML structure for our origami-inspired text input. This input field will transform with a folding animation when focused.

      <div class="origami-input-container">
        <input type="text" class="origami-text-input" id="origami-input" aria-label="Origami Folding Text Input" placeholder="Type something magical...">
      </div>
    

We use semantic markup with an input element, housed within a div for alignment. The aria-label ensures accessibility as it describes the function to screen readers.

JavaScript

Our JavaScript listens for focus and blur events to apply an unfolding animation. This uses CSS classes to transform the input field visually.

      document.getElementById('origami-input').addEventListener('focus', function() {
        this.classList.add('unfold');
      });

      document.getElementById('origami-input').addEventListener('blur', function() {
        this.classList.remove('unfold');
      });
    

The event listeners add or remove the unfold class depending on whether the input is focused or blurred, enabling the CSS animation we've defined.

CSS

Our CSS employs a glassmorphism style to give depth and interactivity. By default, the input appears folded slightly upward. On focus, it unfolds with a 3D rotation.

      .origami-input-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
      }

      .origami-text-input {
          border: none;
          padding: 10px 20px;
          border-radius: 5px;
          font-size: 16px;
          transition: transform 0.6s, box-shadow 0.6s;
          background-color: white;
          box-shadow: 0 4px 10px rgba(0,0,0,0.2);
          outline: none;
          transform: perspective(600px) rotateX(20deg);
      }

      .unfold {
          transform: perspective(600px) rotateX(0deg);
          box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      }
    

The .origami-text-input class sets the stage for interactivity, using perspective and 3D transform for unfolding animation. The .unfold class completes this animation when applied.

Conclusion

This interactive element brings a unique origami-like experience to web interfaces, allowing users to engage in a playful yet functional way. By marrying modern CSS techniques and JavaScript interactivity, we have created an input field that is both accessible and highly engaging.