Welcome to TalkGraphics.com
Results 1 to 9 of 9
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Info Image Reveal using SVG Mask Animation

    Egg's SVG reveals are worthy (https://www.talkgraphics.com/showthr...-image-reveals) but rely on a lot of coding outside of the XDA.

    Rather than a click event to launch, my SVG Mask is kicked off with a hover action.
    Each animation is individually curated, like Egg's, but you can adjust the animation in many ways:
    • The mask is a text character or phrase using any available font.
    • Its start size can be invisible (0px) or it can be displayed small (e.g. © 2021, Fred).
    • Its position is adjustable as it how it grows.
    • The symbol punches a symbol-shaped hole through the mask.
    • The mask can be a solid fill colour, with an opacity, or even a linear gradient.
    • The transition time and style is also flexible.

    SVG - Image Masking.xar

    Each image has to exist in the design somewhere.
    I placed mine in !Images and made it a pop-up layer so it publishes them.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Image Reveal using SVG Mask Animation

    I like the wipe out as well.

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Image Reveal using SVG Mask Animation

    Quote Originally Posted by gwpriester View Post
    I like the wipe out as well.
    Well, it beats Xara's approach.

    Thanks.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Image Reveal using SVG Mask Animation

    Egg's SVG reveals are worthy but rely on a lot of coding outside of the XDA.
    I totaly agree Acorn but my idea is to create svg's that are simple for any Xara user to drop in a placholder above any same sized photo and have a generic image transitions, with no need for them to follow the css behind the effect.

    I did go through your excellent example and managed to get it working but I have to admit with my very little understanding of css I struggled

    And once again the placeholder window shows it's weaknes as adding a symol to the code is no larger than a full-stop (period) and impossible to discern.

    LINK
    Last edited by Egg Bramhill; 06 September 2021 at 03:52 AM.
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Image Reveal using SVG Mask Animation

    Quote Originally Posted by Egg Bramhill View Post
    And once again the placeholder window shows it's weaknes as adding a symol to the code is no larger than a full-stop (period) and impossible to discern.
    Egg, you had a go and nicely too.

    In-line SVGs are a separate object model to the main document but the CSS, which is only styling can still access it through the right selectors.

    You cannot discern your added symbol as I set the initial font size to 0px to make it "impossible to see".
    svg#image20 text {
    font-size: 0px;
    transition: 6s ease-out;
    transform: translateY(0) rotate(0);
    font-family: fontawesome;
    }
    The above code is simply saying make the 'fontawesome' symbol very small.

    The pseudo-selector :hover tells the symbol what it is to become in its 6-second transition period:
    svg#image20:hover text {
    transition: 6s ease-in;
    transform: translateY(0px) rotate(360deg);
    font-size: 1000px;
    }

    Grow big to 1,000px and spin round clockwise once.

    I left the transforms and translates in place in both the initial and the :hover so it would be easy to experiment.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Image Reveal using SVG Mask Animation

    Hi Acorn, maybe I'm misunderstanding you but surely the size of the font shouldn't effect the view of the placeholder code???
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.jpg 
Views:	42 
Size:	62.5 KB 
ID:	130573  
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Image Reveal using SVG Mask Animation

    I would have expected the placeholder code to look like below, where the Firefox symbol is reasonably viewable?
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.jpg 
Views:	39 
Size:	58.4 KB 
ID:	130574  
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Image Reveal using SVG Mask Animation

    Egg, my sincerest apologies. I now get what you're saying. I only played with some FA symbols and they showed.
    I imagine the Xara text box cannot handle extended character sets.

    Aeons ago, I suggested using TinyMCE to allow rich text formatting.
    I work with Notepad++ and copy & paste in as otherwise the experience is dire.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Image Reveal using SVG Mask Animation

    I liked that Egg even though you struggled you did great.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

 

 

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
  •