Page 1 of 1
Video page background with smooth transitions question
Posted: Tue May 07, 2024 3:40 pm
by Fredl
Hello all, I have a project that I have inherited, the original developer is no longer available so I can't ask how they achieved their design. (Luckily I can see that it isn't a WP site.) The new owner of the site needs me to fix the "subscribe" button and some other broken links, and rather than try to figure out why things are broken I prefer to start over and build a similar page with WB19. The site has a video background, 6 slides really, with transitions and a texture. I have tried using an animated GIF and MP4 as the layout grid "style" but in either case the transitions don't work in preview, I have read about using a layer and setting it to type "video" but haven't worked much with layers and could use some guidance. The site is
http://phlockersmagazine.com/ Do any of you have tips on how to achieve a similar animated background with smooth transitions and that grid like texture in WB19? I see that there are JS assets in a folder, including "picturefill" that I see is being used for the animation. I have a local copy of the site's files. Any tips on how to achieve smooth animations between slides and a similar page layout would be appreciated!
Re: Video page background with smooth transitions question
Posted: Tue May 07, 2024 7:41 pm
by crispy68
Not at my computer but the demo link you provided looks just like a full screen photo gallery with a textured overlay. This should be easily done in WB. I can provide more detail once back home.
Re: Video page background with smooth transitions question
Posted: Wed May 08, 2024 12:52 am
by crispy68
Try using a slideshow set to fullscreen background. You will probably need to add some CSS to get the textured overlay as the slideshow doesn't have this option.
Something like:
Code: Select all
<style>
#SlideShow1:after{content:'';position:fixed;left:0;top:0;width:100%;height:100%;background-image:url("../images/overlay.png");}
</style>
Change SlideShow1 to the id of your slideshow and you need to reference the overlay image. In my example, the overlay image is in the image folder.
Re: Video page background with smooth transitions question
Posted: Wed May 08, 2024 5:43 am
by wwonderfull
https://gifyu.com/image/Sa4eC
fred If you try hard enough this can be the result, it is about 99% same.
Re: Video page background with smooth transitions question
Posted: Wed May 08, 2024 6:24 pm
by Fredl
Thanks a bunch Crispy68! I'll try that! Thanks also to wwonderful! Not sure if .GIF are fully supported as image backgrounds in WB19, I originally used one, but while it had smooth transitions they did not work in playback.
Re: Video page background with smooth transitions question
Posted: Wed May 08, 2024 6:32 pm
by wwonderfull
Fredl wrote: ↑Wed May 08, 2024 6:24 pm
Thanks a bunch Crispy68! I'll try that! Thanks also to wwonderful! Not sure if .GIF are fully supported as image backgrounds in WB19, I originally used one, but while it had smooth transitions they did not work in playback.
What I used was slideshow it was not gif so not the accurate assumption. It is 99 percent same as what has been used on that demo as I checked.