A Pen by Mark Thomes on CodePen.
Created
August 27, 2020 19:03
-
-
Save mthomes/07f86021c0de44e30472eb902f75f158 to your computer and use it in GitHub Desktop.
XWdRavX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="phone"> | |
<div class="content"> | |
<button type="button" class="cta"> | |
Call to action | |
<div class="circle"></div> | |
</button> | |
<div class="sheet"> | |
<div class="header"> | |
Some Info | |
</div> | |
<div class="footer"> | |
Some Other Info | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const content = document.querySelector(".content"); | |
const cta = document.querySelector("button"); | |
const sheet = document.querySelector(".sheet"); | |
cta.addEventListener("click", () => { | |
content.classList.add("isActive"); | |
}); | |
sheet.addEventListener("click", () => { | |
content.classList.remove("isActive"); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
min-height: 100vh; | |
font-family: "Montserrat", sans-serif; | |
} | |
* { | |
font-family: "Montserrat", sans-serif; | |
} | |
.phone { | |
height: (1792px / 2); | |
width: (828px / 2); | |
border: 20px solid black; | |
border-radius: 60px; | |
overflow: hidden; | |
display: flex; | |
flex-direction: column; | |
} | |
.content { | |
flex: 1; | |
position: relative; | |
} | |
.cta { | |
position: absolute; | |
bottom: 20px; | |
right: 20px; | |
appearance: none; | |
background-color: red; | |
border: none; | |
color: white; | |
padding: 8px 20px; | |
border-radius: 100px; | |
&:focus { | |
outline: none; | |
} | |
&::before { | |
content: ""; | |
position: absolute; | |
bottom: calc(50% - (1920px / 2)); | |
left: calc(50% - (1920px / 2)); | |
width: 1920px; | |
height: 1920px; | |
background-color: red; | |
border-radius: 100%; | |
z-index: -1; | |
transform: scale(0); | |
transition: transform 350ms cubic-bezier(0.32, 0, 0.67, 0); | |
} | |
} | |
.isActive .cta::before { | |
transform: scale(1); | |
} | |
.sheet { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background-color: rgba(red, 0); | |
pointer-events: none; | |
transition: background-color 200ms linear 150ms; | |
} | |
.header, | |
.footer { | |
position: absolute; | |
right: 0; | |
left: 0; | |
padding: 30px; | |
background-color: white; | |
transition: transform 250ms ease-in; | |
} | |
.header { | |
top: 0; | |
transform: translateY(-100%); | |
} | |
.footer { | |
bottom: 0; | |
transform: translateY(100%); | |
} | |
.isActive { | |
.sheet { | |
background-color: rgba(red, 1); | |
pointer-events: auto; | |
transition: background-color 200ms linear 200ms; | |
} | |
.header, | |
.footer { | |
transform: translateY(0); | |
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1) 300ms; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment