1 Correct answer
I've digged a bit through the code there. It's actually a SVG animation:
This example code is basically from the site, but stripped to the bare minimum:
HTML:
<div class="bg-container">
<div class="knockout-text width">
<h1 style="text-align: center;">What's</h1>
<h1 style="text-align: center;">New.</h1>
</div>
</div>
CSS:
.bg-container {
background-image: url('https://www.adobe.com/content/dam/cc/us/en/products/xd/features/whatsnew/banner_animation_02.svg
12
Replies
It should still work even with this small part. The original one had many other CSS fields that are likely not needed for the original poster's case.
Alternatively...
HTML
<p class="animated-text">Whats New</p>
CSS
.animated-text {
background-image: url('https://www.adobe.com/content/dam/cc/us/en/products/xd/features/whatsnew/banner_animation_02.svg');
background-size: cover;
background-position: 50% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
By @thatsmauri
Try the below. I'll let you add the image src where it says 'ADD IMAGE SOURCE' in the code, as I suspect its copyrighted, so you shouldn't be using it!! You should find one that is free to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Knockout</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.knockOut {
position: relative;
width: 40%;
margin: 0 auto;
background-color: yellow;
height: 400px;
}
.knockOut img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.knockOut h2 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 115px;
line-height: 115px;
text-align: center;
font-weight: 800;
color: #000;
background-color: #fff;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<section class="knockOut">
<img src="ADD IMAGE SOURCE">
<h2>What's<br>New.</h2>
</section>
</body>
</html>
Of course we still don't know how much support Webflow has for custom code. So in the end, some Webflow compatible widget or plugin might be the best option.
https://university.webflow.com/integrations/svgator
https://www.svgator.com/help/getting-started/add-animated-svg-to-webflow
By @Nancy OShea
I don't know much about Webflow but I believe it does have an option to include your own custom code, if required. I don't take Webflow that seriously on account of its 'hosted' software, not a standalone bit of software. If it was a standalone bit of software it would spark my interest to investigate it further. That's the problem with most of these 'low-code/no-code' alternatives, few offer a standalone product, at least in that respect that's where Wappler shines.
Maybe some day soon some company will come up with a 'low-code/no-code' solution that is not only standalone but doesn't use niche/proprietory code, that's when it becomes more attractive to me.
Seems like the OP found the answer, which looks to be more streamlined than the one I proposed. That's where we are at theses days, knowing too much can lead to over-engineering the solution and making things more complex than it strictly should be, it's appearing everywhere unfortunately and I'm as guilty as the next, making it look more difficult that it really is ......... phewwww!
CSS Ticks has a complete code explanation of a Responsive Knockout Text that uses a looping background video.
https://css-tricks.com/responsive-knockout-text-with-looping-video/
...i was able to just clip that svg into my text...
============
You mean you stole Adobe's assets for your own use? Uh, oh.
AdChoices