Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Javascript滑屏切换场景 #14

Closed
Wscats opened this issue May 12, 2016 · 0 comments
Closed

Javascript滑屏切换场景 #14

Wscats opened this issue May 12, 2016 · 0 comments
Labels
notes

Comments

@Wscats
Copy link
Owner

Wscats commented May 12, 2016

滑屏切换的效果，关键是transform动画实现，动画运行后再hide隐藏实现，配合移动端一些滑动手势库可以简单实现一些幻灯片效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div class="page page1 page_moveToTop">
            <div class="wrap">
            </div>
        </div>
        <div class="page page2 page_moveFromBottom">
            <div class="wrap">
            </div>
        </div>
    </body>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            font-size: 100px;
            text-align: center;
        }

        .page1 {
            background-color: #CCCCCC;
            background-size: cover;
        }

        .page2 {
            background-color: #FFFF66;
            background-size: cover;
        }

        .wrap {}

        .page_moveToTop {
            -webkit-animation: moveToTop .6s ease both;
            animation: moveToTop .6s ease both;
        }

        @keyframes moveToTop {
            from {}
            to {
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
            }
        }

        .page_moveFromBottom {
            -webkit-animation: moveFromBottom .6s ease both;
            animation: moveFromBottom .6s ease both;
        }

        @keyframes moveFromBottom {
            from {
                -webkit-transform: translateY(100%);
                transform: translateY(100%);
            }
        }
    </style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
notes
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Wscats