How about a double door?

<div class="boxbox">
<p class="beceaa">Double door<br>This is the animation that you can see the inside of the room with the doors open on both sides.<br><br><img class="woodman"  src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/nzLVUCQ4BiWryP6KUGd9.png"></p>
<p class="openopen">O  P  E  N</p>
<div class="leftdoor"></div>
<div class="rightdoor"></div>
</div>
<style>
img.woodman{
width: 35% !important;
}
.boxbox{
position: fixed;
top:0;
width:101%;
margin-left:-4.5%;
height:850px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, white, #ccc) !important;
}
.beceaa:first-line{
font-size: 40px;
line-height: 50px;
font-weight: bold;
color: #662929;
}
.bece{
width: 75%;
color: #000;
}
.leftdoor,.rightdoor {
position: fixed;
top:0;
width: 50%;
height: 850px;
background: #671200;
}
.leftdoor {
left:0;
transform-origin: left;
animation: movel 4s forwards ; 
animation-delay: 1s;
background: linear-gradient(to right, #3d0000, #662929) ;
}
.rightdoor {
right:0;
transform-origin: right;
animation: moveR 4s forwards ; 
animation-delay: 1s;
background: linear-gradient(to left, #3d0000, #662929) ;
}
@keyframes movel {  
100% { transform: scaleX(0) perspective(50px) rotateY(5deg); }
}
@keyframes moveR {  
100% { transform: scaleX(0) perspective(50px) rotateY(-5deg); }
}
.openopen{
    z-index: 10;
    position: fixed;
    width:100%;
    font-size: 4.5rem !important;
    color: #fff;
    animation: move_o 5s forwards; 
}
@keyframes move_o {  
100% { opacity:0; }
}
/*Hide tytle at the topβ€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottomβ€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”*/
#tabBar{ display:none; }
/*β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”*/
[data-test="app-button-view"] {
-webkit-transform: rotate(90deg);
height: 42px;
position: fixed;
right:-25px;
bottom: 10%;
background : #000 !important;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
filter: none;
}
@media only screen and (max-width: 700px) {
.boxbox,.leftdoor,.rightdoor{
height:100vh;
}/*media only screen */
13 Likes

You are a real wizard of CSS, how is your magic works on tablet view?

Thank you Uzo.
My CSS is a test version of the idea.
When actually using it, it will be necessary to verify the tablet view and desktop view.

I think the CSS this time will be as follows in tablet size.

4 Likes

Amazing work. I need to hang out with you more often. :joy:

1 Like

just tested in my App… this is GREAT!!!
looks good on full screen

https://youtu.be/u-BnjpUHI9A

1 Like

if you can make an image behind the door that will adjust to screen size, so it will look good on mobile and desktop, and if if not too much to ask… the door make more fancy :wink:

1 Like

Agree with the wizard of CSS bit

2 Likes

I see! You need a door, right?
How about this?

6 Likes

how many times i have to say, that you are the best!?

Wao… it’s the Chuck Norris level, no doubtl!! :upside_down_face:

My main concern with this is the APP performance. As you should know, there are some CSS tricks that cause some problems on this topic and should be avoided.

But meanwhile… your tricks are a good tool to learn and enjoy. Thanks for sharing

Saludos @hisashi.fujita

4 Likes