Video page background with smooth transitions question

[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!

[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.

[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.

[wwonderfull]

https://gifyu.com/image/Sa4eC

fred If you try hard enough this can be the result, it is about 99% same.

[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.

[wwonderfull]

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.