Parallax Pixel Background Animation | HTML & CSS

Подписаться 1,9 тыс.

Просмотров 49 тыс.

50% 1

★ Parallax Pixel Background Animation | HTML & CSS ★
Check out this new short where you'll learn how to create a Parallax Pixel Background animated.
Thanks for watching!
Source code:
github.com/WebDevSHORTS/Paral...
Stars code:
pastebin.com/gEfdRwgc
💖 Become a Patron: Show support
/ webdevshorts
Find me on Twitter : / webdevshorts
Find me on GitHub : github.com/WebDevSHORTS
Music:
✘ Lakey Inspired - Memories With You: • Lakey Inspired - Memor...
✘ Markvard - Summer: • Markvard - Summer Wild...
🚫 I do not own the music used in this video. Please give some ❤️ to the artist!
!IMPORTANT:
If any artist has copyright issues with my videos (including artists of the images used), please send an e-mail to: webdev.shorts@gmail.com and I will remove it immediately!
#cssanimation #htmltutorials #webdev

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

27 сен 2018

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@drrnyip 5 лет назад

Your tutorial video is one of the cleanest I've seen in awhile. I love it. Please do keep it up =)

@WebDevSHORTS 5 лет назад

Thanks for the appreciation Darren! Stay close, new vid is arriving soon!

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

Amazing! Keep being an inspiration! Much love from Jamaica

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

This was a well done tutorial, thank you!

@user-om1nk9ew3t 6 месяцев назад

Thank You Man.. It's worked it and I loved it

@adamkoczorowski6583 4 года назад

This is awesome! Thank you very much!

@Wilczowaty 5 лет назад

Guys, you are awesome! Great content! I wish you 100k subs soon :D

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

Thankyou so much for this video!!!!

@KarolineRezende-hq3ku 2 месяца назад

when the pages refreshes the content go up

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

tysm that helped me a lot, you deserve a sub GG !!

@viniricardoferrera 4 года назад

Amazing, bro!

@arx2796 4 года назад

the best vid bro keep it up!!

@sanyamsharma350 2 месяца назад

Thanks you so much for this...

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

thank youu for this :D

@JuanDelgado-eh8pp 4 года назад

it's awesome, very thanks

@lyshka5796 Год назад

Good work!

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

thank you very much!

@tylerwestphal6519 Год назад

Thank you so much for uploading this, it helped me out a ton. Just wondering, do you know how to make the stars appear only in a specific section? I'm building my portfolio and i want the stars to appear at the top but not when you scroll down. again thank you so much!!! subbed.

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

many many thanks

@seyittumturk3769 Год назад

Bro thanks thanks and thanks sweet.

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

thank you boss

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

how did you put this small site overlay in the code program?

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

Thanks!

@WebDevSHORTS Год назад

Welcome!

@arturocoronel 5 лет назад

Wwooowww ☺👍👍

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

nice video

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

hi! when i scroll down stars are gone, how can i fix that?

@Randeru 4 месяца назад

where do I get the animStar?

@ThomazMartinez 5 лет назад

Amazing stuff, but is there a way to move the starts in background so it wont be on top of text / elements?

@ThomazMartinez 5 лет назад

found it: z-index: -10; position: relative;

@WebDevSHORTS 5 лет назад

Hello! Thanks! But the stars are already in the back of the text, anyway, yes, you can fix it with z-index.

@arx2796 4 года назад

the new div is not getting under it instead it goes in between

@mateusdasilva4995 Год назад

Great, have you found out how to make it work in bigger screens?

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

Did you find the solution?

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

Do you have star code for pages that are bigger/higher? Great vid btw :)

@WebDevSHORTS Год назад

Hey! Unfortunately I do not have :(

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

Just change the "top:auto" to something like "top: 1500px" or "top: 3000px" for the #star:after CSS.

@aakashsangwan9876 4 года назад

we cant add this one as a header as a section i mean we cant add more sections below this or above this,i tried so many times if we can add more sections below this then please reply about that

@peachspade1131 4 года назад

I had the same problem very hard to customise others parts of the code

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

Yea, we can add more sections below this by doing some changes in css

@arpitabelsare Месяц назад

pastebin code is removede by a user😥😥, any other option for that

@0xnryo 2 года назад

Someone know why the animations sometimes stuck when i hover over it with the mouse cursor?

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

Unfortunately there's a few bugs with this code. Stay close, a new version is coming soon!

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

How do you get this preview on bottom right?

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

Picture in picture :D

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

Which editor is this?

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

VS Code

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

I fixed :)

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

How can I make the stars still, like it won’t move🤔?

@eijiyoshikawa2525 Год назад

Dont use animstar

@ThomazMartinez 5 лет назад

Right sorry another one :) how can i scroll front elements but keep background static?

@fanzink 5 лет назад

There are a couple ways of doing it, one is placing a div on the outside of the content and then positioning the content absolute over the fixed background - working example: github.com/phanzink/Parallax-Star-Background

@ThomazMartinez 5 лет назад

Yes!!! i love you dude

@ronaldtapias3094 4 года назад

@@fanzink thank you my friend :)

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

@@fanzink yo man I tried this code in the github, but when I remove that lorem ipsum text, the whole text kinda disappears, can you help me with that?

@user-oe6cd7rp2g 9 месяцев назад

How can I get the codes from the website that you copied?

@adamos.webdev 7 месяцев назад

He left a link in the description

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

👉🔔

@arx2796 4 года назад

can anybody tell me how to decrease its size

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

Sure! Use CTRL + shortcut to increase or CTRL - (minus) to decrease

@rathernotdisclose8064 4 года назад

stars code breaks at 1440p haha... only for smaller res

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

That's right! I will come with a new video for a responsive and more cleaner version.

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

@@WebDevSHORTS I look forward to this video. I hope it will not be long :3

@yagoubiayoub 2 месяца назад

you have a problem when refreshing a background up to top

@flamedude321 Год назад

I feel like there should be a better way to generate all those stars instead of copy and pasting

@arx2796 4 года назад

or anybody plsss

@surajpaul2412 4 года назад

every refresh , page moves topward

@tostadica 4 года назад

yup, I´ve tryed it and the same happens to me. This only works if you set the body to overflow to hidden, so you cant scroll over the stars that are spammed out of the html height

@surajpaul2412 4 года назад

@@tostadica I have fixed this issue but using different css

@tostadica 4 года назад

@@surajpaul2412 how did you make it work? I'm sorry for asking more explanations, I've just start studying this

@tostadica 4 года назад

@@surajpaul2412 okey so I've kinda solve it. What I did was to set the respawn of the stars to be lower on px than the 100% of my screen, so the respawn point never overflow the body height.