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
Ideation: When I'll be ready to dev a template app, it will be with an elevator menu Ask for Help	7	676	September 19, 2022
Modal window Project Showcase	27	3188	June 11, 2021
Ok, I'm fan of Glassmorphism in dark mode, any chance I can do this? Ask for Help	27	1766	January 17, 2024
Beautiful animations text and others for apps Project Showcase	10	1182	March 9, 2022
🏆 My House Points App — Feedback welcome! Project Showcase	10	678	September 26, 2021

How about a double door?

Related Topics