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?
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.
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.
Indeed I have, Andrew. Two issues, so far as I can tell.
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
When the ship rotates counter clockwise, the lower left section of the ship is cut off (screenshot below)
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.