Jump to content


Photo
* * * * * 1 votes

Question


Best Answer James B , 26 March 2013 - 04:47 AM

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.pagel...r-specific-css/

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 matshearer

matshearer

    Newbie

  • Members
  • 5 posts
  • LocationVista, Ca
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 26 March 2013 - 04:12 AM

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!



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 March 2013 - 04:47 AM   Best Answer

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 -

Please Login or Register to see this Hidden Content


  • matshearer likes this

#3 matshearer

matshearer

    Newbie

  • Members
  • 5 posts
  • LocationVista, Ca
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 26 March 2013 - 05:11 AM

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.