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 */
18 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.

6 Likes

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

2 Likes

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

3 Likes

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

10 Likes

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

1 Like

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

6 Likes

How do you put a button in the center to enter?

Hi @ Scorpio
There are several possible methods.
The easiest way to build it within glide is:

β˜… First, prepare a screen with only the door image and buttons.
β˜… Set β€œShow New Screen” for the button action.
β˜… On the new screen, write the code for opening the door.

1 Like

Hi @hisashi.fujita Thanks
How can I put a graphic of some doors to your code?

That’s how the app stayed:

<div class="boxbox">
<p class="beceaa"><br><br><img class="woodman"  src=""></p>
<p class="openopen"></p>
<div class="leftdoor"></div>
<div class="rightdoor"></div>
</div>
<style>
img.woodman{
width: 35% !important;
}
.boxbox{
position: fixed;
top:0;
width:%;
margin-left:%;
height:px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, white, #) !important;
}
.beceaa:first-line{
font-size: 40px;
line-height: 50px;
font-weight: bold;
color: #;
}
.bece{
width: 75%;
color: #000;
}
.leftdoor,.rightdoor {
position: fixed;
top:0;
width: 50%;
height: 850px;
background: #ba55ac;
}
.leftdoor {
left:0;
transform-origin: left;
animation: movel 4s forwards ; 
animation-delay: 1s;
background-image: url("https://i.ibb.co/1njYfwr/puertaiz.png"); 
}
.rightdoor {
right:0;
transform-origin: right;
animation: moveR 4s forwards ; 
animation-delay: 1s;
background-image: url("https://i.ibb.co/52kvzGD/puertader.png"); 
}
@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

the images would be these
left


Right

And why can’t you see the effect of opening the door on an iPhone?

Thank you

This HTML and CSS code is an introduction to what I was testing over a year ago.
β˜… Therefore, the details of the code cannot be explained without taking some time to verify it.
β˜… We have not performed any verification using the iPhone.

The following code may be helpful for how to arrange the door image in your question.
β˜… Enter the url of the door image in the src ofγ€Œ leftdoor」and γ€Œrightdoor"」.

<div class = "leftdoor">
<img src = "https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VXzb3wsuFg847RI8uyO3/pub/F1JSJwzRWeuYXwEe2MXI.png"> </ div>
<div class = "rightdoor">
<img src = "https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VXzb3wsuFg847RI8uyO3/pub/E6MtNkDFgl0ujfhHeMve.png"> </ div>
<!--------------------------------->
<pre> <span> <style>
    .leftdoor, .rightdoor {
    position: absolute;
    z-index: 8;
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%! important;
    }
    .leftdoor {
    left: 0;
    transform-origin: left;
    animation: movel 4s forwards;
    animation-delay: 1s;
    }
    .rightdoor {
    right: 0;
    transform-origin: right;
    animation: moveR 4s forwards;
    animation-delay: 1s;
    }
    .leftdoor img, .rightdoor img {
    width: 100%;
    height: 100%;
object-fit: cover;
    }
    @keyframes movel {
    100% {transform: scaleX (0) perspective (50px) rotateY (5deg);}}
    @keyframes moveR {
    100% {transform: scaleX (0) perspective (50px) rotateY (-5deg);}}
    @keyframes move_o {100% {opacity: 0;}}
.opentytle {
        position: fixed;
        z-index: 300;
        width: 100%;
        top: 50%;
        font-size: 70px! important;
        opacity: 0.7;
        text-align: center;
        margin-left: -5%;
        color: #fff;
        animation: move_o 5s forwards;
    }
[data-test = "glide-app-bar"] {display: none}
/ * ------------------ * /
    @media only screen and (max-width: 500px) {
    .leftdoor, .rightdoor {
    height: 100vh;
    }
    } / * media only screen * /
@media screen and (max-width: 500px) {
 .opentytle {margin-left: 5vw;}
}

hi @hisashi.fujita Good thanks for your time.

Does not work on ios on android yes

Thanks you

Hi @scorpio
thank you for contacting.

On my smartphone (android / iPhone), the door of your app is open without any problems.

hi
on my smartphone iphone xs max

the version inside code-book takes over the page and is impossible to remove… just fyi