CodemySite_Web development

  Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web. Can you play around with tooltips like a pro in one step? Yes, with Tippy.js. Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element. Official site: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the… atomiks.github.io Step 1: import npm or CDN # npm npm i tippy.js # Yarn yarn add tippy.js or, <!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/...

  Use this cool animation library for your next JavaScript project. Typed.js is a JavaScript animation library. Any string can type customer animated with content, speed, and so on. The most common use as I notice is for a landing page that looks modern in style. Official site: Typed.js Another demo made with love by Matt Boldt. # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower… mattboldt.com Step1: import js library with npm, yarn, bower, or CDN npm install typed.js yarn add typed.js bower install typed.js or <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> Step2: HTML The content is included in the <div> The place content actually is typing is the <span> Step3: JS fire up the library with  new Typed('id',options) Customization: stringsElement: the content want to show typeSpeed: the speed of typing backDelay:backDelay time before backspacing in milliseconds fadeOut: fade out animation instead of ba...

  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...

  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...