Hi - this site is moving the cloud and wave images.
It seems from google we can do it with html & css but I can’t get it to work. Please how can I take the wave image on that site - 11062b_95d34f15761e4114a57b17823228948ef000.webp - and make it move like that using html and css? Thank you!
What I really need is the waves in the background and another static image in the foreground. Is that possible? Once I’ve entered the html & css for waves, to have an image OR text display in foreground, overlaying the waves but with no white space round the text or image
As far as I can tell with a brief look, the site is using mp4 video files for the moving images. I think the stills are just a fall-back image or holding frame for the video.
It appears to be:
Something close to that might be possible using SVG but if so then it would be advanced stuff. Otherwise a video such as what they are using or some complicated JavaScript is probably the only possibilities.
As the others have said those examples use videos running in the background as they are quite complex.
For something simpler you could use a static image and apply a turbulence effect using an svg filter.
Here is one I forked from the web.
I think something like that is the best you can get without using a video or creating an animated gif.
Hey Paul - good to see you again 
I tried that but nothing displays? All I did was –
I replaced this:
Try the below code once, I hope it might be helpful:
HTML
<div>
<video autoplay loop muted id="myVideo">
<source src="https://video.wixstatic.com/video/11062b_60e59ba9be974f96a5edfe6b187abd8c/1080p/mp4/file.mp4" type="video/mp4">
</video>
<h1>Blue Sky</h1>
</div>
CSS:
#myVideo{
width: 100vw;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
Thank you.
Use animation programmes such as Blender or Adobe After Effects to generate realistic moving waves and clouds. To create realistic motion, these tools provide a variety of animation features and effects.
That just a test page. I was trying to place it between paragraphs one and two. This is what it looks like in wordpress:
<!-- wp:paragraph -->
<p>Welcome to our quick Reset Challenge. The Challenge is coming one fine day! Just as Madama Butterfly sang in <a href="https://www.youtube.com/watch?v=1woH96ROG-c" target="_blank" rel="noreferrer noopener">Un Bel Di</a> :)</p>
<!-- /wp:paragraph -->
<!-- wp:html -->
<div class="ripple">
<svg viewBox="0 0 180 100" width="100%">
<filter width="100%" height="100%" x="0%" y="0%" id="noise">
<feTurbulence type="turbulence" baseFrequency="0.0547184" id="turbulence" numOctaves="1" result="turbulence" seed="5">
<animate id="noiseAnimate" attributeName="baseFrequency" values="0;.1;0,0" from="0" to="100" dur="10s" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="1" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
<foreignObject width="100%" height="100%">
<img src="https://greensmoothie.com/wp-content/uploads/imgpg/water.jpg?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" xlink:href="data:https://greensmoothie.com/wp-content/uploads/imgpg/water.jpg?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" width="100%" height="100%" x="0" y="0" style="filter: url("#noise");" />
</foreignObject>
</svg>
</div>
<!-- /wp:html -->
<!-- wp:paragraph -->
<p>Subscribe below to stay updated.</p>
<!-- /wp:paragraph -->
Use animation programmes such as Blender or Adobe After Effects
Thank you!
You would need to remove the fixed positioning as my example was a full screen demo. I’ll post some code when I get back to the computer.
if you want it in flow then make these changes.
.ripple {
overflow: hidden;
position: relative;
z-index:0;
inset:0 0 0 0;
min-height:40vh;
}
.ripple > *{
z-index:2;
}
.ripple svg {
position: absolute;
inset:auto;
bottom:0;
left:0;
z-index:-1;
}
.ripple h3{text-align:center;margin:0;padding:2rem;}
I added some text in there like this
<div class="ripple">
<h3>This is some text</h3>
<svg viewBox="0 0 180 100" width="100%">
<filter width="100%" height="100%" x="0%" y="0%" id="noise">
<feTurbulence type="turbulence" baseFrequency="0.0547184" id="turbulence" numOctaves="1" result="turbulence" seed="5">
<animate id="noiseAnimate" attributeName="baseFrequency" values="0;.1;0,0" from="0" to="100" dur="10s" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="1" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
<foreignObject width="100%" height="100%">
<img decoding="async" src="https://greensmoothie.com/wp-content/uploads/imgpg/water.jpg?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" xlink:href="data:https://greensmoothie.com/wp-content/uploads/imgpg/water.jpg?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" width="100%" height="100%" x="0" y="0" style="filter: url("#noise");">
</foreignObject>
</svg>
</div>
Which makes it look like this:
Just adjust to suit.
wow this is cool Paul but now what if I need to add an image on top? It pushes the water image down instead of to the background:
https://greensmoothie.com/reset
The svg is just like an image so you can’t really stretch its height without changing the width.
With your current design you should probably base the svg on the height available and let the width be auto.
Try changing the .ripple svg code to this:
.ripple svg {
position: absolute;
bottom: 0;
left: 0;
top:0;
right:0;
z-index: -1;
height:100%;
width:auto
}
I think that should suit your needs in that situation.
oops there was an image in the middle when I took the screenshot but your site went down at that exact moment.
SVG is Scalable Vector Graphics therefore by definition they are scalable.
. . . unless you use preserveAspectRatio="none"
No one is saying they are not scalable, but that most images have an aspect ratio and it is usually undesirable to break that ratio. Therefore the width and height should be scaled together in proportion. I believe that was the message here.
A SVG is not an image, it is instructions for rendering an image.
In this case we are dealing with the presentation of a real world image and as I said already you can’t really stretch one dimension without distorting the image.
Of course it is actually possible to stretch one dimension in the svg or an image but that would break the aspect ratio and is not desirable. I don’t want a squashed seascape picture for this example.
