How to make such animation without JScript?

[Hip]

Hey guys

 

can anyone tell me how to do such animations as in the video below with only HTML and CSS?

 

(here the link)

 

 

 

Thank you in advance!

Award Winning Website Design Agency _ Top Web Design Company - Brave 2020-02-24 15-43-00.avi

[mariushm]

You can't.

Disable Javascript in your browser and look how it fails to render properly.

 

Seems like there's multiple background images or layers stacked on top of the other, and maybe some transparency tricks to create that motion effect.

[ekv]

I think this is combination of video in background and CSS animation over the top of it.

CSS animations are simple, and they are done over "keyframes" url: https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

 

So like in w3school example this is how one animation looks like:

@keyframes mymove {
  0% {top: 0px;}
  50% {top: 100px;}
  100% {top: 200px;}
}

@keyframes [name-of-animation] then you continue with specifying what would happen in center processing of animation time.

 

This is just behavior of animation, to stick this to element, you need to provide "animation" to element like:

"animation: [name-of-animation] [time-in-seconds]s infinite;" exp: animation: move-element 2s infinite;

Ther's a lot of different animation-* propetyies you can use like animation-delay (dealay time before animation will fire), animation-time (amount of time animation will take), animation-name...

 

Tho animation you posted link for would take a shit tone of lines (my guesstimation is around 500 lines of css code)

 

 

 

[Hip]

8 minutes ago, ekv said:

I think this is combination of video in background and CSS animation over the top of it.

CSS animations are simple, and they are done over "keyframes" url: https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

 

So like in w3school example this is how one animation looks like:

@keyframes mymove {
  0% {top: 0px;}
  50% {top: 100px;}
  100% {top: 200px;}
}

@keyframes [name-of-animation] then you continue with specifying what would happen in center processing of animation time.

 

This is just behavior of animation, to stick this to element, you need to provide "animation" to element like:

"animation: [name-of-animation] [time-in-seconds]s infinite;" exp: animation: move-element 2s infinite;

Ther's a lot of different animation-* propetyies you can use like animation-delay (dealay time before animation will fire), animation-time (amount of time animation will take), animation-name...

 

Tho animation you posted link for would take a shit tone of lines (my guesstimation is around 500 lines of css code)

 

 

 

I see there is actually a video in the code but they did it with jscript. So you think this would also be possible with a video and css or even with css only?

[ekv]

With CSS and Video it would be possible to re-create most of parts.

But you should use JS anyways, because there's no reason really not to.