Posts

Showing posts with the label designer

Disappear text animation with html and css in 2022 by jishaansinghal with full source code

-
Image
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...
Post a Comment
Read more

How to add Squarespace auto layout hover Animation in 2022 by jishaansinghal

-
Image
How to add Squarespace auto-layout hover Animation in 2022 by jishaansinghal Source Code: .user-items-list-simple .list-item { transition: .5s ease-in-out; } .user-items-list-simple .list-item:hover { transform: translateY(-20px); box-shadow: 10px 14px 14px 0px #000 inset; } keywords: #website design and development,#motivation,#personal #development,#career,#business,e#commerce,#job,#moshiur,#codersfoundation,l#ifestyle,#rich #life,#website #design,#bangla tutorial,c#oding,#computer programming,#online career,#freelancing,w#ordpress,#wordpress #bangla #tutorial,#woocommerce,w#ordpress p#lugins,#website development,#wordpress development,#make website,#job #opportunity,#Funny,#Bangladeshi,#Youtuber,#Comedy,#Entertainment,#Prank FreelancingOnline Money EarningTutorialEducationLearn EnglishFunny Videosmake money onlinevlogFreelancer nasimbangla funny videobangladesh top freelancermotivational video best outsourcingfreelancingfreelancing bangla tutorialoutsourcing institutejamal...
Post a Comment
Read more

How to add Squarespace Custom Button Advanced hover animation With CSS by jishaansinghal in 2022 1st time Here!

-
Image
How to add Squarespace Custom Button Advanced hover animation With CSS by jishaansinghal in 2022 1st time Here! Source Code: Paste this code in the Custom CSS window .cl-effect a { border: none !important; background-image:url(https://static1.squarespace.com/static/6189d8fa98db4e43d0a676a0/t/61badd63be49b2358c546cd3/1639636323403/speech-bubble-orange.png) !important; background-repeat: no-repeat; width: 200px; height: 71px; background-position: center center; padding: 10px 80px !important; } .cl-effect a span::before{ color:#f19f53; } .cl-effect { width: 100%; z-index: 100; text-align: center; } .cl-effect a { display: inline-block; outline: none; text-decoration: none; font-family: Lato, sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 12px; border: 2px solid rgb(255, 255, 255); color: rgb(255, 255, 255); text-align: center; overflow: hidden; z-index: 100; } .cl-ef...
Post a Comment
Read more

Squarespace custom image animation effects first time on youtube in 2022 by jishaansinghal

-
Image
Squarespace custom image animation effects first time on youtube in 2022 by jishaansinghal Source Code: BLOCKID img{ transform: scale(1); transition: .3s ease-in-out; } BLOCKID:hover img{ transform: scale(1.1); // transition: .5s ease-in-out; } BLOCKID .image-overlay{ transition: .3s ease-in-out; position: absolute; top: 40%; left: 0; width: 100%; height: 100%; opacity:0; } BLOCKID:hover .image-overlay{ transition: .3s ease-in-out; position: absolute; top: 0%; left: 0; width: 100%; height: 100%; opacity:1; background: linear-gradient(to bottom, rgba(21,21,21,0.1) 0%, rgba(21,21,21,0.9) 75%); } keywords: squarespace, squarespace tutorial, squarespace 7.1, squarespace css, squarespace custom css, squarespace hacks, squarespace tips and tricks, custom css, lottie animation squarespace, squarespace css tutorial, squarespace advice, squarespace help, make it, online how to, squarespace domain, squa...
Post a Comment
Read more

How to install and use owl carousel mousewheel animation slider with full source code by jishaansinghal 2022

-
Image
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=...
Post a Comment
Read more

How to install and use Image Magnifier Glass ZOOM Effect A2Z In jQuery - BUP.js

-
Image
 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>     ...
Post a Comment
Read more

How to add Circular Filter Menu In jQuery 2022 by jishaansinghal

-
Image
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...
Post a Comment
Read more

How to install and use Easy Cross-platform Page Scroll Plugin with CDN withoutout download By jishaansinghal 2022

-
Image
 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...
Post a Comment
Read more

How to install and use Sequential Animation Plugin on your website by jishaansinghal 2022

-
Image
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=...
Post a Comment
Read more

Happy New year 2022 animation website Design with Full source code by jishaansinghal

-
Image
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{ ...
Post a Comment
Read more