zoukankan      html  css  js  c++  java
  • HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告。做的很可爱。回去就搜了一下,发现这个网站是HTML5做的,非常炫。

    所以想学习一下,方法就是传统的学习办法,模仿、剖析,看看人家是怎么做的。

    这个网站提供的是了一个沉浸式的翻阅体验,用户可以在页面切换时体验到真实的3D翻书效果,非常的酷炫。而要实现这个效果,需要用到CSS3 3D transform和JavaScript,同时为了实现跨浏览器和跨设备的统一体验,用到hammer.js库去处理滑动操作。就是下面这个样子的,非常漂亮:

    示例效果:

    查看代码发现,网页的结构十分简单,整个杂志是一个ID为magazine的div,子元素. page即页面元素,其中还需要包含一层.page-content层。

    <div id="magazine">
        <div class="page">
            <div class="page-content">
                <!--  ... -->
            </div>
        </div>
        <!--  pages -->
        <div class="page">
            <div class="page-content">
                <!--  ... -->
            </div>
        </div>
    </div>
    
    CSS:
    .page {
        position: absolute;
        top: 0;
        left: 0;
         100%;
        height: 100%;
        overflow: hidden;
        display: none;
    }
    .page-content {
        position: absolute;
        top: 0;
        left: 0;
         100%;
        height: 100%;
    }

    当用户拖拽页面时,我们会复制一份当前页和下一页,作为3D翻页的元素存在,层之间的关系如下:

    $currentPage -> 当前页

    $newPage -> 新的一页(上一页/下一页)

    $pageBack -> 克隆的$newPage

    $pageFront -> 克隆的$currentPage

    除了当前页的其他页面,为了只显示页面一半,需要将外层div的宽度设置为50%,同时将.page-content设为200%。

    CSS:
    .page.front,
    .page.back,
    .page.prev,
    .page.next {
         50%;
    }
    .page.front .page-content,
    .page.back .page-content,
    .page.prev .page-content,
    .page.next .page-content {
         200%;
    }
    

      

    当开始拖拽时,通过鼠标位置在屏幕的左边或者右边判断翻页的方向并复制页面。然后在拖拽时,根据移动距离计算翻页进度并转换为角度应用到元素上。最后使用css transition完成余下动画。

    JS代码关键部分:

    $("#magazine").hammer({prevent_default: true}).on("dragstart", function(event) {
        //开始拖拽
    
        //根据指针的位置判断新的一页是上一页还是下一页
        var pageX = event.gesture.center.pageX;
        _.$newPage = pageX > centerX ? _.$currentPage.next(".page").addClass("next") : _.$currentPage.prev(".page").addClass("prev");
    
        //复制当前页和新的一页
        _.$pageFront = $("<div class='page front' />").append(_.$currentPage.children().clone());
        _.$pageBack = $("<div class='page back/>").append(_.$newPage.children().clone());
    
        $(this).on("drag", function(event) {
            //拖拽中
    
            //获得手势方向
            var direction = event.gesture.direction;
    
            //如果是左右滑动才继续
            if (direction != "left" && direction != "right") return;
    
            //获得鼠标x坐标,和窗口宽度相除获得百分比和角度
            var deltaX = Math.max((_.direction == "left" ? -1 : 1) * event.gesture.deltaX, 0),
                progress = deltaX / winWidth,
                angle = (direction == "left" ? -180 : 180) * progress;
    
            //使用transform翻转页面
            _.$pageFront.css("transform", "perspective(2200px) rotateY(" + angle + "deg)");
            _.$pageBack.css("transform", "perspective(2200px) rotateY(" + (angle - 180) + "deg)");
    
        }).on("dragend", function(event) {
            //拖拽结束
    
            var deltaX = Math.max((direction == "left" ? -1 : 1) * event.gesture.deltaX, 0),
                time = event.gesture.deltaTime,
                progress = deltaX / winWidth,
                flipped = progress > 0.5 || deltaX / time > 0.5, //如果滑动距离超过屏幕的一半或者速度大于0.5就认为页面被翻过去了
                duration = !flipped ? 1 - progress : progress,
                angle = !flipped ? 0 : _.direction == "left" ? -180 : 180;
    
            //通过css3 transition完成余下动画
            _.$pageFront.css({
                "transition": "all " + duration + "s ease-out",
                "transform": "perspective(2200px) rotateY(" + angel + "deg)"
            });
            _.$pageBack.css({
                "transition": "all " + duration + "s ease-out",
                "transform": "perspective(2200px) rotateY(" + (angel - 180) + "deg)"
            });
        });
    });
    

      

    如果你的页面包含视频或者Canvas等元素,那还需要再做一些额外的工作,因为这些元素并不能以同样的状态被直接复制。

    最后如果你需要兼容不支持CSS3浏览器。可以借助Modernizr判断,以水平滑动的方式切换页面。

    if (Modernizr.csstransforms3d && Modernizr.csstransitions) {

        //支持

    } else {

        //不支持

    };

    今天暂时写到这里吧,想看效果的同学,可以自己去 http://moonbear.animalsasia.org/ie/ 看一下。真的是非常漂亮,明天我会继续剖析一下其他效果的实现。

  • 相关阅读:
    James 3.1服务器的安装与搭建
    Mybaits整合Spring
    动态sql
    Mybatis核心配置文件SqlMapConfig.xml
    Mapper动态代理方式
    WPF DatePicker
    UITableView(修改单元格)
    UITableView
    UIImageView
    UILabel
  • 原文地址:https://www.cnblogs.com/huoxingren/p/3498210.html
Copyright © 2011-2022 走看看