I like this effect–It’s a header with site title, logo and collapsed menu icon, but it’s transparent so that the images and video play behind it. As the content scrolls behind the fixed header, the text color changes automatically so that it’s always contrasting what is behind it.
Is there a theme, stack or clever trick I can use to create this effect?
Hello Chad,
maybe the Impact Stack from Joe Workman is what you are looking for. You should take a look:
Here is the Demo Site for that Stack:
https://www.weavers.space/demo/impact/
I hope this helps.
Greetings
Michael
Joe Workman’s Screens would do the job I think https://www.weavers.space/rapidweaver/stacks/screens
Joe Workman’s stack looks promising . . . I click on the “Demo” link, and I get a 404 error . . .
Have a look at this URL… https://preview.joeworkman.net/screens/
I am working on updating a few broken demos including Screens this week.
Thanks Joe. I went to this page https://preview.joeworkman.net/screens/eclipse-video/, but that may be one of the pages you’re updating.
Can Screens create the effect I’m looking for? Transparent header with logo, with video playing behind it (like at https://climbworksdesign.com/#intro)
That site that you linked to is very much like Screens. In order to do video in Screens, you will need Impact.
However, if you don’t really need a snap scroll website like you linked to, then Eclipse or Impact could be a good fit. Eclipse is good if you want the video to cover the entire background of the website. Impact is better if you want the video to simply be a hero banner or section on a “normal” webpage.
Had a quick blast at something like the posted site: https://www.sandbox.russam.me/screens
Not trying to be accurate, just a demo of Screens with Impact, very VERY poorly optimised, I just banged in a few photos I found, If this was for real I’d obviously spend much more time with the content.
Edit:
I’ve just looked at this on my iPad and it’s crap, simply because the video is far too big and served poorly. It’s ok on desktop and as I said if it was a real site I’d optimise the video rather than just ripping it from YT
I would love to see the project file.
PaulRussam–Thanks for putting together that demo–looks like the right tool for what I need.
For the company name/logo–did you insert is as a transparent PNG file (so that the video is visible behind it)? Or insert it in some other way?
Impact has the video as a background and the text in the middle as a foreground layer … that’s all part of Impact’s normal functionality, the 2nd page is also an Impact but as a slideshow.
The fixed logo in the top left is done with BigWhiteDucks’s Chroma, it essentially pins content to part of the browser window irrespective of the scrolling of the page.
The logo itself is an svg but it could just as easily be a png.
Here’s another example that makes use of Impact and Chroma https://www.dma-ni.com.
Impact is doing the slideshow, it has a semi transparent dark overlay to visually push the images back and then the DMA logo in its foreground.
The vertical side menu is kept in place when you scroll by Chroma.
Yeaaaa, it’s that stupid video I used. I’ll find something else and republish later today.
I’m removing the link to my demo above for now, I’ll pop it back once I do a better job 
Site bandwidth restored: https://www.sandbox.russam.me/screens
Here’s what happened … I downloaded that F-35 video from YT, trimmed it a little and ftp’d it to my host. You lot looked at it and ate all my bandwidth.
What I’ve done … Made a smaller video and popped it on a Cloudinary account so the site is on my host BUT the video is on a CDN
Thanks Paul. Do you know of a way to create the changing text color effect in the header–like in the example site I mentioned?
As you scroll through content, the text of the header changes so that it’s always contrasting with the background (and therefore readable).
Chroma can do it, watch the underline on the logo in the top left of this page as you scroll, it changes colour 4 times: https://demo.bigwhiteduck.com/chroma/
You do have to use svg’s and create the svg carefully
Excellent–thanks for your help.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
