CSS Only Animated Background Effects | Html CSS Animation
HTML-код
- Опубликовано: 25 авг 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
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
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.
Cool. Thank you so much for such tutorials please keep on posting more.
This looks incredibly cool thank you so 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
It is small cool nice .... good ... ❤️❤️👍👏
Great, Thank you for the tutorial!
Thank you very much
Thank you man, you are great!!
super super love it. thank you
I loved the background music..
tnku so much
nice video bhai bahut kuch seekhne ko mila thanks bahi
Hello friend, I just finished the one with animated bubbles
very good, thank you and follow you
greetings
good week
Thanks bro it worked
It's beautiful... Good video bro, new sub 🤙🔥
I have a little question, what extensions do you use?)
heading is not showing
thanx
😍😍😍you are best code editor bre 😍😍😍😱🤖
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
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?
next level
it doesn't work brroooooooo
You are amazing brother...
Great as always
Thank you
U r ausome
genial -- cool
thax
Respect✨
BROOOOOOOOOOO MARRY ME!!!!! ITS SOOOOOO GOOD!!!!!!!!!
THANK YOU
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.
Thanks! Cool.
Super !
Respect sir🙌
finally i done it
nice, now I gotta add add some arr and math. random
Nice 👌
fucking hacker level animations salute to u you are just amazing in animations
The best
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
How to add text in this
very thanks I am a new developer and you helped me and I am 14
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
while True:
print(" 👍👍 ")
Hahaha loved it
in react you'll need to use style= {{"delay" : your_var}}
Thanx 👍
Cool 👍
Please tell me Dear! How to static it like a section
Nice
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
what letters did you use at the beginning?
Wow..cool :D
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
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 🇺🇿😀
Does this work on replit?
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
Give justify content space between than it will not go on ineside after zoom out
man there are levels to this shit
how do you doing style="--i:...;" in react ?
it's html and css, no react my bro :)
hey Djibril, have you solve this ?
how can add image GIF under this animation without get problem
They were very compatible with Glassmorphism
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 '_'
Brother animation duration not working in my vs code output what i can do for this
I followed the same line of code, but something weird happened in the viewport.
Is there a way to put this a background?
it's the whole point, yes
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'
First
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
Eu não consigo adaptar pro mobile. Alguém pode ajudar?
What themes do you use. Bro ?
Where is source?
Sir my output it's not coming it's showing blank
Dosent work with me! i dont know why
like it
How to you create video please tell bro.
How do I valign this to bottom?😢
How to create à text over it
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 ❤
Source code link please?
Please also me send source code
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 make this video zoom
Sir ye style = " - - i : 1 " kya hota he
Ak vidio uske pr banaye na plz
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
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
Hello! May I know what app you are using for coding?
It is visual studio code
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
Do You know how to insert a third color in the bubbles?
use the nth selector or just pass in the style manually
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 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
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
c'est beau mais la vitesse de deplacement est trop grande
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
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 is theme name?
I have a scroll on the right that shifts the text (
bro you stealing all this open source code of codepen and selling the source code here on youtube.. lol hahah
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.
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