and yet there is so much more to a successful website, especially a commercial one, than just publishing something
and yet there is so much more to a successful website, especially a commercial one, than just publishing something
-------------------------------
Nothing lasts forever...
maybe I should just be drawing stick figures
-------------------------------
Nothing lasts forever...
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
-------------------------------
Nothing lasts forever...
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.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
Last edited by Egg Bramhill; 24 July 2022 at 10:16 PM.
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
@Egg, 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
And it works on touch screens too. Kudos.
EDIT: Perhaps not. Maybe the slider needs to be larger?
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
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.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
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
@Chris M, I placed a fair number of examples of using anime.js in the TG Tag Cloud as nuggets.
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
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
Bookmarks