Yes that’s what I said.
You’ll need to hide the overflow.
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
overflow:hidden;
}
1 Like
Sorry about that, I didn’t read everything.
I will next time.
1 Like
You asked about splitting the play into 4 ways but I can’t find the thread so here’s the demo.
Again this is just a bare bones proof of concept and the circle has to stay a fixed width and height or it mismatches.
Image going horizontally, play image breaking in 4 pieces.
We already solved the image for 2 or 4 sections so that is of no real consequence. You asked about the play button being split which is the crux of the demo.
1 Like
Rough attempt at tidying up html (but may have caused other issues.)
1 Like
I don’t know what I did here, but can this be improved?
Anything at all?
I was trying to figure out a way not to use .curtain-ratio-keeper
and this seems to work.
Can it be made better?
https://jsfiddle.net/tdxhw25e/2/
.move-left.j1 {
transform: translateX(-50vw);
}
.move-right.j2 {
transform: translateX(50vw);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const slide = document.querySelector(".j1");
slide.classList.add("move-left");
const slide2 = document.querySelector(".j2");
slide2.classList.add("move-right");
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
}
I gave you an example where I removed many of your wrappers. I probably removed too many but you can see the basics still work even If I inadvertently misplaced the odd thing. Things like .wrap seem to do nothing. I believe you have about 8 wrappers when only 3 or 4 are needed.
You can’t play the video because the pointer-events is missing which we discussed in detail.
It’s your job to build this thing using all the information you’ve been given. However don’t keep duplicating old demos without adding the bugfixes that have been discussed across all your threads.
1 Like
I have it saved on my desktop so I remember.
const splitWrap = document.querySelector(".split-wrap");
splitWrap.style.pointerEvents = "none";
How come this code uses 2 of these.
https://jsfiddle.net/hstdpL6y/1/
<div class="panel-left"></div>
<div class="panel-right"></div>
And this code is able to use 1?
https://jsfiddle.net/r2y70pc3/2/
<div class="slide-wrap"></div>
Would the 1st code be able to use 1 also?
In the first example in order to match the split image halves we must make the image container twice its size, We do this by having a 50% parent (left-wrapper) and inside left wrapper we add an inner element with the pseudo class (:before) that is twice the size of the parent. It is this pseudo element that holds the image background. It is twice the size of its parent but as the parent has overflow hidden you only see half the image.
We then have to do the same for the right side image. Effectively the technique requires 4 containers (2 html elements and 2 pseudo elements) to do the job (and a common parent).
In the second example we are using background-attachment:fixed which means that we don’t need extra pseudo elements because all we are showing is a glimpse of what’s behind it. Background-attachment:fixed places the image in relation to the viewport (and not the element its attached to) and the image is then scaled to fill the viewport.
Effectively with background-attachment:fixed the image shows in the element its attached to but only if it is over an area where the image exists. It can be hard to visualise what’s happening but if you imagine the viewport is filled with an image. Then your curtain element is like a little window that you look through and see what’s behind. There’s no need to match anything up because all you are seeing is part of the image that happens to be on that place so both halves will always match up.
You can’t use background-attachment fixed in your first demo because you are not matching it to a viewport width and height background.
2 Likes
Thank you for explaining that.
1 Like
When you say mobile device, what do you mean?
It will only work on a desktop, but not a tablet or a laptop?
A device that is mobile. e.g. a Phone or tablet or ipad.
The viewport on a phone/ipad is different to a desktop and fixed attachments (with a cover value) don’t work on all devices as some will scroll away, some will stretch the image over the content and some may be ok. They will still work but the image may not match up with the background in the same way it does on desktop.
I’ve checked my original demo and that works on my iphone which has the latest os but of course the demo is just bare bones and if you have content below the fold then that may stretch the viewport image (unless the latest os has fixed the issue).
1 Like
<div class="jacketwrap"> is only used in the html, not the css, how come?
oh, it’s being used in the javascript.
How come .split-wrap is nowhere in the css?
This?
How is the code working without this in the css?
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 240px;
height: 260px;
margin: auto;
border-radius: 50%;
transition: 10s ease;
}
Also, how are you able to have the split pieces fly off in the direction of the sliding curtains?
Also,
You changed this: width: 50%;
to this: How come?
width: calc(50% + 1px);
Is there supposed to be a noticeable difference?
The js uses it as something to click but its not really used in the html or css. It could probably be done away with with a bit of refactoring but it keeps together those four corners nicely so makes a nice wrapper.
I already commented in the code why that was needed. It’s needed for rounding errors.
50% of say 99 is 49.5 which sometimes gets rounded down to 49px and would leave a gap (which was evident i my demo when slowly resizing the screen). Adding an extra 1px solves that issue.
It doesn’t need it because there are already existing elements that can be used.
Same as we have done before with transform etc.
1 Like
The transform is the same here.
How do you get it to go left and right instead of up and down?
https://jsfiddle.net/17v0nw5x/
.slide .j1 {
transform: translate(-100%, -100%);
}
.slide .j2 {
transform: translate(100%, -100%);
}
.slide .j3 {
transform: translate(-100%, 100%);
}
.slide .j4 {
transform: translate(100%, 100%);
}
I’m trying to do this:
It keeps doing this:
You would need to adjust the transforms roughly like this.
.slide .j1 {
transform: translate(-200%, -100%);
}
.slide .j2 {
transform: translate(200%, -100%);
}
.slide .j3 {
transform: translate(-200%, 100%);
}
.slide .j4 {
transform: translate(200%, 100%);
}
How come in your example it shows this?
Is yours done a different way?
.slide .j1 {
transform: translate(-100%, -100%);
}
.slide .j2 {
transform: translate(100%, -100%);
}
.slide .j3 {
transform: translate(-100%, 100%);
}
.slide .j4 {
transform: translate(100%, 100%);
}
Yes the stacking context of my example is the same as the viewport. You squashed yours inside the red border. You said you wanted it to travel all the way across the screen and out of the viewport which is why I did it that way.
1 Like