11 practical text input and 6 button operation effects in web development

Text input effects

1.power-mode-input

PowerModeInput can make your text input box more eye-catching.

Address: https://github.com/lindelof/power-mode-input

##2.TextInputEffects

Simple style and effects to enhance text input interactions.

Address: https://github.com/codrops/TextInputEffects

##3.typewriterjs

A simple yet powerful native javascript plugin with a cool typewriter effect.

Address: https://github.com/tameemsafi/typewriterjs

##4.t.js

Lightweight$.Hypertext.Typewriter

Address: https://github.com/mntn-dev/t.js

5.shuffle-text

ShuffleText is a pure js text shuffling switching special effects plug-in. When the mouse slides over the specified text, the plug-in will continuously flip the text one by one, similar to the shuffling effect, which is very cool.

Address: https://github.com/ics-ikeda/shuffle-text

##6.react -typewriterThe effect of typewriter suitable for react

Address: https://github.com/ianbjorndilling/react-typewriter

7.t-writer.js

T-Writer.js is used to achieve native typewriter effects without any dependencies.

Address: https://github.com/ChrisCavs/t-writer.js

##8.malarkey Simulate the typewriter effect on DOM elements.

Address: https://github.com/yuanqing/malarkey

Friendly, flexible API, providing fine control

options to repeat the effect limit.

Options for applying effects to custom element properties.
• Allows pausing and resuming sequences on-the-fly
• Extensive testing with 100% coverage.
• No dependencies, super lightweight, only 1.5 min, or 0.8 KB minified and compressed
• 9.tinytyper
• TinyTyper A tiny library for use in Creates a typing effect on a specified text element.

Address: https://github.com/lourenc/tinytyper

##10.jquery.typer

## The #typer.js plug-in is a very interesting jQuery plug-in that outputs words one by one, similar to typing effects. typer.js is a relatively small plug-in that relies on jQuery. typer.js is also more convenient to use, allowing you to set typing time intervals, loop output, clear typing effect time, etc.

11. Phaser-typewriter

Typewriter effect wrapper for the Phaser.io Javascript library. Address: https://github.com/netgfx/Phaser-typewriter

##Button operation special effects

1.ElasticProgressElasticProgress can create a progress bar with an elastic effect. Address: https://github.com/codrops/ElasticProgress

2. vue-particle-effect-buttons

Burst particle special effect button component.

Address: https://github.com/dreambo8563/vue-particle-effect-buttons

3.nativescript-shine-button

NativeScript plug-in can add glowing effects to buttons.

Address: https://github.com/hamdiwanis/nativescript-shine-button

##4.react -parallax-button

Give the button a horizontal parallax effect.

Address: https://github.com/venits/react-parallax-button

##5.RippleButton

Button with Material Theme ripple effect.

Address: https://github.com/mig82/RippleButton

##6.css-ripple-effect

css-ripple-effect

is a cool flat style button click ripple effect made using pure CSS3. This effect is modeled after the Material design style click wave of the Android system.

Address: https://github.com/mladenplavsic/css-ripple-effect

The above is the detailed content of 11 practical text input and 6 button operation effects in web development. For more information, please follow other related articles on the PHP Chinese website!