Parallax Scrolling Website | How to Make Website using Html CSS & Javascript

Подписаться 936 тыс.

Просмотров 2,1 млн

50% 1

400+ Source Code : / source-code-how-50090458
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/course/complete...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutorialsweb.com
Buy Me A Coffee : www.buymeacoffee.com/onlineTu...
------------------
give proper credit if you repost this on other social media platform
------------------
Inspired By This : Simple Parallax Scrolling Effect with CSS & Vanilla Javascript
• Simple Parallax Scroll...
------------------
Image Source & Attribution
Vector Source : www.freepik.com
Star vector created by upklyak
Link : www.freepik.com/free-vector/m...
Image Download Link : • Parallax Scrolling Web...
Related Video : Parallax Scrolling Website | How to Make Animated Website using Html CSS & Javascript
• Parallax Scrolling Web...
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

Опубликовано:

14 апр 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 770

@OnlineTutorialsYT 9 месяцев назад

Revolutionize projects with our advanced source code. Elevate innovation, accelerate development, and gain a competitive edge. Your key to success is here. Transform ideas into reality now. Get now more than 1000+ source code just by clicking on this link : www.patreon.com/onlinetutorials Here you will find each and every Source Code is Unique.

@malgahfattahillahi8380 3 года назад

styling is really fun when you are not the one doing it

@8kshow 2 года назад

lol

@danisob3633 2 года назад

I disagree

@8kshow 2 года назад

@@hendiwaskito8836 yeah 😂

@danysingh8382 2 года назад

🤣🤣🤣

@timurxojayev610 2 года назад

@@hendiwaskito8836 fuck ...yeah absolutely

@vorisxonsobirov6636 10 месяцев назад

Author, thank you so much for all your hard work. Based on your videos from the series “creating a website from scratch”, 5 years ago I learned to make up and tried to find my first job. Now I am a senior front-end developer, I live in Europe. Your videos have literally changed my life. I have not yet seen a better presentation and quality of explanation than yours in the Runet.

@himanshurai2325 9 месяцев назад

Hey man , can you just help me out in getting all those images of stars, moon, front mountain and back mountain? Because I am a beginner in web development.

@sohana.06 7 месяцев назад

AMAZING!

@782dome 3 месяца назад

@slim_aj 3 года назад

i have started HTML5 ad CSS and i am starting to like your work, i am surely gonna enroll in your uDemy courses .

@synthcrazymtl414 3 года назад

Love your tutorials, they are so inspiring and help me a lot. And love the new song, it's not disturbing me as the other one that I was so tired to hear... Thanks again

@Richard_Schmidt 2 года назад

Great video, thank you for sharing. It would be great if you could add comments to future tutorials explaining what exactly each part of the JS code is doing :)

@TheDevilscrap 2 года назад

Amazing...so fun styling and so easy to understand with not even one word spoken...Thank You!!!

@mrt8bit692 3 года назад

I love these, please keep doing this animation tutorials!

@blezins 3 года назад

That's actually amazing. I admire to much ur work man, congrats!

@exlzygt7616 3 года назад

For the sequel, this is really cool

@m.caglartufan2454 2 года назад

Very cool tutorial, I have always been wondering how do they make those parallax effects now I learned it!

@SckottJackson 3 года назад

Cool, but better use "transform" property, because it don't trigger recomposition and repainting for browser :)

@vault_dude 3 года назад

Илья, а можно поподробнее? :) я просто нубяра

@animatedzombie64 3 года назад

good for performance, if its small app its fine

@ANUARKA 2 года назад

Просто гугли

@mazfps2246 2 года назад

how to do it with transform?? change the 'marginRight'?

@SckottJackson 2 года назад

@@mazfps2246 for example, 'transform: translateX(42px)' it will not change element position in DOM, but allow to display in another place on a screen

@Uzer_0.1 Год назад

6:43 logo 15:25 text animation 17:37 text animation 2

@TheProDat Год назад

Brother, You are a CSS GOD. Thank you so much for this videos. Every single one of them is so helpful.

@johnkoulatsis 3 года назад

So amazing websites...Creativity never dies

@eldrago3140 Год назад

This music really suits well with your night theme website. The website also looks really great. Nice design.

@ClemensPutz-ist-der-beste Год назад

Thank you! Such a good Tutorial and the webside looks so nice!!

@-Call-Of-Duty 3 года назад

Thank you , I have learned how to create the scrolling effects. Creativity is Good. :) and Parallax JavaScript explanation is Good. But would suggest all to use responsive styling. I don't think that same code will work in mobile screens.

@niteshgupta3525 2 года назад

Yes, this could not work in mobile screens

@MosterHunterFridom98 Год назад

how do you do responsive styling?

@potater6163 2 года назад

this gives me obduction vibes. great video as always and its so good that you supply the src code aswell

@legendnomber1751 2 года назад

Друг, огромный привет из России! Подписан на твой канал недавно. Хочу сказать, что ты делаешь классные вещи и желаю тебе дальнейших успехов на этом поприще! Ты большой молодец!

@luism.6766 11 месяцев назад

went from start to end, this made me understand a few things, thank you so much

@yaserhasan6004 2 года назад

I wonder how would you make something like this responsive, amazing job btw it's so nice

@MrPranavsr 2 года назад

Awesome work dude, just correct the contact section, its hitting the mountain top. just correct that, it is awesome. Great work.

@bxav2813 2 года назад

The music is so relaxing and giving me 2013 vibes… It made me stay lol.

@joshual1021 2 года назад

lol I did a similar thing on my own while working with CSS parallaxing tutorials(that didnt' include that gradient) in regards to the gradient masking of the animation. I used frigging box-shadow instead! Thank you for teaching me a new skill with ::before CSS usage!

@QUIGNONPAIN Год назад

Super clean result ! Great tutorial, thank you very much !

@diksha5914 3 года назад

You really make very cool and amazing stuffs, but it will be better if you do explain the things which you use,how it work etc... Your work is really very amazing and appreciable

@eliassami1242 2 года назад

goes way too fast

@zentranian Год назад

@@eliassami1242if he explained you all in the video then you will not buy his course

@RandomDude00001 Год назад

If your using VS code you can check each purpose of code

@luism.6766 11 месяцев назад

@@zentranian its not just that, the reason i watched this video was because it was short, sometimes they go over things and the video lasts for 4 hours, those kind of videos bore the hell out of people imo, this is just a quick an efficient alternative

@ryzky1776 10 месяцев назад

I think it's because this video is not a tutorial, it's just showing you on how to make website like that, this video is not for beginner, is for a people who already understand some intermediate html and css

@user-os4vs2bn5g 3 года назад

Realy awesome video! I have one stupid question. If you want to make element to show on scroling like one to come from both of the screen and while scroling to move to the top, gona use the same mathod as you here for the text? Sorry for my english

@manzurajshahi 2 года назад

Amazingly! Inner peace!! Thank you so much for the effort and time!!!

@mehehehe. 3 года назад

In the first second, I knew it was gonna be good

@sonuravath3626 3 года назад

Awesome creativity sir aapki out of the box thinking ku take a bow💓💓

@gridvid Год назад

Good to see some people not afraid to use vanilla JS nowadays

@DevtoolsTech 3 года назад

Looks neat. Thanks for sharing! 🚀

@juliomello Год назад

I´d liked your video pretty much. I'm learning about HTML, CSS and JS. Could you do another video with the same topic explaining how to make it responsive to a lot of different medias - mobille, tablet, desktop and large screen? tks

@gustavocosta1008 3 года назад

I love this shape drawing!!!

@godnyx117 Год назад

You make it look so easy! Thank you very much!

@jarvisde-nero3055 3 года назад

Красота, одним словом, а главное сравнительно просто всё же)) Талант фишка тонкая))

@Nour-ym7uu 2 года назад

I am arabic but you are very good and you create amazing designs i like it

@sr_dnx5359 Год назад

Great vid, I'm watching all your videos and practicing, it´s really, really helpful.

@phantom..9650 Год назад

That was a superb tutorial , thanks for your priceless content

@JarEfeRed 8 месяцев назад

thank you man i`ve found a new way to learn, watch it, understanding why, put on practice, btw nice video.

@nicolassuarez1697 Год назад

Outstanding! Simple and beautiful 😀

@ameame32 Год назад

Trying it now and its breaking my head... It looks so easy

@emersonveronez9569 2 года назад

uauuu. .... uauuuuuu... nice post website HTML,CSS and JavaScript. Congratulations. A friend from Brazil

@muhammadalidulatov7869 2 года назад

So good tutorial, i got a many new things!

@Itscolt69 Год назад

Thanks bro! It really helped us alot ^^ , please make more content like this! 😁

@TheCodingOdyssey 3 года назад

'Very Cool'.repeat(Infinity)

@palashsakhare8489 2 года назад

You are truly amazing guy, it looks to attractive. Love from India ❤

@marcapouli7805 Год назад

Finally something that works, thank you !

@tsukki_g7 3 года назад

Justo necesitaba un parallax

@ammaskitchen7033 2 года назад

Alternative solution : png images + fixed values css. 👍😊U given me a good idea thank.

@larklandlover5252 Год назад

Wonderful tutorial, thankyou so much, this is a very nice website design 🙂

@shiveshh_72 3 года назад

SUPERR COOLL🔥🔥

@edwinrojas2108 Год назад

Las imagenes que se usan en el video no estan separadas, y esto hace que se complique el profeso o por lo menos para mi que hasta ahora estoy inciando. Gracias de igual manera. :D

@fcy486 8 месяцев назад

amazinglove it

@Augustyand Год назад

The best part of this video is when something messes up you can see their frustration through the screen

@samratbhaware404 3 года назад

Baba re baba re baba tu toh ram nikla👍

@bryanscott2075 2 года назад

Everything is clear and worked fine for me :) Got the exact output

@kaushikmoralwar07 Год назад

bro different images are not getting downloaded only single image is getting downloaded

@bryanscott2075 Год назад

@@kaushikmoralwar07 give me your email i will email it to you

@kaushikmoralwar07 Год назад

@@bryanscott2075 thanks bro got the drive link now

@hannaalfaro2818 Год назад

@@bryanscott2075 Would it be possible to have the different images as well?

@bryanscott2075 Год назад

@@hannaalfaro2818 yeah it is possible. But make sure you are using the custom images with appropriate sizes compared to the background size

@meekum2002 2 года назад

Great video but image download link only leads to other video, not the google drive folder for image sources.

@tomaszdrewnowicz7428 Год назад

Thank you for the tutorial, i've learned a lot :)

@weterdam Год назад

It's worth a try, cool done, thanks) 🔥🔥

@janedesu2337 2 года назад

This is great!, thank you for making this video

@rezakarimi1751 2 года назад

thanks a lot. your video solved my solution very well .

@Hasibul-_-Haque 3 года назад

Take love legend 💕💕💕

@josechirino5168 3 года назад

Awesome content man! Thanks you

@guestofallah7661 3 года назад

I always enjoy ur work and videos

@itcode_me 11 месяцев назад

Thank you for this tutorial. Its easy to understand i liked

@lucaskloberdanz2220 3 года назад

Nice job, thanks!!

@murtaza2545 8 месяцев назад

Front end dev::🌝 Back end dev::☠️

@mas4ever 17 дней назад

nah. it's like: designer:🤩🥳 developer:💀☠️

@progamer3165 9 месяцев назад

This webpage is so beautiful 😮

@jamilmahama4638 2 года назад

Is this possible with Next JS and CSS? Amazing tutorial by the way

@corentinvillemus1457 2 года назад

Better use Const instead of let and also use transform property right ? Anyway, it was inspiring. Nice video !

@corentinvillemus1457 2 года назад

(const for static DOM elements)

@STech04 3 года назад

Amazing sir 🧡🧡🧡🧡🧡💕💕

@youtubewatcher4748 8 месяцев назад

I don't how did you get the icon of the mountains behind and mountains front , how did you seperate it?

@rajputfitness8641 3 месяца назад

same bro

@fikret6322 2 года назад

Man u are amazing! I'll try it! ^^

@jrcallanta7507 2 года назад

i was watching at 1.5x speed boppin to the music. then i put it at 1x speed and was amazed that some people actually watched it at that pace. it's like they slowed down thing song on purpose, so that it sounds normal at a higher speed.

@AdepTTable 3 года назад

It’s wonderful!

@utkarshbajpai2908 2 года назад

I love the font you use in css file.Which font was was that?

@mohisha4350 3 года назад

Amazing! And thank you to help! Edit: Thanks got the like! 👍🏻

@inesreisx Год назад

hey thank you so much, was just looking for this type of tutorial. Is the source code available anywhere or available to buy via gumroad or something? i would like only this one in specific

@darickquinto7798 5 месяцев назад

great video for the deaf. thank you.

@blazi_0 3 года назад

That stars.style.left = value One was smart 😅 this video was fun to watch

@Gorengan_TV 7 месяцев назад

So what's the true of it

@benzy_ 3 года назад

Marvellous !!❤️❤️🔥🔥🤙🏼🤘🏻

@ajayimarvellous2356 3 года назад

Why did you mention my name 🙄

@benzy_ 3 года назад

@@ajayimarvellous2356 Because U are wonderful...😂😂

@dmitriyqwe9512 2 года назад

Thank you for the lesson! What theme are u using in vs code?

@riteshrayash8833 2 года назад

Monokai

@taufiquekhan9530 8 месяцев назад

From where did you get those pictures separately??

@catcodedbeginner6844 3 года назад

i love your work... Keep Up!

@AnhPhan-wt2hn 2 года назад

Nice work, thanks!

@alcor1609 3 года назад

Do a sticky navbar with shrinking also for mobile responsive

@goldenekpendu 3 года назад

This is amazing

@kritikusi-666 Год назад

how can you make the navigation stick to the top? so it does not move? Also, how easy can you integrate Oath or some kind of login system? Also, do you sell templates? I am looking for something that has login feature.

@susmitachanda575 3 года назад

Just awsome ❤

@bedji 3 года назад

Excellent tuto 👍

@boultifnidhal2600 3 года назад

bro i can't thank you enough ♥♥♥

@christopherdiosdado1790 2 года назад

in the section img how did you get your navbar and Logo(moon) to overlapp the mountains when i attempted it my navbar and moon is not displaying its behind the img