Okay
  Public Ticket #242002
Is There a Way to Put Reduced Opacity Images Floating Over to Give 3D Effect Like on Other Parallax Sites
Closed

Comments

  • Echo started the conversation

    I want to be able to add images with reduced opacity to give more depth to my website. THE SAMPLE site I saw that uses some other platform can do this as well as dozens of others I\'ve seen. Can SALIENT accomplish this? Essentially I want to add floating layers of single .png images to add depth and texture. Essentially I want to add LAYERS of DEPTH http://www.pressels.com/ Does Salient have this functionality built in?


    Lastly, there doesn't seem to be a way to get past the STRAIGHT EDGE across the top of a nectar slider section. When people are scrolling down it would be nice to be able to design the different sections so they don't just have a straight edge across. I'd like to add .png images to the top or bottoms of sliders or static sections so that when people scroll down it is more organic instead of a straight horizontal line across from the slider or static section. I've attached a screen shot from another website that at the top of their slider they've put cut out .png images so there is a jagged edge instead of straight horizontal line across. I circled in RED what I am referring to in the screen shot. Also here is their website if you want to see what I'm talking about http://www.putzengel.at/

    Maybe using CSS and z-index? I've tried but can't seem to get layers that will be on top and bleed into the slider above or below.

    THANKS :-)

  • Echo replied

    Here is another screen shot of my website I'm working on. Where I've circled in red is there any way to insert a .png there so the edge isn't a straight line across? I want to design rounded edges and I have some other ideas. If I put a .png in there now it still shows the background color.
    SCREEN SHOT ATTATCHED :-)
    Thanks

  •  991
    ThemeNectar replied

    Hey Echo!

    1. Unfortunately there's no built in way to parallax multiple layers when scrolling like that, however the new mouse based parallax (which was added in 4.1) does indeed offer the ability to define up to 5 layers. See this for for information:

    http://www.youtube.com/watch?v=NIgi-YyspcE

    2. This would require some custom css - you'd have to add a class onto your row such as "negative-top-margin" and then set a .png jagged image as the BG and in your custom css box use something like this:

     
    .negative-top-margin {
      background-color: transparent!important;
      margin-top: -80px!important;
      padding-top: 120px!important;
    }
    

    Cheers


  • Echo replied

    Thanks