Printable View
This is one of those things that won't stay in it's allocated memory slot. This time I'm going to write it and then forget where I wrote it instead.
Using a placeholder to create a comparison slider, but the same applies to most of these things. Where does the following go? Page, Website, Placeholder, Body, Head???
HTML?
CSS?
JS?
The example I'm working on >>> Before After Image Slider (Vanilla) (codepen.io) <<<
Placeholder Body
Head
Last
Mostly.
Acorn
So...
HTML - Placeholder Body
CSS - Head (Placeholder, Page or Website?)
Last - Don't understand this bit at all. Not unusual though.
YesQuote:
Originally Posted by Chris M
Any of them
JS acts on DOM elements, they have to exist first.
I detailed all this once before. Still looking.
I thought I would try terse for a change.
It's just lazy as is not capitalising, failing to use punctuation, sentences and paragraphs.
The worst failing is assuming someone is inside your head.
A statement that can be taken in several ways.
I am still looking...
Acorn
Got it. The penny dropped.
Yes, I'm sure this has been explained before more than once. It's one of those things that just doesn't stick. Probably because I don't understand how it actually works. I also don't use coding often enough, or diversely enough, to be anywhere near to fluent.
And the penny dropped right off the edge and into oblivion.
Egg made one that works well, but doesn't have a 'click and drag' feature. I tried to work out what bit goes where and ended up drinking heavily and sobbing quietly.
Egg's version >>> Attachment 132445 <<<
The one I'm trying (and failing) to make work is from Code Pen, linked in post #1. I've tried numerous combinations of Page Head/Body, Placeholder Head/Body and even staring really hard at Acorn's steps didn't give me a result.
I've pasted the code as it appears on Code Pen, although I realise it can be trimmed. I've also started afresh and haven't placed the code anywhere except where you see it. If anyone can have a look and start the answer with "It's easy, what's wrong with you." I'd be a grateful little member.
>>> Attachment 132446 <<<
Hi Chris, finally got it working (apart from the ocassional images getting a blue hue, which was the case on the original too). It took some time to sort though!
I've also added some additional js that someone posted in the comments section to get it to work with touch screens.
DEMO
Egg, I doff my cap to you, sir.
Attachment 132477
I'm sorry you spent more time than you should have on it. Hopefully, you did a little jig and shouted 'Hell yeah' before remembering you aren't 12 anymore.
Not for the first time, I thank you for freely giving your time, patience and knowledge.
My pleasure Chris, this is always been what this forum is about ;)
I find most coding on-line is clunky and not best suited for the Xara environment.
Instead, here is my anime.js take on the idea: Attachment 132483
The top image is the After one and has a target Name of 'after'.
The is a JavaScript Slider Placeholder that links into the animation.
The animation runs the once to show the Slider in operation.
Thereafter, you drag the Slider.
If you don't want the animation to start, add 'autoplay: false,', or set 'duration: 1,'.
With a different image width, remember you need to change the Slider width in its Code and line up left edges.
The rest you can play around with.
The CSS for slider controls is browser hit and miss so don't tweak it unless you can spare the time testing.
Acorn
and yet there is so much more to a successful website, especially a commercial one, than just publishing something ;)
maybe I should just be drawing stick figures ;):D
and there will always be a need for stick figures...
not arguing with you joe, but this is a xara web design thread, it is about xara web design using the xara programs; there will always be other ways of doing things
I must admit that your anime.js code is far easier to use Acorn. I tried for a few hours getting the Chris's link to the CodePen before / after to function correctly in Xara.Quote:
From Acorn: I find most coding on-line is clunky and not best suited for the Xara environment.....
I found yours far easier to use and it only required the width of the slider placeholder to be amended to the image width. Excellent!
LINK
@Egg, thanks.
Acorn
And it works on touch screens too. Kudos.
EDIT: Perhaps not. Maybe the slider needs to be larger?
You guys are so quick. I'm still 'ooh, if I change 0% to 100% the transition goes vertical.' Not even thought about variants.
I agree that Acorn's solution is much, much smaller, making it easier to try and follow. I'm going to play around to see if I can understand what's actually happening, but will probably return with hair-splitting questions that don't really matter.
I found lots of ways to break it and a few ways to adjust the speed of the slider controls, which I promptly reset.
I moved the 'Website Head' code to the 'Page Head' as that makes more sense to me, and removed the <style> section that creates the shadow.
Adjusting the percentages in 'clipPath' (Page/Body) has interesting results.
I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around. I tried 'rotate' and 'fade' but that just broke it.
Likewise, 'direction' is set to 'forward' which makes you presume 'backward' would do something, but no, no it doesn't.
I would like to play around with the look of the slider control. Changing the circle to a diamond, changing the colour etc. I can't determine any reference to the shapes that form the control.
I can make the circle start in different positions by editing, SLIDER Placeholder/Body under value=, but it doesn't reveal the after pic until you click it.
These are just things I would like to play with and are not important.
Lastly. I have no idea what your icon, with <svg><path></path></svg> in the Placeholder/Body does. It's clearly needed in the page area...but why?
Hi Chris,
Link to js easing types below.Quote:
I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around.
It's fun to see the results but the problem is the easing effects the images but not the slider.
Demo using easeInOutBounce
js easing types
@Chris M, I placed a fair number of examples of using anime.js in the TG Tag Cloud as nuggets.Quote:
Originally Posted by Chris M
The anime.js Library only needs calling up the once for a website so Website Head is correct.
If you add it to Page, you will fall into the habit of copying a page and forgetting the code was there.
Even if the animation is on another random page, the Website Head code ensure it will run.
.shadow was my preference over Xara's mucking about with page shadows.
It is not required in Xara Plus or in this example.
You need to understand CSS clip-path inset parameters (top-left - bottom right) format: https://css-tricks.com/almanac/properties/c/clip-path/.
For easing and direction, look at anime.js documentation: https://animejs.com/documentation/.
For CSS formatting of Range Sliders: https://freefrontend.com/css-range-sliders/ and https://uicookies.com/range-slider-css/.
I reported how <svg><path></path></svg> was needed for a Xara install of anime.js; even I am yet to discover the why.
If I hadn't, using anime.js, would be a lot less satisfying to use.
Acorn
@Egg, I agree that when using a slider for comparing one image to another, effects like bounce wouldn't be a good choice. Linear and fade are the only two viable options I can think of. The examples are well worth keeping, even though I haven't been brave enough to wander too far into animation other than the Xara offerings.
@Acorn, Your explanation as to why Website/Head is used makes perfect sense - notes are being made.
The clip-path mention was me poking things with a stick to see what the percentages did.
The links I'll look into and have a play. I have to be honest and say that I don't follow/understand a lot of your tutorials, and selfishly only play with those I see a use for. I therefore miss a lot of the rudiments.
Chris, it doesn't bother me as I also started by poking things with a stick.Quote:
Originally Posted by Chris M
The before-after slider, I considered from first principles:
- Two stacked images.
- What CSS exists to crop - clip-path: inset().
- How to control - HTML Range Slider.
- How to manage programmatically updating - anime.js.
anime.js manipulates CSS numeric values.
It is a highly cut-down re-implementation of what jQuery can achieve.
I could have gone for straight JavaScript but the fun with anime.js is how you easily script different behaviours.
The manipulated object needed a handle so it gained a target (Name) of 'after'.
You can interrupt and hijack an animation with .seek().
The Range Slider does this with its 'oninput' in-line JavaScript.
The animation itself uses the update function call to move the Range Slider.
To understand anime.js better, you need to krok that is a collection of JavaScript statements in a framework to manipulate CSS values.
You need to have some knowledge of both.
For such stick-poking, i would use W3 Schools with searches like 'w3 css fade' or 'w3 js random'.
Acorn
Sorry if I didn't understand your discussion. Many years ago I bought this widget for £2. It works great.
https://www.benjaminmoses.co.uk/exam...fterwidget.htm
Originally Ben Moses offered it for free to help out TG members.Quote:
Originally Posted by Spamiky
Bed Moses was a Xara employee and so leveraged his inside knowledge of the XDA to build a Xara Third Party Widget.Quote:
Originally Posted by Boy
It probably still has fixed sizes and there is nothing to adjust.
It does its job.
My suggestion is simpler, if not better, and free.
Acorn
I like the flexibility with anime.js and you could style the progress bar with some research and practise. https://initiostar.co.uk/demo/anime-reveal/
The only drawback with the current Pro X19 (May 3) is we don't have 'Shapes as SVG' which was introduced in Pro + v21.6 (or I cannot find it).
Here you go Gary on Xara Designer + v22:
Thanks Egg, that confirms that Pro X v19 does NOT have (as yet) 'Shapes as SVG'. Time will tell what comes next for Pro X.