demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>splitScreenSlider</title>
    <link rel="stylesheet" href="./css/style.css">

</head>
<body>
<section id="wrapper" class="skewed">
    <div class="layer bottom">
        <div class="content_wrapper">
            <div class="content_body">
                <h2>iphoneX-front</h2>
                <p>一直以来，我们都心存一个设想，期待着能够打造出这样一部 iPhone：它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着 iPhone X 的到来成为了现实。现在，就跟未来见个面吧。
                </p>
            </div>
            <img src="img/front.png">
        </div>
    </div>
    <div class="layer top">
        <div class="content_wrapper">
            <div class="content_body">
                <h2>iphoneX-back</h2>
                <p>一直以来，我们都心存一个设想，期待着能够打造出这样一部 iPhone：它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着 iPhone X 的到来成为了现实。现在，就跟未来见个面吧。
                </p>
            </div>
            <img src="img/back.png">
        </div>
    </div>
<div class="handle"></div>
</section>
<script src="js/main.js"></script>
</body>
</html>