67 useful front-end tools, libraries and resources

This list contains many types of resources, so I've organized them into groups here.

Javascript Library

Particles.js — A library for creating cool floating particles on the web

Three.js  — A library for creating 3D objects and 3D spaces in the web

Fullpage.js — Quickly implement full-screen scrolling features

Typed. js — Typewriter effect

Waypoints.js — Trigger a function when scrolling to a certain element position

Highlight.js — web Syntax Highlighting

Chart.js — Use JavaScript to create beautiful charts

Instantclick — Can significantly speed up website loading time and pre-emptively click when hovering the mouse Load resources

Chartist — Another chart library

Motio  — A Sprite library based on animation and panning

Animstion — CSS jQuery plug-in for animated transition

Barba.js — Flowing page transition

TwentyTwenty — A comparison picture Visual diff tool

Vivus.js — Draw animation on SVG

Wow.js — Show animation when scrolling

Scrolline.js — Display scrolling progress when the page scrolls

Velocity.js — Fast and smooth JavaScript animation

Animate on scroll — Beautiful page scroll element animation

Handlebars.js — Javascript template

jInvertScroll — Parallax scrolling

One page scroll — Another page scroll library

##Parallax.js — Parallax that responds to smart device orientation changes Engine

Typeahead.js — Search completion

Dragdealer.js — Cool drag

Bounce .js — Create cool CSS3 animations

Pagepiling.js — Full screen scrolling

Multiscroll.js — Two columns vertically inverted Scroll toward

Favico.js — Dynamic favicon

Midnight.js  — Fixed head switching effect

Anime.js  — Animation library

Keycode — Get the JavaScript keycode of the keyboard keys

Sortable  — Drag and drop plug-in

Flexdatalist  — Autocomplete

Slideout.js  —  Mobile application side sliding navigation

Jquerymy  — Using jQuery Implement two-way data binding

Cleave.js — Real-time formatting of input content

Page — Client single-page application routing

Selectize.js — Hybrid selection box for adding tags

Nice select  — JQuery library for creating beautiful selection boxes

Tether — Use fixed positioning to create relevant elements

Shepherd.js — Create onboarding for your app

Tooltip — tooltip prompt box

Select2 — Jquery selection box plug-in

IziToast — Notification pop-up window implementation

IziModal —Modal box implementation

CSS library/Design related

Animate.css— Animation library

Flat UI Colors — Flat design color matching

Material design lite— Based on the framework of Google material design

Colorrrs — Random color generator

Section separators — CSS to achieve area segmentation

Topcoat — Framework

Create ken burns effect — Using CSS3 Animation to realize Ken burns special effects

DynCSS — Add function to CSS, dynamic CSS

Magic animations — CSS3 to realize animation special effects

CSSpin — css spinners collection

Feather icons — Icon collection

Ion icons — Icon collection

Font awesome — Icon collection

Font generator — Combination of multiple fonts Create mixed fonts

On/Off switch — Use CSS to create on/off switches and radio buttons

UI Kit — Framework

Bootstrap — Frame

Foundation — Frame

Useful Products/Links

cheatsheet — All tags that can be written in

Ghost  — A blogging platform based on Node.js

What runs — A Chrome plug-in for website technical analysis

Learn anything — A powerful mind map for analyzing a certain topic

The above is the detailed content of 67 useful front-end tools, libraries and resources. For more information, please follow other related articles on the PHP Chinese website!