Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Oct 2019
    Location
    USA
    Posts
    198

    Default i want my sticky photo to .... (but I can't)

    I have a photo about a screen height down from the top of page
    it scrolls as they normally do
    I can make it stick at the top
    * but I cannot make the subsequent texts and photos slide in front of it
    ie i can not force the photo to be in a back layer
    *in fact the 'sticky notes' say it will be in top layer when using sticky
    the desired effect I see all over the net
    https://pacificliberty.com/ (this photo never moves -- is that easier?)
    but I can not do it
    how??

    similarly, I often see
    a photo with text over scroll over it
    then a fresh photo appears
    https://conduit.group/
    how/

  2. #2
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: i want my sticky photo to .... (but I can't)

    Both sites are using 'Parallax' scrolling which can be found in the Web Animation options.

    The Conduit site will be harder to replicate because it has more tricks, but the effect is still Parallax Scrolling.

  3. #3
    Join Date
    Oct 2019
    Location
    USA
    Posts
    198

    Default Re: i want my sticky photo to .... (but I can't)

    i did get parallex scolling to work a little now
    www.ravenswood.co
    but still can not get the top photo to stay in BACK of the other items as they slide uo
    guess I will keep playing
    thanks

  4. #4
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: i want my sticky photo to .... (but I can't)

    Try placing your photo on the Pasteboard layer with the Fill Browser option.

    Click image for larger version. 

Name:	Fixed Picture Pasteboard - Fill Browser Window.jpg 
Views:	73 
Size:	127.6 KB 
ID:	125847

    The photo will stay fixed and everything will scroll over the top of it. Similar example at https://theparsonage.co.uk where the photo is used as a watermark. You can have the pasteboard scroll too.

  5. #5
    Join Date
    Oct 2019
    Location
    USA
    Posts
    198

    Default Re: i want my sticky photo to .... (but I can't)

    was actually thinking of this
    without the filled browser
    will experiment
    thanks!

  6. #6
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: i want my sticky photo to .... (but I can't)

    Photo set to Stretch Full Width with Parallax scrolling and Sent To Back, add text as normal.

  7. #7
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: i want my sticky photo to .... (but I can't)

    Hi TheeeDragon,

    When the parallax feature first came out in Xara, I experimented with every possible combination of settings I could think of to get the effect you're looking for. I had the same problem as you… nothing worked.

    Only a couple of days ago, I was looking at a demo website that Xara put out to show its potential, and lo and behold, it did exactly that. I opened up the coding and figured out how they did it (I think ). It is not something that you can do directly with the software, so it requires a workaround. I’ve only had the opportunity to experiment with it a little, but it seems to work! Here’s what you can try:

    1 Put your images on the page where you want them to appear (probably using the stretch to full width option). That is to say, if you want it to show up after a particular text, place it after that text. Don't put the text over the image (unless you want it to appear that way), just in the areas above and below. You can do this with multiple images.

    2 Use the naming option (UTILITIES > NAMES) and in the Apply Name box, type htmlclass="parallax" (or use a different name than parallax if you prefer) and click Add. For any subsequent images, you can choose the same name from the dropdown under Apply Name.

    3 Once that’s done, go to UTILITIES > WEB PROPERTIES > WEBSITE and click the HTML Code (head) button. Enter the following coding:
    <style>
    .parallax {
    background-attachment: fixed !important;
    background-position: top center !important;
    background-size: cover !important;
    }
    </style>

    (If you used a different name, put it in place of parallax)
    Click OK and OK.

    Now you can preview the page.

    This worked perfectly for me and gave me the result you want.

    Please let me know if it works!

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: i want my sticky photo to .... (but I can't)

    I followed your instruction and it works as you'd expect, very nice. However when I publish it to my server it just scrolls normally.

    ON THE WEB
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #9
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: i want my sticky photo to .... (but I can't)

    Hi Egg.

    As I said, I haven’t had the chance to check it completely. I notice that your page has strange functioning even when I open it in Chrome from the preview window. Mine works. I´m going to see if I can figure out what’s going on.

    At the very least, hopefully we’re on the track to being able to create this effect.

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: i want my sticky photo to .... (but I can't)

    your page has strange functioning
    I 'm lost, what's this?
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •