#1 a fixed background image
a street artist in palma majorca
this text will scroll while the image stays fixed
click/tap the colored blocks in the header to scroll to that panel
this text will scroll while the image stays fixed
click/tap the colored blocks in the header to scroll to that panel
the panel will grow and shrink as the page is resized
With single page websites becoming more popular and also the use of fixed background images with slants to define the various sections, I thought that I would produce this simple layout using CSS with a little jQuery, showing how 'slants can be changed to 'waves'.
Works in all the latest browser version including tablets and smartphones. iPads and iPhones do not support fixed backgrounds so on these devices the background images scroll.
The layout is fully responsive and uses @media queries to resize the text for smaller screen sizes.
So you have a choice of using the vertical scrollbar to move from section to section, or use the colored blocks in the header to have jQuery smooth scroll to a specific section.
Each section can contain any code you like.
The 'waves' are produced using a single <div> styled with border radius and borders which can be any color you like. The wave height can be easily adjusted by a small change to the wave styles.
Works in all the latest browsers and OS.
The Google ads are responsive, but not 'dynamic' so you will need to reload the page to see changes to the ad size.
these edges can be any color you like
the background color should match the edge colors
a view of the lake in this national trust estate
this panel will grow and shrink with the browser size
the sea was calm and produced some great reflections
and the section grows and shrinks
for steam punk fans
just one more panel below
so the end is nigh, just the footer to go