Skip to content

Instantly share code, notes, and snippets.

@yareyaredesuyo

yareyaredesuyo/index.html

Created February 20, 2020 23:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yareyaredesuyo/94e8eadbd490af0f70f0d3a6b2ff9e70 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yareyaredesuyo/94e8eadbd490af0f70f0d3a6b2ff9e70 to your computer and use it in GitHub Desktop.
Download ZIP
iPhone X to Macbook Pro
Raw
index.html
<div class="device single">
<div class="iphone">
<div class="button-right"></div>
<div class="button-left"></div>
</div>
<div class="iphone iphone-back">
<div class="button-right"></div>
<div class="button-left"></div>
<div class="camera"></div>
</div>
</div>
<p>Inspired by <a href="https://www.uplabs.com/posts/iphone-x-to-macbook-pro" target="_blank">Pat Johnson</a></p>
Raw
iphone-x-to-macbook-pro.markdown
Raw
script.js
// Timing solution by Matan Yossef
// https://codepen.io/matanyo/
const device = document.querySelector(".device");
function cssClasses(element, removeClass, addClass) {
return function() {
element.classList.remove(removeClass);
element.classList.add(addClass);
};
}
function switchDevice() {
setTimeout(cssClasses(device, "single", "both"), 1500);
setTimeout(cssClasses(device, "both", "macbook"), 3000);
setTimeout(cssClasses(device, "macbook", "both"), 4500);
setTimeout(cssClasses(device, "both", "single"), 6000);
}
switchDevice();
function timeOut() {
setTimeout(() => {
switchDevice();
timeOut();
}, 7500);
}
timeOut();
Raw
style.scss
$color-1: #272121;
$color-2: #e9c9c9;;
$color-3: #ffffff;
$color-4: #363333;
$color-5: #272121;
$cubic: cubic-bezier(0.71, -0.34, 0.34, 1.35);
html,
body {
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
}
body {
display: flex;
justify-content: center;
align-items: center;
align-content: flex-end;
background: $color-2;
font-family: 'Open Sans', sans-serif;
min-width: 980px;
}
.device {
height: 739px;
position: relative;
overflow: hidden;
transform: scale(.45);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
border-radius: 20px;
transition: all .5s $cubic;
&.single {
width: 547px;
}
&.macbook,
&.both {
width: 980px;
}
}
p {
color: $color-1;
text-align: center;
font-size: 12px;
position: absolute;
bottom: 5px;
z-index: 100;
left: 0;
right: 0;
font-weight: 200;
color: $color-4;
strong {
font-size: 14px;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
a {
color: $color-5;
}
}
.iphone {
position: absolute;
width: 364px;
height: 737px;
background: $color-3;
border-radius: 55px;
box-shadow: 0 0 0 23px $color-1 inset;
display: inline-block;
transition: all .6s .2s;
left: 80px;
bottom: 0;
z-index: 100;
backface-visibility: hidden;
.macbook & {
left: 0;
width: 980px;
height: 70px;
border-radius: 20px;
box-shadow: 0 0 0 16px $color-1 inset;
}
&:before,
&:after {
content: '';
display: block;
position: absolute;
transform: translateX(-50%);
left: 50%;
}
// Header
&:before {
top: 0;
content: '';
display: block;
position: absolute;
left: 50%;
width: 180px;
height: 48px;
background: $color-1;
border-radius: 18px;
transform: translateX(-50%);
transition: height .3s .2s;
.macbook & {
height: 40px
}
}
// Footer
&:after {
bottom: -6px;
width: 38px;
height: 9px;
background: $color-3;
border-radius: 100px;
transition: transform .3s .13s;
transform: translateY(0) translateX(-50%);
left: 50%;
.macbook & {
transform: translateY(4px) translateX(-50%);
}
}
// iPhone Back
&-back {
background: $color-1;
left: auto;
right: 80px;
z-index: 80;
.single & {
transition: all .13s .13s;
opacity: 0;
}
.macbook & {
left: auto;
right: 80px;
width: 820px;
height: 600px;
}
// Header
&:before {
display: none;
}
}
}
.camera {
width: 22px;
height: 22px;
background: $color-3;
border-radius: 50%;
position: absolute;
top: 38px;
left: 34px;
transition: all .6s .2s $cubic;
.macbook & {
width: 16px;
height: 16px;
transform: rotateZ(-90deg) translate(15px, -10px);
transform-origin: center;
}
&:before,
&:after {
content: '';
display: block;
width: 20px;
height: 20px;
background: $color-3;
border-radius: 50%;
position: absolute;
top: 40px;
left: 2px;
transition: all .6s .2s $cubic;
.macbook & {
transform: translate(-2px, -10px);
width: 16px;
height: 16px;
}
}
&:after {
width: 22px;
height: 22px;
top: 77px;
left: 0;
.macbook & {
transform: translate(0, -18px);
width: 16px;
height: 16px;
}
}
}
// Right button
.button-right {
content: '';
display: block;
position: absolute;
top: 168px;
right: -2px;
width: 11px;
height: 89px;
border-radius: 50px;
z-index: -1;
background: $color-1;
opacity: 1;
transition: all .2s;
.macbook & {
right: 0;
opacity: 0;
}
.iphone-back & {
right: auto;
left: -2px;
.macbook & {
left: 0;
}
}
}
// Left Buttons
.button-left {
position: absolute;
top: 100px;
left: -2px;
width: 3px;
height: 28px;
border-radius: 90px;
z-index: -1;
background: $color-1;
opacity: 1;
transition: all .2s;
.macbook & {
left: 0;
opacity: 0;
}
.iphone-back & {
right: -2px;
left: auto;
.macbook & {
right: 2px;
}
}
// Volume Buttons
&:before,
&:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 11px;
height: 57px;
background: $color-1;
border-radius: 50px;
.iphone-back & {
right: -2px;
left: auto;
.macbook & {
right: 0;
}
}
}
&:before {
top: 50px;
}
&:after {
top: 118px;
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment