Sticky Header With Smooth Transition On Scroll Using HTML, CSS & JQUERY
Hello friends, In this video i'm creating how to make sticky(fixed) header(Navbar) with smooth transition using html ,css clip path and jquery addClass and Remove Class when mousescroll.
► For more Interesting and educational videos so please visit our channel
► LearnDesign Channel : / learndesigntutorial
--------------------------------------------------------------------------
► PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS
--------------------------------------------------------------------------
Profile Card UI Design In HTML & CSS | Minimal Card Design__Just 5 Minutes
• Profile Card UI Design In HTML & CSS ...
Pure CSS Lavalamp menu hover effect by LearnDesign
• Pure CSS Lavalamp menu hover effect |...
Morphing Animation Effect Using Only Html, CSS and Jquery
• Morphing Animation Effect Using Only ...
How to navigate to another page with a smooth scroll using html,css,jquery
• How to navigate to another page with ...
Scroll to section smooth scrolling like onepage website using html,css and jquery
• Scroll to section smooth scrolling li...
Resizing text dynamically using html,css and jquery
• Resizing text dynamically using html,...
Easy tutorial equal height columns using only jquery
• Easy tutorial equal height columns us...
Scroll to target smooth scrolling using html,css and jquery
• Scroll to target smooth scrolling usi...
CSS style switch light and dark mode using html,css and Jquery
• Light/Dark Mode Toggle Switch using h...
Color to Grayscale Image on Jquery Mousemove
• Color to Grayscale Image on Jquery Mo...
Beautiful Website Loading Animation Only CSS
• Website Loading Animation Only CSS | ...
Easy Tutorial Change Background Color Using Jquery Mousemove
• Change Background Color Using Jquery ...
Awesome CSS Gradient Button Hover Effects
• Awesome CSS Gradient Button Hover Eff...
Change background image on hover with css transition effects
• Change background image on hover with...
Jquery mousemove focus effects
• Jquery mousemove focus effects
Easy tutorial to change background color onclick or hover method
• Easy tutorial to change background co...
Easy tutorial to like button heart effects using jquery
• Easy tutorial to like button heart ef...
Pure CSS Button Animation Wave Effects
• Wave Button Animation Hover Effect | ...
Website Landing Page Design Using HTML & CSS
• Website Landing Page Design Using HTM...
================= CSS TUTORIAL =================
Easy Masonry Grid Layout Using Only HTML & CSS
• Easy Masonry Grid Layout Using Only H...
Animated Skills Bar UI Design Using Pure HTML and CSS
• Animated Skill Bar UI Design Using HT...
Pure CSS Navigation Rollover Effects | FadeIn/FadeOut Image on Mouse Hover
• Show Image On Hover | Pure CSS Naviga...
================= HOW TO PORTFOLIO WEBSITE =================
Personal portfolio website html and css
Preview : • How to create a personal portfolio we...
Part 1 : • How to create a personal portfolio we...
Part 2 : • How to create a personal portfolio we...
Part 3 : • How to create a personal portfolio we...
Part 4 : • How to add video in your website usin...
================= NOTIFY BUTTON ANIMATION =================
Notify Button Animation | Newsletter Form Interactive Effects In HTML, CSS & JS
• Notify Button Animation | Newsletter ...
================= HOVER & ANIMATION VIDEO =================
Next level hover and animation Trendy hover effect.mkv
• CSS Hover Effect | Image hover effect...
================= HOW TO MAKE SLIDER =================
How To Make Slider In HTML, CSS and JS | Animated Image Slider Caption
• How To Make Slider In HTML, CSS and J...
Travel Website Hero Section Fullscreen Slider Using html, css and jquery
• Travel Website Hero Section Fullscree...
================= ANIMATION VIDEO =================
How to create custom loader | Website loading animation using html,css and jquery tutorial
• How to create custom loader | How to ...
Pure CSS FadeIn FadeOut Animation - CSS Property #01
• Pure CSS FadeIn FadeOut Animation - C...
Pure CSS Bouncing Ball Animation #02
• Pure CSS Bouncing Ball Animation 02
Square to Circle Rotate Loading Animation with Multiple Colors #03
• Square to Circle Rotate Loading Anima...
Pure CSS Three Dots Loading Animation #04
• Pure CSS Three Dots Loading Animation 04
Pure CSS Jumping Dots Loading Animation #05
• Pure CSS Jumping Dots Loading Animati...
Pure CSS Ripple Loading Animation Effect #06
• Pure CSS Ripple Loading Animation Eff...
Pure CSS Simple Loader Animation Effect #07
• Pure CSS Simple Loader Animation Effe...
Pure CSS Egg Crash Animation Effect 08
• Pure CSS Egg Crash Animation Effect 08
Pure CSS Flip Page Animation Effects 09
• Pure CSS Flip Page Animation Effects 09
Pure CSS Flip & Rotate Loading Text Animation Effect 10
• Pure CSS Flip & Rotate Loading Text A...
Delivery Truck Animation Using Only CSS | Simple CSS Animation Tutorial
• Delivery Truck Animation Using Only C...
Smooth & Beautiful Scroll Animation Using Vanilla Javascript Plugin Lax.js
• Smooth & Beautiful Scroll Animation U...
--------------------------------------------------------------------------
Image credit : https://unsplash.com/
Jquery : https://code.jquery.com/
Clip path generator : https://bennettfeely.com/clippy/
Header clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 65% 75%, 49% 100%, 35% 75%, 0% 15%);
Header Sticky clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 65% 75%, 49% 100%, 35% 75%, 0% 75%);
Email : [email protected]
#StickyHeader #FixedNavbar #SmoothTransition #LearnDesign #CSSTips