Archived

This topic is now archived and is closed to further replies.

  • 0

Question

Question

Posted · Report post

If you visit cyndilauper.com, pay attention to the black footer bar at the bottom, and the full page background image.

 

Now take your browser and resize it to the size of a cellphone.

 

See how the background turns into an image above the content (not behind) and how the rest of the page behaves?

 

How can I make PageLines do this?  Is it possible?  This isn't my website, however this website contains an example of a feature I'd like, or like to learn to create.  Any insight would be greatly appreciated.  Thanks!

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

Hi Mat 

 

Pagelines won't do that out of the box unfortunately. The only way I think you'd be able to create something similar would be via custom css.

 

Setting up both a background image for the page and then putting a slider in the template with the same image in. Using browser specific css you'd then have to hide the slider on the desktop version, using {display:none;} command, and hide the background image on the mobile version (and visa versa). The end result probably wouldn't be as smooth as that site, I would think that's using some form of js script to give that effect and they have a mobile site set up on a different layout to the main site.

 

For more information on browser specific css check out - http://support.pagelines.me/docs/plugins/browser-specific-css/

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you for taking the time to help me with this!  It is deffinetly going to be a task.  There is just something about how that website moves that is just awesome.

Share this post


Link to post
Share on other sites