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

  Use this JavaScript library to generate a lightbox with animated and responsive images. BaguetteBox is a JavaScript library, that generates a lightbox with animated and responsive images. And it also supports swipe gestures on touch-screen devices. Official site: GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script written in pure JavaScript zap: Simple and easy to use lightbox script written in pure JavaScript - GitHub - feimosi/baguetteBox.js: Simple and… github.com How to use it? Step1: Install with npm, yarn, bower, or CDN npm install baguettebox.js --save yarn add baguettebox.js bower install baguettebox.js --save or, <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.css "> <script src= https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.js " async></script> Step2: HTML The content is inside the  gallery . Every image is in  <a> tag ...

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