Asmot Academy

Disappear text animation with html and css in 2022 by jishaansinghal with full source code Html:    <div class="animation">   <span>d</span> <span>i</span> <span>s</span> <span>a</span> <span>p</span> <span>p</span> <span>e</span> <span>a</span> <span>r</span> </div> Css: body {   height:100vh;   font-family: 'Poppins', sans-serif;   font-size:12vw;   text-transform: uppercase;   overflow: hidden; } .animation {   position: absolute;   left:0;   right:0;   margin: auto;   width:100%;   text-align: center;   height:fit-content;   bottom:0;   top:0; } .animation span {   font-weight: 900;   display: inline-block;   color:transparent;   text-shadow: 0px 0px 0px black;   animation-duration: 3s;   animation-iteration-count: infinite; } .animation span:nth-child...

How to install and use owl carousel mouse wheel animation slider with full source code by jishaansinghal 2022 Source Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/> <style> body{ background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); height: 70vh; } img{ width: 100%; height: 250px; } </style> </head> <body> <div class="owl-carousel owl-theme" style=...

 How to install and use Image Magnifier Glass ZOOM Effect In jQuery - BUP.js <html>         <head>                 <meta charset="UTF-8" />                 <title>jQuery BUP.js: Image Magnifier Glass Example</title>                 <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">                 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/flatly/bootstrap.min.css">                 <style>                                      </style>         </head>         <body>     ...

How to add Circular Filter Menu In jQuery 2022 by jishaansinghal CSS CDN:  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">     <link rel='stylesheet prefetch' href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">     <link rel="stylesheet" href="https://www.jqueryscript.net/demo/circular-filter-menu/style.css">     <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> JS CDN:   <script src="https://code.jquery.com/jquery-3.6.0.js"         integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>     <script src="https://www.jqueryscript.net/demo/circular-filter-menu/main.js"></script> HTML CODE:   <div class="muck-up">         <div class...

 How to install and use Easy Cross-platform Page Scroll Plugin with CDN withoutout download By jishaansinghal 2022 CSS CDN: <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> JS CDN: <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://www.jqueryscript.net/demo/one-page-section-scroll/SectionScroll.js"></script> CSS CODE:   body {   margin: 0; } section {   height: 140vh; } section:nth-child(1) {   background-image: linear-gradient(to bottom, #f001d3, #a473ff, #259dff, #00b7ff, #12c7eb); } section:nth-child(2) {  background-image: linear-gradient(to left top, #228fac, #008dd3, #2682f1, #9866f3, #eb12d0); } section:nth-child(3) {  background-image: radial-gradient(circle, #228fac, #008dd3, #2682f1, #9866f3, #eb12d0); } section:nth-child(4) {   background-image: radial-gradient(circle, #f001d3, #a473ff, #259dff, #00b7ff, #12...

How to install and use Sequential Animation Plugin on your website by jishaansinghal 2022 CSS CDN:  <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">         <link href="https://www.jqueryscript.net/demo/Sequential-Animation-Library-jQuery/dist/css/jquery.canvas-animation.min.css?v2" rel="stylesheet"/>         <link href="https://www.jqueryscript.net/demo/Sequential-Animation-Library-jQuery/css/canvas.css" rel="stylesheet"/>         <link href="https://www.jqueryscript.net/demo/Sequential-Animation-Library-jQuery/css/animation.css" rel="stylesheet"/>         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> JS CDN:   <script src=...

Happy New year 2022 animation website Design with Full source code by jishaansinghal JS CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script> HTML CODE: <section> <img src="bg (2).jpg" id="bg"> <img src="cloud1 (1).png" id="cloud1"> <img src="cloud2 (1).png" id="cloud2"> <div id="tree"></div> <div id="text"><img src="hp.png" alt=""></div> </section> CSS CODE: <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: #f00; height: 200vh; } section{ position: fixed; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } section::after{ ...

In this video, I'm going to show you how to Install and use Animated Progressbar With Full Source code by jishaansinghal CSS CDN:  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.jqueryscript.net/demo/linear-progress-indicator-bar/assets/css/jquery.rprogessbar.min.css"> <link rel="stylesheet" href="https://www.jqueryscript.net/demo/linear-progress-indicator-bar/assets/css/style.css"> JS CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script> <script src="https:/...