Jump to content

Archived

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

quintinm

Page scrolling with fixed image in canvas background

Recommended Posts

quintinm

Hello.

 

I am trying to work out how to do the kind of parallax scrolling where as the page is scrolled up, the background image in a canvas section stays fixed and the text etc scrollus up over the image.

Some examples:

 

The top image on this site

http://demo.smooththemes.com/theone

 

The teacup image behind "get connected" near the bottom of the page

http://themeforest.unitedthemes.com/wpversions/brooklyn/basic/

 

 

Thank you.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

I think what you're after is the Translate Content on Scroll option, if you go to the Canvas section options, you will see the option here - https://cloudup.com/cH20M4J8DPr

 

You could also look into using Depth Charge - http://www.pagelines.com/shop/sections/depthcharge/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
quintinm

Hi danny, unfortunatly no, that is not what i want it to do.

If i use translate content on scroll the TEXT stats and fades, but the image moves up.

I want the IMAGE to stay and everything else to move over it as the page scrolls up.

 

Another example:

http://muriel-labro.fr/

 

Does depth charge do this?

 

Thanks.

Share this post


Link to post
Share on other sites
GetMeWebDesign

That is achieved by going to DMS Live Editor > site settings > color & BG > upload a background image > fit image to page (checked)

 

For any sections where you dont want the background image to show, set your canvas background color to ffffff or whatever colour you choose, or if you only want the section, set its background color to ffffff etc

 

For that site, for the landing section (above the fold), you want to leave the canvas at default (ie transparent) and add your various mediaboxes, navigation etc. Below the fold, those canvases need to have their backgrounds set to ffffff (first canvas) or f6f6f6 (for the subsequent canvases)


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
quintinm

Hi GetMeWebDesign, how do you do this for different backgrounds for different pages?

Share this post


Link to post
Share on other sites
Danny

OK, DMS doesn't include that kind of parallax effect. However, I found this when doing a quick search which you may be able to implement. 

 

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

Please be aware that this tutorial or the scripts have no been tested with DMS and we will not be able to provide assistance as it is third party code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

quintinm. There are two ways to do this, depending upon how you want the background image to change.

 

I am going to assume you have set a default background image in your site settings

 

Method 1

 

/*image 1 for set pages xx, x1, x7*/

.page-id-xx, .page-id-x1, .page-id-x7 {

  .site-wrap .supersized {

    background-image: url("image-url") !important;

  }

}

 

/*image 2 for set pages yy, zz*/

.page-id-yy, .page-id-zz  {

  .site-wrap .supersized {

    background-image: url("other-image-url") !important;

  }

}

 
Method 2
That may be awkward for a large site, but if you are looking to change the image for a template then you can use the template id (the id is the "name" you give to the template, for instance "My Home",  "Contact Us", "Feature Template" (the ids can be found under DMS Live Editor > Page Setup > Page Handling
 
.template-myhome .site-wrap {
  background-image: url("image-url") !important;
  background-position-y: 50% !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
.template-contactus .site-wrap {
  background-image: url("second-image-url") !important;
  background-position-y: 50% !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
 
.template-feature .site-wrap {
  background-image: url("another-image-url") !important;
  background-position-y: 50% !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
 
NOTE: The CSS for background position-y, attachment and size are there to replicate "Fit image to page". You must have a default image set for the site background and the "Fit image to page" checked, otherwise you will need to add further CSS to the Custom LESS
 
Danny How can you apply class .supersized to a specific template as shown above, without having to write the extra CSS, as using Bacgound-image important overrides .supersized, it appears, and .template-name .site-wrap .supersized doesnt work

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Thanks Danny. 


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
quintinm

Hi guys, GetMeWebDesign, this has helped me no end - you are a rockstar!!

 

I have a question relating to the blog page - i sorted out the template for that page, but then applied it / loaded it for the display page and i have now lost my comments field.

Obviously i should not have used the same template.

 

How do i get the comments field back?

Share this post


Link to post
Share on other sites
GetMeWebDesign

quintinm If I was a rockstar, I wouldnt be doing this LOL

 

Add to Page > Social > Comments


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×