CSS Only Animated Background Effects | Html CSS Animation

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

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

50% 1

Click For More : ru-vid.com...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
CSS Infinity Course : www.udemy.com/course/infinity...
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...
------------------
#csseffect #topcsseffects
------------------
give proper credit if you repost this on other social media platform
------------------
image source : www.pexels.com/
------------------
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

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

25 май 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@pauloworkouts Год назад

Very nice video :D For anyone asking how to use this as a background, use z-index= -100; inside .bubbles{} class like this: .bubbles{ z-index= -100; } This will send it to the background, and all other divs will go on top of it.

@Cevu01 Год назад

thans for that bro

@mayconalexsander1217 Год назад

GENIUS, THANKS🤝

@L0V3V4MP1R3 Год назад

@Honekichi Z-Index works in such a way that elements with a higher value will always be on top of the ones with lower values, like a hierarchy. Setting it to "-100" was done arbitrarily, realistically you can set it to any value (even to ridiculous amounts like -999999) as long as it's the lowest one compared to any other element that has a z-index. Likewise, if you want something to be on the top of everything else, using a z-index with the highest value in the page will also do the trick.

@KenzoFFx Год назад

how can i add image GIF under this animation without get problem

@8koi245 Год назад

@TapGameplay- just in case you add some elements behind in the future, ensures it'll never the above them

@Richard-tu4jv 11 месяцев назад

This looks incredibly cool thank you so much

@andresrivero551 Год назад

It's beautiful... Good video bro, new sub 🤙🔥 I have a little question, what extensions do you use?)

@shivamoeini1920 Год назад

Great, Thank you for the tutorial!

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

Para los que quieran cambiar de color la tercera burbuja pueden usar un "span:nth-child(3n+3)". En resumen, 3= elemento donde empieza el conteo y 3n = el numero de espacios para volver a ejecutarse el cambio de color.

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

Thank you bra!

@kingsleyemeka2136 Год назад

Respect sir🙌

@wilmerpocaterrasulbaran9600 Год назад

Thank you man, you are great!!

@paradox987 Год назад

You are amazing brother...

@renanfernandes1950 Год назад

Great as always

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

Hello friend, I just finished the one with animated bubbles very good, thank you and follow you greetings good week

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

I loved the background music..

@tharinduperera7622 Год назад

It is small cool nice .... good ... ❤️❤️👍👏

@hindustangameryogiraj9348 Год назад

😍😍😍you are best code editor bre 😍😍😍😱🤖

@sabririhab5325 Год назад

super super love it. thank you

@moviemasala8311 Год назад

Thanks bro it worked

@KellerG68 Год назад

You use a lot the CSS variables, you should use it too in the color definition instead of duplicate the values, you will avoid to re define all the properties

@fullgames926 Год назад

It just serves as an example not real world scenario

@mohdaman7958 Год назад

nice video bhai bahut kuch seekhne ko mila thanks bahi

@zorro2085 Год назад

Respect✨

@raulhernanromeroherrera2547 Год назад

Desde Bogota, Colombia (no soy desarrolador y paso mi tiempo jugando con sus tutoriales pór que soy discapacitado) me gusto mucho el fondo y lo intente hacer con react pero me fallo la var--i. pero gracias muy interesante. si me puede ayudar tambien gracias. un abrazo.

@javieruzcategui4441 Год назад

sabes como implementarlo en react?

@sparrow6084 Год назад

不错👍💯

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

thank you! in case somebody like me wants to do this in react you got to put: style={{ "--i": 11 }}

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

i had type code without any error but still it's not working, can you help?

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

@@anshikashukla9003 yeah sure, explain me more

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

Sorry I want to ask, why even though I have followed exactly as in the video but when I run the code, it is not round/bubble shaped but like a rectangle, Sorry if my English is bad, I used translate for that

@LeConseiller Год назад

Thanks! Cool.

@JoseRamirez-oj6qg Год назад

genial -- cool thax

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

next level

@AnonymousJohnDoe-cw1mp Год назад

i want to add this to the background of the illuminated spinning 3d cube you made but i dont know how please could you help me @Online Tuorials

@AdeyCoder Год назад

Cool 👍

@umangternate Год назад

The best

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

BROOOOOOOOOOO MARRY ME!!!!! ITS SOOOOOO GOOD!!!!!!!!! THANK YOU

@Bunny-lr5uc Год назад

Hi can I ask you what VS code color theme are you using? It looks nice. Thanks

@FadiShakor 6 месяцев назад

Thank you very much

@ashar_naveed Год назад

Great work as always! ❤ I often saw you use style="--i:11" what is this? How do I implement it?

@KellerG68 Год назад

It is CSS variables, you can use these for all kind of purpose, even simplify all the CSS duplication

@ashar_naveed Год назад

@@KellerG68 Hey thanks for the reply. I'm curious to know how will I use this on Webflow?

@lipsi_haskovna Год назад

For example: RED YELLOW GREEN p { color: var(--clr); } You'll see the result :)

@weirdegg8316 Год назад

I don't get it aswell '_'

@ahmadmuhammad5097 Год назад

Last but not least, he explained the secret of this genius project, the whole secret is in mathematics, how does that happen? First: here it is using (inline variables) like in the example (--i:number), how does that work? By controlling the tag by numbers like a class, how is that? By animation-duration dividing the number of seconds by the number, the speed of the tag will be the result of the division, for example: 120s / 1=120s This means that the tag will move from bottom to top within 120s = 2min and this of course will take time, but if you divide 120s / 30=4s This will only take 4s. This is simply the idea of the genius project, and this is what the code does exactly, and this calculation only works using the calculator calc, like in the example calc (120 / var(--i) ), and you can put any name for the variable that will work for you also easily ,, This is the idea of a genius project simply, and I hope that my explanation has won your admiration.

@mdrabiulakand8848 Год назад

thanks for your explanation

@weirdegg8316 Год назад

ahhhhhh your a life saver dude thank you soooooo much

@Anonimalia187 Год назад

Wow..cool :D

@aravind9842 Год назад

finally i done it

@razshike2988 Год назад

Nice ❤️❤️❤️

@Seedley Год назад

could you put a text on top of this in html? I'm having some trouble trying to do this. it looks like the lights do not entirely fit the screen

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

yes mine 2

@leonardomosquera322 6 месяцев назад

Super !

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

Nice 👌

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

Brother animation duration not working in my vs code output what i can do for this

@8koi245 Год назад

Hahaha loved it in react you'll need to use style= {{"delay" : your_var}}

@chamalkakumuditha Год назад

Thanx 👍

@samuelmarcano4781 Год назад

what letters did you use at the beginning?

@adulhakimturobov2040 Год назад

hallo good luck with your work i'm waiting for something like this again i'm uzbek

@academypn Год назад

Eee gap yo o'zbeklar hamma yerda bor 🇺🇿😀

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

Give justify content space between than it will not go on ineside after zoom out

@8koi245 Год назад

nice, now I gotta add add some arr and math. random

@chiragbhaskar1468 Год назад

Sir ye style = " - - i : 1 " kya hota he Ak vidio uske pr banaye na plz

@m.nurichsanin7212 Год назад

What themes do you use. Bro ?

@bilaltan01 Год назад

They were very compatible with Glassmorphism

@newzbharat 6 месяцев назад

U r ausome

@spacelover2868 Год назад

Nice

@eyadrabiei5550 Год назад

Does this work on replit?

@llkteac8553 Год назад

very thanks I am a new developer and you helped me and I am 14

@Killisraelis5360 Год назад

fucking hacker level animations salute to u you are just amazing in animations

@josmarpena396 Год назад

good afternoon bro the video is fine I liked it a lot brother and a question can be asked responsive adaptable for mobile

@OnlineTutorialsYT Год назад

Yes you can

@josmarpena396 Год назад

@@OnlineTutorialsYT good brother that can be made responsive could you help me how to do it please brother

@darkboy_2 Год назад

@@OnlineTutorialsYT background music 🎶 so awesome ..please send me name of music

@KenzoFFx Год назад

how can add image GIF under this animation without get problem

@mughiramughal 6 месяцев назад

Please tell me Dear! How to static it like a section

@-JeeyaKarki Год назад

Sir, please explain us by talking and telling us and low down the of your background music. By the your is good but, I couldn't understand it without your explaination

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

How do I valign this to bottom?😢

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

pero no muestra como dejarlo de fondo realmente no utiliza algun z-index o algo por el estilo, funciona la animacion pero no como fondo realmente

@Karan__Mali Год назад

How to you create video please tell bro.

@NoOne-ir7wn 8 месяцев назад

c'est beau mais la vitesse de deplacement est trop grande

@vegasishara8368 Год назад

like it

@eltondsouza4630 Год назад

Sir please make this video zoom

@tejashreemestry9186 Год назад

How to change the color of the each 3rd circle? And how to point it using inheritance?

@YuriG03042 Год назад

use the nth child selector like he did. why would you use inheritance, how would that be helpful?

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

Eu não consigo adaptar pro mobile. Alguém pode ajudar?

@kiddoyoutube1 Год назад

I want, if i move the curser the background animation should also move along with it

@YuriG03042 Год назад

feel free to do it with javascript and listening to the mouse position event

@hamzaboubacar603 Год назад

First

@dmitryrosenfold3089 Год назад

I don't understand why it doesn't work for me.. animation-duration: calc(10s/var(--i)); I do everything exactly the same as in the video, but the circles with this team stand still .. Can someone help me?

@fluffyniki3257 Год назад

If they stands still then maybe your animation is broken :P first of do simple animations created by your own not copy paste from tutorials, you won't learn that much this way

@maxdurbin3033 Год назад

@@fluffyniki3257 not trying to learn animation, trying to learn react.

@armor2009 Год назад

Same here. As soon as I add that line, the animation stops. Edit: I found the problem... Make sure the line(s): are correct. I had --1 instead of --i

@young-millionaires Год назад

It happened to me too. Maybe you have another css code that specifies 'animate' as another value. Try using instead of only 'animate' =>'animate1'

@djibrilsamassa4342 Год назад

how do you doing style="--i:...;" in react ?

@winter-bear. Год назад

it's html and css, no react my bro :)

@lisali6205 Год назад

hey Djibril, have you solve this ?

@user-si6ln7rx6u 5 месяцев назад

I followed the same line of code, but something weird happened in the viewport.

@goku2006br Год назад

Is there a way to put this a background?

@YuriG03042 Год назад

it's the whole point, yes

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

Hello! May I know what app you are using for coding?

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

It is visual studio code

@mayconalexsander1217 Год назад

How do you adapt this background for mobile? Bubbles are stretched because of the border-radius:50%;

@javiermarinelli7841 Год назад

reduce the px using @media query

@YuriG03042 Год назад

you can use rem instead of pixel, essentially the same. 50% shouldn't stretch it because it's half of the width/height

@nazmashaikh9568 Год назад

Sir my output it's not coming it's showing blank

@sabranatoutou6991 Год назад

How to create à text over it

@jenniferceledon9804 Год назад

Do You know how to insert a third color in the bubbles?

@YuriG03042 Год назад

use the nth selector or just pass in the style manually

@garikmelqonyan6011 Год назад

👍

@chukwukingsley Год назад

I did everything right but the bubbles ain't moving like yours , they are just on a straight line , I don't get the problem .

@young-millionaires Год назад

It happened to me too. Maybe you have another css code that specifies 'animate' as another value. Try using instead of only 'animate' =>'animate1'

@druken94 Год назад

how can i use the style="--i:10 " in react?

@e.creates1200 Год назад

i did this: let style1 = { "--i": 11 } then this: then i created 10 more new number values for each span like: let style2 = let style3 = then i copy and pasted and scattered them in no particular order. i havent found a work around but this solution works. and as far as css, you can still do: calc( 125s, var(--i ) )

@javieruzcategui4441 Год назад

@@e.creates1200 no workin help please

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

Thank you

@Rahulkumar-te2hf Год назад

What is theme name?

@avakinmio9080 Год назад

man there are levels to this shit

@ameeshastephani4035 Год назад

Can I know how to write something in this animated background? When I wrote it, the animation background came separately

@ocskobianka8516 Год назад

I would like to know it too, but every time i tryed, i never got a solution unfortunately, and he never shows hoe to do that :'( i guess u cant put things in front of an animated div

@dhoulTS1 Год назад

To use this as a background, use z-index= -100; inside ".bubbles{}" class like this: .bubbles { z-index= -100; } This will send it to the background, and all other divs will go on top of it.

@ameeshastephani4035 Год назад

@@dhoulTS1 Thanks for the reply

@ameeshastephani4035 Год назад

@@ocskobianka8516 Thanks for the reply

@ocskobianka8516 Год назад

@@dhoulTS1 thank you, i will try it ❤

@renad1000 Год назад

Dosent work with me! i dont know why

@danisob3633 Год назад

*matrix flashbacks*

@charakternik6630 Год назад

I have a scroll on the right that shifts the text (

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

With a name like Online Tutorials, you really need to narrate what each line of code does instead of playing music over a 10x speed video.

@difajoz7225 Год назад

Very good animation😍😍😍 But why source code is not FREE ? 😒😒😒

@YuriG03042 Год назад

because he is trying to make a living out of this? not everything needs to be free, it was coded right before your eyes, just redo everything they did, it's not that difficult

@juanduque8294 Год назад

Second bro

@kellyjin2469 Год назад

can someone kindly explain the "--i:11" and other numbers in the span elements? what are these called? how do they work? i would very much appreciate it!

@nargesmirzaaghaei Год назад

they are just css variables

@aakarshak1676 Год назад

I think it's a variable followed by a number, and the number sets the Y-axis speed based on the CSS code later on, where it divides 120. So like it's just a common ID for all the bubbles, and the number is the Speed. Hope I was right cause I am a COMPLETE beginner 💀

@XOBEP_KHEXTOB Год назад

You can also use a gif background ;)

@developeria5984 Год назад

And we need to download 🙄🙄🙄

@InpireYourself23TT Год назад

And is no longer CSS Only 🙄

@L0V3V4MP1R3 Год назад

Page loading time would be higher IIRC

@icwhy4366 Год назад

GIF is not responsive depending on the frames, lenght, size and quality high in filesize and prone to dropping frames and lag the webpage, also a gif stops and restarts mid animation when the hoover ends resulting in a bad looking animation when hoovering over the button.

@master138 Год назад

1. The page won't be responsive. 2. Gifs don't support all colors and gradients this means bad quality. 3. Your website on big screens will be blurry. 4. Loading time.