Hoping for a bit of help with a possible attribute misunderstanding

[ladlon]

That’s what I thought… but it seemed to brake things somehow or another. Seemed like a logical solution, as it would mean the main image size could be anything, and the percentage works fine regardless. In my case, I don’t need pixel accurate placement… just enough control that i doesn’t go off the image.

I don’t recall exactly what broke (…I’ve been doing countless variations, so I lost track… So many varieties of fail…) I know at one point the column bottom extended out far past the bottom of the main image. I suspect it was because the overlay images TECHNICALLY would (at least initially) be below the main image (due to the flow)… and even though they are offset to be on top (z) of the main image (rather than under it), it seems the ‘predictive’ stretching of the div/column stays.

For a while, I was having to use seemingly random/bizarre offset values (ex. for left: or vpercent, etc)… rather than what I thought they should be… and for a while I was thinking that they were relative to the previous (small image overlay) item, rather than the main image (as I was assuming)… but, a little while after that, I watched a great video destinguishing between x: px… x: % and xpercent. That actually surprised me, as they weren’t what I assumed… but, at least now the seemingly random value requirements made sense.

Apparently, if I make the main image static (by not assigning it as anything else), and I make the overlay images as relative, they will each reference the first previous static item… which should be the main image, which SHOULD be exactly what I want… but, again, that didn’t seem to work. Or, it DID, but broke something else.

There’s also a lot of confusion/frustration in the endless combinations of other properties I should/shouldn’t use… like img-liquid, mw-100, etc…

I’m SURE I probably was ALMOST there serveral times, but one or more of these attributes was secretly breaking things.

As for using % in the animation… I know I tried several times, but I think it caused some oddness, and I was forced to use px values to get things to work right.

Hrmmm… That border trick might help… although in my case, they would have to extend REALLY far out… as the amount that the overlay images can stray past the edges of the main image (especially on smaller screens) . One lame fix I was considering was to simply have the range of the overlays travel less, so they are still within the SMALLEST screen/main image size, and then just live with it going no where near the edges in the larger ones (sever limitation of the usable animation area in the large screen versions).

I have several options, and had various successes… but I can’t help but feel like my overall layout system is non-ideal… so I kind of want to verify that the overall structure/method is correct, before finding a solution for it… otherise I may find a solution, but realize later that the stucture it’s for is flawed.

[ladlon]

Did some more tinkering… If I simply use overflow:hidden for the containing div of the ‘main image and all the overlay images’, it all works… in that the fact that sometimes the overlay images go beyond the main image’s edges… since anything outside the image’s borders is cropped (hidden).

I tried again using percentages for the overlay image offset/animation, it still sometimes goes offscreen, because even though the DISTANCE travelled may ‘scale’ properly, the image that is travelling does not scale with the main image… so it’s bigger relative to the main image, do it ‘reaches’ out the edge more, despite travelling ‘less’.

Again, by having everything that sticks out past the main image (via overflow:hidden), then none of that matters, as it’s harmless. So, that’s great.

Everything else works, meanwhile… (responsive rearranging/scaling, etc)… so that solves everything…

EXCEPT… that I still would really like for that ONE specific overlay image (of the group of them) DOESN’T get clipped. But, since the overflow property is global, so it will affect all of the images within that column/div.

So, my latest challenge is to somehow separate that one overlay image (so it’s not cropped), and offset over to be on top of the main image.

I tried putting the other (clip) images in an additional div within their original div (kind of ‘precompose’ them, or nest a div folder within the main div)… with the thought that I’d then apply an overflow:hidden to THAT, meaning that the non-clip image (which is outside of that ‘group’ div), it won’t get clipped.

Great theory… until I found out that overflow:hidden doesn’t seem to work on divs… which strikes me as wrong (yet, it doesn’t seem to want to work here… and only works on the Bootstrap column… which is just a div, isn’t it???). Anyway, that doesn’t seem to work, although I’m fairly convinced it should.

Failing that, I’ll just have to live with that one overlay image not being able to overhang the main image.

[droidgoo]

sometimes we have to compromise with the capability of the tools we are using… it’s also a good skill to have.

that said, to your scaling issue… CSS also provides for variables and the ability to do simple math that can be applied to elements. perhaps this can get you the rest of the way there.

A Couple of Use Cases for Calc() | CSS-Tricks

https://www.w3schools.com/cssref/func_calc.asp

[ladlon]

I thought I read somewhere just yesterday that there were compatiblity issues with calc()… I have never used it before (nor even heard of it previously)… so I’m just going by what I thought I heard.

That said, I don’t even know what it does, so who am I to say.

It’s such a catch-22 what I am dealing with.

On one hand, I want to have a responsive block with an image in it, and several smaller images overtop of it, which all scale together… That I’ve done, no problem.

But, I also was hoping to have the overlay images getting cropped if they overhand the main image (which they unfortunately tend to do sometimes, as a result of either the animation not scaling (as far as distance travelled), or (when done with a different technique) the animation scales, but the animated image doesn’t, causing it to still sometimes overhang, since the sprite is bigger, relative to the main image…ugh).

But, that was all solved by cropping the overlay images via the overflow:hidden property… Now any overhang ugliness and precise movement range adjustment requirements were irrelevant, as they would just get clipped away and be ‘offscreen’. Nice!..

…until I wanted to have ONE of the overlay images be able to overhang… which I thought would be easily solved by having all the images except the ‘non-clip’ one in a div ‘folder’ where I could apply the overflow:hidden to… and then have the other (non-clip) image not get clipped, since it’s outside of that.

Seemed like a great theory, but (for reasons I don’t yet understand) it doesn’t work… even though it seems like it should. I can get ALL the images clipping if I put the overflow:hidden on the ‘root’ div… but not if I put it on the ‘nested’ div (where I put the images I want clipped). Not sure why…

I just spent a good chunk of time setting up a (seemingly pointless) codepen demo for this on another forum… Pointless in that I had to strip away a ton of stuff, as it would just confuse anyone looking at it out of context, and it had tons of image sources and properties which wouldn’t work in the codepen demo. But, I did it, as best I could. Probably won’t be useful to them, though. And even if a solution is present, I suspect that there is some other factor (which was stripped away for the demo) which might mess it up in the real project.

Well, the good thing is, at worst, I just give up on the idea of that one overlay image not being able to overhang… and then everything works actually very nicely as I have it. I’m just trying to see if I can get the isolate overhang to work, as it really seems like it SHOULD… and seems like it would be really easy.

Anyway, I’ll read up on Calc(), since it seems to have recently appeared in my life, and I might as well at least get to know it!

Thanks, droidgoo…

[droidgoo]

@ladlon

sprite

… is the right word to use.

it leads you to machine language if you want to get video game level of control.

you have to live within the limits of the tools you are willing to deploy.

might be a good time to re-evaluate what you are really trying to accomplish with this webpage.

what do you absolutely NEED it to do, and what parts would be nice if they worked but are not essential to the top level goal.

just trying to create the possibility that you could be stuck in a local minima and not seeing the forest for the trees… it’s happened to me before.

[ladlon]

I’m going to have to disagree with you on this, as I am sure what I am trying to do is not only not difficult, but also fairly common:

-Have images on top of other image (Done by relative/absolute positioning or GSAP)
-Have the page responsive (main image and it’s ‘children/overlays’ scale together)

Things get messed up with some of the other things I add, I guess…

Otherwise, it would meant that any website with animation of images flying around the screen are not responsive, which I refuse to believe.

I’ve had it working, numerous times, but what happens is that I am most likely just messing it up with conflicting properties, improper nesting/properties, or something like that. I had it 90% working. I guess I’m just not explaining things properly.

[droidgoo]

have you found an existing webpage that demonstrates what you are trying to achieve?

perhaps that can be instructive… stealing html code is a time honored tradition

[ladlon]

Ha!.. Ya, that’s always an option, although I may end up taking days trying to find a site that does something similar… and even if I did, who knows if they are doing it under similar circumstances… and even then, there’s a good chance I wouldn’t be able to decypher the coding. I was hoping to find a vid somewhere… but it sems most/all of the ‘GSAP’ animation tutorials seem to be doing a non-responsive screen (and often use an HTML background, rather than an image element.

Then again, yesterday, I thought to myself… ‘Hey, there’s an idea… My background image doesn’t need to be REALLY accurate (placement/scale) through each screen size… as long as all the sliding, etc is still contained within a stable frame’. So, I tried that (…although my initial fear was that I’d end up with tiling in some cases). Kind of worked… so that was one of my MANY variations I have piling up over here.

I tried a whole bunch of things… each with success, yet usually with some other things being affected.

But, I actually had it ‘working’ a day or so ago, so I went back to that version… The only thing really ‘compromised/given up’ was that overhang effect of the one element… and even with THAT I found a potential solution (since I realized that the column was actually wider than the image, but the same height as it… So, using a non-hidden overflow, things going off the top/bottom would be clipped, but not things going off the left or right (…well, until they went far enough to actually hit the column edge). And, as luck would have it, that was actually good, as the only things that needed to be clipped were going off the top edge.

But, in the end, I figured why tempt fate, and I just went with my previous 'working’version. That’s what I’m working with right now.

One of the challenges was that the main overlay image wasn’t scaling with the image (…at least until you got to the XS size, and then it would… column edge thing, I think). So, I remedied it by putting that one element in a nested column within the main one, allowing me to adjust the Bootstrap column width of just that item… which gave me a crude (but nonetheless working) means to scale that image for each screen size. The only other issue, was that this overlay image would also sometimes misalign horizontally with the intended position on the image, after it WAS scaled… and I addressed that (equally crudely) with a Bootstrap padding/positional offset… Crude, but it too got me where I needed.

So, that all works… I’m dealing now with the upwardly moving other overlay items… and the burn there is trying to figure out where my random range of horizontal positions is actually spanning in the image. I have no idea where the actual numeric range lies relative to the base image… so right now, it’s ugly number guessing, running the animation, and waiting to see if I spot something showing up where it shouldn’t. But, again, because I’m applying a overflow:hidden to the whole thing, any strays are not visible, and it serves as an unintentional (but very welcome) random ‘delay’ until the next visible one appears (…I’m making lemonade out of lemons!)

So, ya, that’s all working. Good thing, as I rebuilt this thing so many times, trying so many theories and variations. Seems solid currently, so I’m not going to mess around with it! On to the next tasks for it!

[droidgoo]

i’ve often come to the same STANDING HOUSE OF CARDS situation…

the best thing to do at that point is to take your hands off, back away slowly, and hope there are not drafts in the room.

good luck

[ladlon]

Indeed!

It’s actually working quite lovely right now. Haven’t even been able to break it. Things are animating, things are ‘scaling’ properly, things are getting cropped if/when they leave the image… I even managed to get the overhang effect, even with the Overflow:Hidden thing globally clipping everything. I came through strong at the end!

Working on more of the graphical elements for it currently. It’s looking really good.