Splitting apart CSS elements along with the background

HTML & CSS
1

If I wanted to have the svg play break in half down the middle along with the background, how would that be written?

I was thinking of creating a 2nd play image and having the 1st one be wrapping around it, or maybe it would be written a different way.

or what I am thinking can’t be done.

Is this even possible to do?

Can CSS elements be split in half?

https://jsfiddle.net/hsyd9m2a/12/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}


.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}


.panel-left,
.panel-right {
  position: absolute;

  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
}

.panel-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
}

.panel-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}


.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.jacketa {
  position: relative;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-shadow: 0 0 20px 2px #f9066bf7;
  box-sizing: border-box;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {

  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.container {
  width: 990px;
  height: 990px;
  margin: 100px auto;
  padding: 25px;
  overflow: hidden;
  border-radius: 25px;
  border: 2px solid #0059dd;
  box-sizing: border-box;
  background: #000000;
}

.container-top {
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}


.hide {
  display: none;
}

<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide">
        <div class="container-top">
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="jacketa" title="[ Enjoy The Music ]">
        <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
          <title>[ Enjoy The Music ]</title>
          <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
        </svg>
      </div>
    </div>
  </div>
</div>
2

We just did that exact same thing in the other thread with the background image and I showed you how to split it into 2 or 4 pieces. You’d need to do the same thing and place the svg twice and on top of each other but wrapped in a parent that is only half the original width and then hide the overflow. This means you show half of one and half of the other just as we did with the images.

This is a rough proof of concept and I haven’t bothered with scaling or percentage widths etc.

I had to remove the box shadow because it gets clipped with the overflow. If you wanted box-shadow then you’d have to wrap the .j1 and .j2 in a single parent wrapper and apply the box shadow to that instead. Of course you’d need to change the positioning of the inner items also.

I’m short of time so you will have to play around yourself but you already have all pieces of this puzzle.

1 Like
3

My idea here was to make the black one transparent and have it over the one that you would be able to see.

When you click on the transparent one, it would disappear, and the one under it would be able to be split in half.

https://jsfiddle.net/9zanxqjd/5/

.jacketa1 {
  position: relative;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: black;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
}

.jacketa2 {
  position: relative;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-shadow: 0 0 20px 2px #f9066bf7;
  box-sizing: border-box;
}

<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide">
        <div class="container-top">
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="j2">
        <div class="jacketa2" title="[ Enjoy The Music ]">
          <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
            <title>[ Enjoy The Music ]</title>
            <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          </svg>
        </div>
      </div>

      <div class="j1">
        <div class="jacketa1"> </div>
      </div>

    </div>
  </div>
</div>

4

If this was an attempt to get the box shadow showing then you’d have to do it like I said above.

e.g. Like this:

The only way to split something is to have two versions of it and clip each half accordingly and then join them together (which is what we have been doing for all those split backgrounds).

5

It wasn’t an attempt at that.

Using the javascript, when it is clicked on, it’s just going to disappear.

So, whatever would be clicked on, it would need to be transparent, and then the actual thing underneath it.

I was trying to explain that.

6

Not very well unfortunately as it makes no sense :slight_smile:

Why would you want a black circle on top of your blue circle and why would making it disappear magically make the one underneath split in half.

I can’t see any logic there.

7

It would be made transparent so that you would be able to see through to the real image.

Because once you click on it, it will just disappear.

8

Yes but what is the point of that?

Is this just another effect?

I don’t understand what it has to do with splitting the icon?

10

I was only doing horizontal, not 4 way splitting.

Using yours I did this:

https://jsfiddle.net/h1wm0yup/

11

You have a typo here.

*    */
.jacketa {

It should be:

/*    */
.jacketa {
12

If you want to see it split in half then you are going to have to stop hiding it with display:none.

Also when you click the circle the page suddenly jumps to 900px tall so the icon will move down the page (because it is centred in the available space) so you may have to place the split wrap in relation to that top container rather than the original opening screen.

You will also need to change the transform distances like so.

.jacketa{display:block!important;}
.container{height:auto;}

.curtain.slide .j1 {
  transform: translateX(-100vw);
}
.curtain.slide .j2 {
  transform: translateX(100vw);
}
1 Like
13

I got up to:
https://jsfiddle.net/wfmr0L86/2/

Placing the split wrap in relation to that top container

It messes up every time I move it.

Also, when all transitions are set to 20s ease, how come the play image is moving faster than the background wall opening?

https://jsfiddle.net/mpqcu4dz/1/

14

you’ll need to match the distance they travel. Change the blinds to this.

.curtain.slide .panel-left {
  transform: translateX(-100vw);
}

.curtain.slide .panel-right {
  transform: translateX(100vw);
}

Now they will still stay the same pace as the circle.

You also need to lose the box-shadow as soon as its clicked otherwise it looks awkward.

You still have the issue of when the page opens the page gets taller. I don’t really know what you can do about that except to have the page open at the correct height to start with and then there will be no jump. I don’t really know why you are setting that tall height anyway as there is no content in place. You should let content dictate the height.

I’m away for a week now without a computer so someone else will have to jump in :slight_smile:

1 Like
15

I got that.
https://jsfiddle.net/6hLgvr2s/

Next I would need to position the play button in relation to the revealed content instead of the page. I don’t know how that would be done, or if that’s what I would need to do.

16

That doesn’t make sense as I said before.

You can’t have the page suddenly double size and not look odd.

As I said in your other thread it’s probably best if you don’t increase the page height until the animation has finished and then the problem goes away.

You’d need to wait for the transition to finish and then let the page become normal height and avoid the jump in size during the transition.

Unfortunately I am away for a week without a computer so you will need to work this out yourself. You have most of the tools in place to do what you need.

18

When you get a chance, can you show me how I could implement a fade in transition on separately, the background itself, where it would fade into the page that is behind it.

And a fade-in transition on just the play image without splitting it in half.

Wait, I think I mean fade out, where it slowly disappears.

Because I don’t have a full page working yet.

I can test it on here.

https://jsfiddle.net/8dh59wso/

To add the transition, this would be needed, I think.

display: block !important;

19

When you are able to, can you show how the play image can be split into 4 pieces.

Assuming that it is something that can be done.

Will 8 classes be needed to do this and not 4?

Because you would double each side, or maybe I am wrong.

  <div class="quarter q1 j1"></div>
  <div class="quarter q2 j2"></div>
  <div class="quarter q3 j3"></div>
  <div class="quarter q4 j4"></div>
  <div class="quarter q5 j5"></div>
  <div class="quarter q6 j6"></div>
  <div class="quarter q7 j7"></div>
  <div class="quarter q8 j8"></div>
20

There are 4 options to fix the box-shadow issue.

Code 3 looks identical to the original.

Is there any way to improve upon that one, or do you think that’s the best it will get?

Code 1
https://jsfiddle.net/Lp50vfmy/

.jacketa {
  top: 20px;
  left: 20px;
}

.split-wrap {
  width: 220px;
  height: 220px;
}

.j2 .jacketa {
right: 20px;
}

Code 2 along with the other added properties of Code 1.

My attempt of improving Code 1, but I don’t think I really improved anything here.
https://jsfiddle.net/84r0uve3/

.j2 .jacketa {
  right: 30px;
  left: -90px;
}

Code 3
https://jsfiddle.net/m3qga4rv/

.jacketa {
  top: 34px;}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.split-wrap {
width: 240px;
height: 260px;
}

Code 4
https://jsfiddle.net/gfpbj846/

.split-wrap{
transform:scale(1.25);
}

.jacketa {
  transform:scale(0.8);   
}

Original: Single image not modified.
https://jsfiddle.net/k3qg5dLp/

22

I solved the box shadow issue in one of the last demos before I went on holiday and also simplified the positioning. If you look back at my last posts you should find it :slight_smile:

23

Your code does this?

Keeps the box-shadow intact?