Re: Animated Path Clippers
Wow! But can you show us a practical use for this?
Re: Animated Path Clippers
Quote:
Originally Posted by
gwpriester
Wow! But can you show us a practical use for this?
Well Gary, you can stack a clutch of triangles/hexagons/squares together into a mosaic, each shows a part of a different image.
I assume you did notice most had a Photo pop-up to the fuller image?
You can use handcrafted insets to create different rectangle sizes and positioning so the key part of the image is showing in the cropped thumbnail.
This allows for a fully random patchwork of a photo collection. I would cheat a little and simply have lots of overlapping thumbnails.
You would need to include a CSS line of z-index: 100; to bring the animated image to be topmost.
Replace the CSS code with this:
[class*="-clip"]:hover {
-clip-path: circle(45%);
animation: spotlight 4.37s ease-in-out 6 alternate;
}
@keyframes spotlight {
0% { clip-path: circle(100% at 50% 50%); opacity: 0.25; z-index: 100;}
10% { clip-path: circle(10% at 50% 50%); opacity: 1;}
25% { clip-path: circle(25% at 50% 50%); }
50% { clip-path: circle(20% at 12% 84%); }
75% { clip-path: circle(20% at 93% 51%); }
100% { clip-path: circle(20% at -30% 20%); }
}
The animation can be hidden or replaced with other effects.
Try remove the animation phrase and replacing with another clip-path:
[class*="-clip"]:hover {
clip-path: circle(45%);
}
I left this in with a minus sign in front, which needs to be removed.
The clip-path shape is still a Xara object so you can add in other fills and transparencies.
It need not open a larger image, it can be a Link to a pop-up layer.
It works with text so you could use an top 10% polygon to show a heading and a hover to reveal the entire paragraph:
.accordion-clip {
clip-path: polygon(0% 0%,100% 0%, 100% 10%, 0% 10%);
}
.accordion-clip:hover {
clip-path: polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);
background-color: white;
z-index: 100;
}
This allows for a simple accordion of vertical stacked texts. You could get a horizontal only by moving each text area the width of the previous heading, almost a button presentation.
It make a Hamburger Menu the easier thing ever or ever a mega-menu of buttons, each with their own sub-menus.
Acorn
Re: Animated Path Clippers
Re: Animated Path Clippers
For those interested in developing your own clip paths, you can start with this: https://codepen.io/stoumann/pen/abZxoOM.
Once you have designed one you can save it locally as a Preset.
The when you tweak the control positions, you can hover over the Animation preview.
You would use the CSS clip-paths for the ClassName using the Preset code and its hover using the hover code in the same style i have been presenting.
Upload some of your designs.
Acorn
1 Attachment(s)
Re: Animated Path Clippers
@ Acorn
I had a read up on clip-path and gave it a play; separated the clip-path and animation and using your template, I can create additional clip-paths (per the attached) Attachment 129935
I tried to use a simple transition for a hover, but this failed. I must be missing something here?
Also with new a document, do I have to invoke jQuery and or Xara animation CSS, or something else?
I have used a photo with transparency in my examples as a background, but I doubt that is an issue; the animations should be at the front. I followed these links to better understand clip-paths. https://css-tricks.com/animating-with-clip-path/ | https://ishadeed.com/article/clip-path/
Gary
Re: Animated Path Clippers
Gary
square-circle fails as you gapped the hover, use:
.square-circle:hover { ...
The heptagon-clip has an extra preceding closing brace.
No jQuery.
No ani.css If you so add Mouse-over animations, you may get some conflicts.
Just what you type, which you now see is important. Add a typo and the whole CSS phrase is ignored.
I do the same all the time so I use Notepad++ and Language: CSS to help troubleshoot as well as browser > F12.
The sequencing of the CSS is also crucial.
Under-images are fine. As clip-path removal allows them to be clicked, it is very useful indeed to add click events to the under-images.
The links are fine but can be a tad overpowering.
Acorn
Re: Animated Path Clippers
Many thanks Acorn: I should be more careful! I use Notepad++, but should have added Language CSS and the mistakes become clear. All now works as expected :D
All very useful and thanks for sharing.
Gary