How about a double door?

hisashi.fujita · February 22, 2021, 10:10am

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

Uzo · February 22, 2021, 11:16am

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

hisashi.fujita · February 23, 2021, 4:45am

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.

Carlos_DeSilva · February 23, 2021, 4:54am

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

Uzo · February 23, 2021, 4:58am

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

https://youtu.be/u-BnjpUHI9A

Uzo · February 23, 2021, 6:20am

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

Wiz.Wazeer · February 23, 2021, 10:11am

Agree with the wizard of CSS bit

hisashi.fujita · February 24, 2021, 5:20am

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

Uzo · February 24, 2021, 5:57am

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

gvalero · February 24, 2021, 2:02pm

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

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

scorpio · March 30, 2022, 10:54pm

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

hisashi.fujita · March 31, 2022, 1:03am

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.

scorpio · March 31, 2022, 2:01pm

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

hisashi.fujita · April 1, 2022, 2:34am

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;}
}

scorpio · April 1, 2022, 11:29am

hi @hisashi.fujita Good thanks for your time.

Does not work on ios on android yes

Thanks you

hisashi.fujita · April 4, 2022, 1:16am

Hi @scorpio
thank you for contacting.

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

scorpio · April 4, 2022, 12:52pm

hi
on my smartphone iphone xs max

Blue_Community · April 4, 2022, 6:33pm

hisashi.fujita:

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

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

rudy_jennifer · June 14, 2023, 11:46pm

hello if i want to put those 2 doors in it can you give me the full code please?

Topic		Replies	Views
CSS Help To animate a sliding door Ask for Help	14	1198	November 1, 2021
Ideation: When I'll be ready to dev a template app, it will be with an elevator menu Ask for Help	7	751	September 19, 2022
90+ animation using CSS Project Showcase	9	2164	July 24, 2024
Open Sesame! My 1st Trial to open a Glassmorph & Eclipse Door Project Showcase	27	730	November 7, 2021
Modal window Project Showcase	27	3471	June 11, 2021

How about a double door?

Related topics