How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1> <!– Adding button –> <button onclick=”typeWriter()”>Click me</button> <p id=”typeeffect”></p> Step 2 : Adding JavaScript <script> var i = 0; var txt = ‘This a type writer effect demo.’; var speed = 50; function typeWriter() { […]
How to Create a full screen video background using HTML, CSS
Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class=”videobg”> <video src=”https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4″ loop muted autoplay> </video> <div class=”overlay”> </div> <h1>Fullscreen video background </h1> </div> Adding CSS body { margin: 0; padding: 0; } .videobg { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(body { margin: 0; padding: […]
How to Create an Off-Canvas Menu / Side Bar Navigation
How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id=”mySidenav” class=”sidenav”> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>×</a> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <div id=”main”> <h2>Off-Canvas Menu / Side Bar Navigation</h2> <p>Click on the element below to open the side navigation menu, and push this content to the […]
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding HTML : <div class=”bgimg”> <div class=”topleft”> <div id=”color-overlay”></div> </div> <div class=”middle”> <h1>COMING SOON</h1> <hr> <p id=”demo” style=”font-size:30px”></p> </div> <div class=”bottomleft”> <p>www.adaptabiz.com</p> </div> </div> Step 2 : Adding CSS: body, html { height: 100%; margin: 0; […]
How to Create Weight Converter using HTML and JavaScript
How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound to Kilogram</h2> <p>Type a value in the Pounds field to convert the value to Kilograms:</p> <p> <label>Pounds</label> <input id=”inputPounds” type=”number” placeholder=”Pounds” oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”> </p> <p>Kilograms: <span id=”outputKilograms”></span></p> Adding Javascript function weightConverter(valNum) { document.getElementById(“outputKilograms”).innerHTML=valNum/2.2046; } […]
How to create a Scroll indicator with CSS and JavaScript
How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class=”header”> <h2>Scroll Indicator</h2> <div class=”progress-container”> <div class=”progress-bar” id=”myBar”></div> </div> </div> <div class=”content”> <h3> Please Scroll Down to See The Effect</h3> <p>This progress bar will <b>show how far a page has been scrolled</b>.</p> <p>It also <b>works when you scroll back […]
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very simple tutorial, we gonna show you, how to convert or change any Color image into Black and white How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale) Step […]
How to Create a JavaScript Countdown Timer
There are many a times, when you’re going to need a countdown clock for your project. You may have an event, a sale, a promotion, or a game, where you want to show off the remaining time to the viewers/visitors. Well you can always opt for in built plugins, but here are the benefits you’ll […]
How to Create an Avatar image with CSS
How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img src=”https://adaptabiz.com/wp-content/uploads/2022/01/img_avatar.png” alt=”Avatar” class=”avatar”> <img src=”https://adaptabiz.com/wp-content/uploads/2022/01/img_avatar2.png” alt=”Avatar” class=”avatar”> Step 2) Add CSS: .avatar { vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; } Full Code and Output : See the Pen Avatar image with CSS […]
How to Change Background Images on Scroll with CSS.
How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class=”bg-image img1″></div> <div class=”bg-image img2″></div> <div class=”bg-image img3″></div> <div class=”bg-image img4″></div> <div class=”bg-image img5″></div> <div class=”bg-image img6″></div> <div class=”bg-text”>DEMO</div> Step 2) Add CSS: body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } […]