CSS Only Animated Background Effects | Html CSS Animation
Vložit
- čas přidán 29. 08. 2024
- Click For More : www.youtube.co...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
CSS Infinity Course : www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
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.onlinetutor...
Buy Me A Coffee : www.buymeacoff...
------------------
#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
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.
thans for that bro
GENIUS, THANKS🤝
@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.
how can i add image GIF under this animation without get problem
@TapGameplay- just in case you add some elements behind in the future, ensures it'll never the above them
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.
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.
thanks for your explanation
ahhhhhh your a life saver dude thank you soooooo much
thank you! in case somebody like me wants to do this in react you got to put: style={{ "--i": 11 }}
i had type code without any error but still it's not working, can you help?
@@anshikashukla9003 yeah sure, explain me more
This looks incredibly cool thank you so much
Cool. Thank you so much for such tutorials please keep on posting more.
It's beautiful... Good video bro, new sub 🤙🔥
I have a little question, what extensions do you use?)
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.
sabes como implementarlo en react?
It is small cool nice .... good ... ❤️❤️👍👏
Great, Thank you for the tutorial!
Thank you man, you are great!!
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
It just serves as an example not real world scenario
Thank you very much
Hello friend, I just finished the one with animated bubbles
very good, thank you and follow you
greetings
good week
tnku so much
super super love it. thank you
I loved the background music..
Thanks bro it worked
BROOOOOOOOOOO MARRY ME!!!!! ITS SOOOOOO GOOD!!!!!!!!!
THANK YOU
nice video bhai bahut kuch seekhne ko mila thanks bahi
it doesn't work brroooooooo
😍😍😍you are best code editor bre 😍😍😍😱🤖
thanx
You can also use a gif background ;)
And we need to download 🙄🙄🙄
And is no longer CSS Only 🙄
Page loading time would be higher IIRC
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.
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.
heading is not showing
Great as always
very thanks I am a new developer and you helped me and I am 14
next level
You are amazing brother...
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
yes mine 2
Give justify content space between than it will not go on ineside after zoom out
Thank you
genial -- cool
thax
Hahaha loved it
in react you'll need to use style= {{"delay" : your_var}}
Respect✨
U r ausome
Thanks! Cool.
Great work as always! ❤
I often saw you use style="--i:11" what is this? How do I implement it?
It is CSS variables, you can use these for all kind of purpose, even simplify all the CSS duplication
@@KellerG68 Hey thanks for the reply. I'm curious to know how will I use this on Webflow?
For example:
RED
YELLOW
GREEN
p {
color: var(--clr);
}
You'll see the result :)
I don't get it aswell '_'
Respect sir🙌
Super !
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
The best
Nice 👌
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
how do you doing style="--i:...;" in react ?
it's html and css, no react my bro :)
hey Djibril, have you solve this ?
nice, now I gotta add add some arr and math. random
Thanx 👍
hallo good luck with your work i'm waiting for something like this again i'm uzbek
Eee gap yo o'zbeklar hamma yerda bor 🇺🇿😀
finally i done it
Please tell me Dear! How to static it like a section
fucking hacker level animations salute to u you are just amazing in animations
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
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?
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
@@fluffyniki3257 not trying to learn animation, trying to learn react.
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
It happened to me too. Maybe you have another css code that specifies 'animate' as another value. Try using instead of only 'animate' =>'animate1'
I followed the same line of code, but something weird happened in the viewport.
Cool 👍
how can add image GIF under this animation without get problem
Nice
How to add text in this
how can i use the style="--i:10 " in react?
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 ) )
@@e.creates1200 no workin help please
Nice ❤️❤️❤️
Wow..cool :D
what letters did you use at the beginning?
good afternoon bro the video is fine I liked it a lot brother and a question can be asked responsive adaptable for mobile
Yes you can
@@OnlineTutorialsYT good brother that can be made responsive could you help me how to do it please brother
@@OnlineTutorialsYT background music 🎶 so awesome ..please send me name of music
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
while True:
print(" 👍👍 ")
Can I know how to write something in this animated background? When I wrote it, the animation background came separately
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
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.
@@dhoulTS1 Thanks for the reply
@@ocskobianka8516 Thanks for the reply
@@dhoulTS1 thank you, i will try it ❤
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 .
It happened to me too. Maybe you have another css code that specifies 'animate' as another value. Try using instead of only 'animate' =>'animate1'
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
Brother animation duration not working in my vs code output what i can do for this
Sir ye style = " - - i : 1 " kya hota he
Ak vidio uske pr banaye na plz
First
Does this work on replit?
Is there a way to put this a background?
it's the whole point, yes
Eu não consigo adaptar pro mobile. Alguém pode ajudar?
The code didn’t run I had problem with TranslateY I don’t know why at that point the code didn’t run well
It happened to me too. Maybe you have another css code that specifies 'animate' as another value. Try using instead of only 'animate' =>'animate1'
How to change the color of the each 3rd circle? And how to point it using inheritance?
use the nth child selector like he did. why would you use inheritance, how would that be helpful?
Hi can I ask you what VS code color theme are you using? It looks nice. Thanks
How do you adapt this background for mobile? Bubbles are stretched because of the border-radius:50%;
reduce the px using @media query
you can use rem instead of pixel, essentially the same. 50% shouldn't stretch it because it's half of the width/height
Hello! May I know what app you are using for coding?
It is visual studio code
Dosent work with me! i dont know why
Very good animation😍😍😍 But why source code is not FREE ? 😒😒😒
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
Sir my output it's not coming it's showing blank
I want, if i move the curser the background animation should also move along with it
feel free to do it with javascript and listening to the mouse position event
How to you create video please tell bro.
How do I valign this to bottom?😢
man there are levels to this shit
They were very compatible with Glassmorphism
How to link the background into page 2 and more or another html file please
Just create another html file , copy the current html and paste it there , use link rel = " " the name of your css file
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.
What themes do you use. Bro ?
Do You know how to insert a third color in the bubbles?
use the nth selector or just pass in the style manually
like it
Source code link please?
Please also me send source code
How to create à text over it
Where is source?
I have a scroll on the right that shifts the text (
The code page did not open for me..Does it have conditions?
have u used ?
I mean the whole code . I was unable to download pages from his own site no page html and no page css
@@meriemmery7648 well..lets see
@@meriemmery7648 you will need to join his channel membership for that.
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!
they are just css variables
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 💀
c'est beau mais la vitesse de deplacement est trop grande
Sir please make this video zoom
What is theme name?