Posts

Showing posts with the label 学习笔记

jquery-confirm: a popup jQuery plugin

Image
  A jQuery plugin that provides a great set of features like Auto-close, Ajax-loading, Themes, Animations, and more. Official site How to use it? Step1: jquery, jquery-confirm js and CSS can do with nom, bower, or CDN $ npm install jquery-confirm or $ bower install craftpip/jquery-confirm or <script src="// https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js "></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> Step2: my HTML and CSS I set up a button, you can do any DOM you want. Step3: JavaScript select the DOM,and fire up with  .confirm() , also can do  .dialog()  or  .alert() content:the box content title: the title in the content icon: the icon in content, can do with font-awesome like my code, remember to link the font-awesome CSS fil...

Vivify — CSS animation library

Image
  I find the easiest animation library, applying with CSS class name. You don’t need to add so many files to your projects if only some animation is needed, which includes 72 animation selections. Official site How to use it? Step1: import the vivify.min.css you can download from the  GitHub page Step2: setup the items you want animate in HTML I only did it with the same gif images. done. Isn’t that so simple?😁 The list animation class name you can add: ball blink driveInBottom driveInLeft driveInRight driveInTop driveOutBottom driveOutLeft driveOutRight driveOutTop fadeIn fadeInBottom fadeInLeft fadeInRight fadeInTop fadeOut fadeOutBottom fadeOutLeft fadeOutRight fadeOutTop flip flipInX flipInY flipOutX flipOutY fold hitLeft hitRight jumpInLeft jumpInRight jumpOutLeft jumpOutRight popIn popInBottom popInLeft popInRight popInTop popOut popOutBottom popOutLeft popOutRight popOutTop pullDown pullLeft pullRight pullUp pulsate rollInBottom rollInLeft rollInRight rollInTop rollOut...

Muuri.js — responsive, sortable, filterable, draggable, and animated layout

Image
  M uuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Now it’s v4, and combined tech with  Packery ,  Masonry ,  Isotope , and  Sortable . It’s a very useful tool, fast and easy building functional layouts. Official website How to use it briefly: step1: import CDN or npm install npm install muuri or <script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script> if the browser doesn’t support Web Animations, install it. npm install web-animations-js or <script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script> Step2: HTML <div class="grid"> <div class="item"> <div class="item-content"> <!-- Safe zone, enter your custom markup --> This can be anything. <!-- Safe zone ends --> </div> <...

Bio Link — get your personal bio link page for free

Image
  bio link I t’s a social world with personality combined. Everyone needs a bio to display yourself and gather all sh*t together. Let the world get to know you better. Official site I tried it myself, and it is a cool customiz. free bio link gets the free bio link first to customize in the dashboard. you can embed the social and links with logos setup. The youtube video can watch inside the page. Others jump to the link page while clicking. there are some themes and can also create your own. you can also check the status of your bio. the setting for different link styles or your own domain Looking forward to hearing new functions updated soon. my bio link:  https://bio.link/yvonnedi 👉Follow me for more useful web development content! love sharing🥰