Website Design Using HTML,CSS & JS | Landing Page Design | Smooth Scroll Animation | Slick Slider

Hello friends, In this video I'm creating website homepage design using html,css and js with smooth scroll effect, scroll based animation, slick slider, rolly js is smooth scrolling effect, aos is scroll based animation.

► PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS
https://youtube.com/learndesigntutorial
--------------------------------------------------------------------------------------------------
0:08 - Preview(Landing Page Design)
4:04 - Header style using css flex property
6:14 - Button style hover effect, css before selector
10:52 - Transparent gradient border style using css linear gradient
17:47 - Slick slider html structure
18:33 - Call/Init slick slider
19:04 - Copy jquery,slick slider link
20:42 - Slick slider arrow style
25:16 - Show image on hover
30:36 - Start smooth scrolling effect using rolly js
31:50 - Call/Init rolly js
33:17 - Start scroll base animation using aos js(Animate on scroll)
34:00 - Call/Init aos js
34:25 - Set data attribute for each div/block

Make Spinning Wheel Only CSS, JAVASCRIPT | Simple Spinning Wheel Game Decide a Random Numbers
https://youtu.be/Gcz5RM-imJ8

Responsive Navigation Menu Bar using HTML CSS and JAVASCRIPT | CSS Media Query | Responsive Navbar
https://youtu.be/bIlqqzI4ByE

Toggle Password Visibility Using Javascript | Login Form Show Hide Password Field Text
https://youtu.be/iA9ZxELnikM

How to Check Confirm Password Field | Password Matching In Javascript
https://youtu.be/bVkl2PJFIA8

Website loading animation using html,css and jquery tutorial
https://youtu.be/nmIFfEYT4kg

Pure CSS FadeIn FadeOut Animation - CSS Property #01
https://youtu.be/tbqyCwoH_-k

Pure CSS Bouncing Ball Animation #02
https://youtu.be/eMIrV9fVZ3Y

Square to Circle Rotate Loading Animation with Multiple Colors #03
https://youtu.be/YE70iFa4NA0

Pure CSS Three Dots Loading Animation #04
https://youtu.be/aglMDLGeXnc

Pure CSS Jumping Dots Loading Animation #05
https://youtu.be/qjCcbWZ7dDU

Pure CSS Ripple Loading Animation Effect #06
https://youtu.be/stTCr1v_TJA

Pure CSS Simple Loader Animation Effect #07
https://youtu.be/hLUA76S0ntI

Pure CSS Egg Crash Animation Effect 08
https://youtu.be/M9gcoXknDew

Pure CSS Flip Page Animation Effects 09
https://youtu.be/f9iWadJp9a0

Pure CSS Flip & Rotate Loading Text Animation Effect 10
https://youtu.be/MF0oMODWjz0

► Website Landing Page Design | WEBSITE UI DESIGN

Portfolio Website Design | Website Landing Page Design & Animation | HTML, CSS, ANIME JS
https://youtu.be/lXifJ9jzm9Q

Website Landing Page Design & Animation with Slider using HTML, CSS & JS | Website UI Design
https://youtu.be/0Gu6Y1ndv04

Beauty Aesthetic Hero Section Website Design | Landing Page Design | Anime js Animation Tutorial
https://youtu.be/_gcWFxrYecw

Landing page design, Mouse scroll slider, Infinite text scrolling, Sidebar menu HTML, CSS & JQUERY
https://youtu.be/ezunNVYPJDs

Ecommerce Website Landing Page Design with Sign In Popup & Cart Sidebar Using HTML,CSS & JAVASCRIPT
https://youtu.be/6cI_M9zRDuk

Landing Page Design Using HTML, CSS & JS | Website UI Design Tutorial
https://youtu.be/kNLn4SQW2u8

Portfolio Website Design With Animation Using HTML, CSS & JS | GSAP - GreenSock Animation
https://youtu.be/Xn1aJkV5mzg

Website UI Design With Slider Using HTML,CSS & JS | Landing Page Website Design Tutorial
https://youtu.be/wvbCdrfFZMc

Landing Page UI Design Using Adobe XD
https://youtu.be/pTTCQuwTRk0

Landing Page UI Design using HTML, CSS & Tilt js
https://youtu.be/s59m1_ctdwY

Landing Page Design With Animation Using HTML, CSS | Waves Animation, Dropdown Menu, Circle Rotation
https://youtu.be/I6wlnpTUMDs

► FULLSCREEN NAVIGATION MENU
Fullscreen Navigation Menu | Toggle Menu | Change image on hover Using HTML,CSS & GSAP-GreenSock JS
https://youtu.be/lehqYOCm6Tc

--------------------------------------------------------------------------------------------------
Slick Carousel : https://kenwheeler.github.io/slick
Cdnjs : https://www.cdnjs.com
Rolly js: https://github.com/mickaelchanrion/rolly
Aos js: https://michalsnik.github.io/aos
Images i used in this video: https://rb.gy/dp8ytx
Image credit : https://www.pexels.com
Email : help.learndesign@gmail.com
For support : https://www.patreon.com/helplearndesign
#completewebsite #websitedesign #landingpage #smoothscroll #aos #rollyjs #animation #slickslider #websitelandingpage #animatedlandingpage #beautywebsite #cosmeticwebsite

Видео Website Design Using HTML,CSS & JS | Landing Page Design | Smooth Scroll Animation | Slick Slider канала LearnDesign