视差滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo {
perspective: 1px; padding: 0; height: 600px; height: calc(100vh - 300px); overflow: auto;
}
.box {
height: 1280px;
transform-style: preserve-3d;
position: relative;
}
.iphone {
position: absolute; left: 50%;
transform: translate3D(-50%, -120px, -1px) scale(2);
}

.smile {display: block;
100%;height: 800px;
background: url(mobile_1_layer2.png);}
.iphone{
background: url(mobile_1_iphone.jpg);
}

</style>
</head>
<body>