Skip to content

Javascript滑屏切换场景 #14

Closed
@Wscats

Description

@Wscats
Owner

滑屏切换的效果,关键是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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Wscats

        Issue actions

          Javascript滑屏切换场景 · Issue #14 · Wscats/articles