How to do this background? (Update: site is now live)

https://www.bbpiratefest.com/

In preparation for wire framing a site for a client, I came across the site above that I’d like to borrow the idea of the background (using my own licensed images, of course). The background with the moving ship and rising air bubbles only shows on desktops, which is fine - but I’m unsure of how to accomplish it.

Any other pirate-themed sites I should look at for inspiration?

Maybe something like this - https://barth-partners.com/pub/it/stacks/particles/

Might also be able to do it with layers in Joe’s Parallax stack or by using Tumult Hype (that last could be over the top).

Or if you’re feeling adventurous - https://codepen.io/Mark_Bowley/pen/mEtqj

Rob

1 Like

I have the background and bubbles working using very crude images as placeholders (I haven’t selected, licensed, and/or cleaned them up yet). The background image is set using site styles and the ship is a BluePrint One overlay. Any suggestions on how to introduce a very gentle and sporadic rocking motion? Doesn’t need to be BP1 - I’m open to suggestions.

https://www.mediapressions.com/draftsite/

1 Like

I know exactly how to do this with a stack - I’m just racking my brains for the name of it… hold on…

Aha - here you go - https://www.weaverskingdom.com/preview/parallax-scene/anchor/

2 Likes

Thank you, Justin! That’s the ticket!!

As per my original message - the gentle rock is just a CSS animation - you really don’t need a shed load of JS to do it.

Just give the ship image a custom class of ship and then apply the keyframe animation to it (which I’ve lifted directly from the original site)


.ship{
    -webkit-animation: rock 19.2s ease infinite;
    animation: rock 19.2s ease infinite; } }
}


@-webkit-keyframes rock {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  30% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg); }
  50% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg); }
  70% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }
@keyframes rock {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  30% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg); }
  50% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg); }
  70% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }
2 Likes

Even better - thanks Andrew! I tried to lift the CSS from the site, but it was a step above my pay grade (I did get the bubbles, though!). Many thanks to you and @Justin.

Let me know if you get stuck

Indeed I have, Andrew. Two issues, so far as I can tell.

  1. The content rotates.
    – The ship and content are both within a Sections Pro stack (the content is inside a BluePrint ONE stack, within the Sections Pro). The Sections Pro has a class of .ship. I’ve tried various means of applying a class of .shipnot to the “inner class” of SP as well as to the BP One stack (and css of animation: none for it). But, the content rotates along with the ship. I’m sure there’s an easy fix - but it’s not coming to me

  2. When the ship rotates counter clockwise, the lower left section of the ship is cut off (screenshot below)

screenshot_5718

You must animate only the ship. If it is a background image of a section then either the ship or the content needs to be floated so that they are separate. You can do this with either a Sections Box or by using the advanced positioning child.

The cut off may just need the center point of the ship moving (translating) so that it fits.

If you want, send me just that section in a project and I’ll sort it.

1 Like

Thanks everyone. Tav ended up sorting the final details out for me - and all is working beautifully!

And - the site is now live: https://suwaneefest.com/ Thanks again to everyone who had suggestions. The client is very happy.

2 Likes

If I hit “Click here to apply” nothing happens…

1 Like

Thanks, Jan - all fixed now. I overlooked turning it from a ‘button’ to a ‘link’ when the revamped site went live. Appreciate the heads-up!

1 Like