Animated Website Homepage Design | Landing Page Design, Animation On Scroll, Smooth Scrolling Effect



​@LearnDesign #learndesign #aosjs #luxyjs #slickcarousel #learndesigntutorial #animation

Hello friends, in this video I’m creating an animated website homepage design with animation on scroll using aos js, smooth scrolling effect using luxy js, image slider using slick carousel, button hover effect using before(slide left to right), menu hover effect(border scale left to right) and star 360deg rotate animation using CSS keyframe animation, guys All the thing doing only HTML, CSS(css3 animation and hover effect) and jQuery Plugins(luxy js, aos js, slick caoruse). friends I hope you love these videos if you have any questions in your mind feel free to comment or email I’ll try to answer.

► PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS

————————————————————————————————–
0:08 – Preview(Website Homepage Design)
1:54 – Figma Design File
2:29 – Folder Structure of Creating a Website
2:46 – Add a Slick Carouse js, AOS js, jQuery & Luxy js Link
4:13 – Normalize CSS
4:23 – Start HTML Structure for Header & Other Section
5:12 – Section 1(3 Images In One Row Using CSS Flex)
6:07 – Hero Section
6:13 – Section 2(LeftSide Text & Right Side Image)
8:11 – Section 3(LeftSide Image & Right Side Text)
8:50 – Section 4(3 Images, 360 Rotate Star)
10:00 – Section 5(Background VIdeo & Overlay Text, Click to Play, Video Poster)
10:54 – Section 6(Autoplay Image Slider with Slider Carousel)
11:32 – Footer(Cirular Text with Rotate Animation)
12:23 – Working with CSS
16:11 – Button Hover Effect, CSS Before(left to right)
16:55 – Star 360 Rotating Animation(CSS Keyframe Animation)
21:35 – Overlay Text & HTML5 Background Video & Video Poster
22:00 – jQuery On Click to Play Videos
23:00 – jQuery Slick Carousel Integration(Autoplay, Continue Scrolling Image Slider)
24:21 – Circular Text 360 Rotating Animation(CSS Keyframe Animation)
25:06 – Email Link Border Hover Effter(Border Scale left to right)
26:10 – Working with Smooth Scrolling Effect with Luxy js
28:19 – Working with Animation On Scroll with AOS js

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

Porfolio website design with slider using html,css and jquery

Minimal Profile Card UI Design using Html & CSS – Design+Code | UI Design

Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-1

Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-2

► LOADER ANIMATION
3 Cool CSS Loading Animation Effects | Pure CSS Animation Effects | HTML & CSS Animation Tutorial

► LANDING PAGE WITH ANIMATION
Creative Landing Page Design with Animation & Slick Slider | HTML, CSS ANIME JS

Creative Landing Page Design With Animation Using HTML, CSS & Anime js | Website UI Design

Creative Landing Page Design with Animation, Dropdown Menu, Image Hover Effect, Anime js

► FRONT-END USEFUL VIDEOS
Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class

How to add animation on scroll | HTML, CSS & AOS js tutorial

Awesome text distortion effects using blotter js | Learn Design Tutorial

Awesome navbar design with hover effect using HTML & css tutorial

How to create custom scrollbar style using only CSS

How to create javascript carousel slider without dependency | Vanilla Javascript Slider

————————————————————————————————–
Cdnjs:
Images & Video:
AOS js:
Slick Carousel:
Luxy js:
Email: help.learndesign@gmail.com
For support:
Buy me a coffee:

(:— Ignore Below —:)
Website homepage design
landing page ui design
website design animation
animated landing page
luxury clothing website
modern website design
clean and minimal website
learn design tutorial
luxy js smooth scrolling effect
aimation on scroll
instagram post slider
autoplay image slider
aos js tutorial
slick carousel tutorial
learn design website
css3 keyframe animation
360 circular animation
button hover effect
menu link border hover effect
learn website design
awwwards website
css before hover effect
fashion website homepage
sustainable clothing Webiste
creative website design

8 comments

  1. thank you so much for this tutorial, is exactly what i was looking for! you are insanely talent!

  2. would really appreciate it if u could actually post source codes… i am literally ur 6th comment n it would help a lot to everyone

  3. wow this layout looks nice and out-of-the box…
    i like your taste of women and music too.
    do you do backend?
    do you sell this one (code) seems long time since you posted on patreon…

Leave a comment

Your email address will not be published.