CSS3 文字Z轴拉近放大效果

Experiments on The Z-Axis

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2441
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var lastPos = document.body.scrollTop || document.documentElement.scrollTop,
    perspective = 300,
    zSpacing = -1000;
zVals = [],
    $frames = $(".frame"),
    frames = $frames.toArray(),
    scrollMsg = document.getElementById("arrow");
numFrames = $frames.length;

for (var i = 0; i < numFrames; i++) {
    zVals.push((numFrames - i) * zSpacing);
}

$(window).scroll(function(d, e) {
    var top = document.body.scrollTop || document.documentElement.scrollTop,
        delta = lastPos - top;
    lastPos = top;

for (var i = 0; i < numFrames; i++) {
        var newZVal = (zVals[i] += (delta * -1.5)),
            frame = frames[i],
            transform = "translateZ(" + newZVal + "px)",
            opacity = newZVal < 200 ? 1 : 1 - parseInt((newZVal - 200) / (perspective - 200) * 10) / 10,
            display = newZVal > perspective ? "none" : "block";
        frame.setAttribute("style",
            "-webkit-transform:" + transform + ";-moz-transform:" + transform + ";display:" + display + ";opacity:" + opacity);
        if (scrollMsg && zVals[numFrames - 1] > 200) {
            scrollMsg.parentNode.removeChild(scrollMsg);
            scrollMsg = null;
        }
    }

});

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Fugaz+One);
body {
    background: black;
    text-align: left;
    height: 12750px;
    width: 1000px;
    padding: 0;
    margin: 0;
    font-family: 'Fugaz One', cursive;
}
body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1 {
    font-size: 60px;
    letter-spacing: 1px;
    font-weight: normal;
    margin-top: 0;
}
#content {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 450px;
    margin-left: -400px;
    margin-top: -225px;
    background: -webkit-gradient(radial, 50% 50%, 15, 50% 50%, 80, from(white), to(black));
    background: -moz-radial-gradient(center center, circle farthest-corner, white 15px, black 80px);
    background-position: 50% 50%;
}
#viewport {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -moz-transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}
.frame {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 100%;
    -moz-transform-style: preserve-3d;
    display: none;
}
.frame.text {
    width: 800px;
    margin-left: -400px;
    left: 50%;
    text-align: center;
    -moz-transform-style: preserve-3d;
}
.frame.text h1 {
    color: white;
    font-size: 120px;
    text-shadow: 0 0 11px black;
    padding: 30px;
}
.frame.box {
    border-radius: 8px;
    background-color: white;
    padding: 30px;
    font-size: 34px;
}
#arrow {
    -webkit-transform: rotateX(60deg);
    -moz-transform: rotateX(60deg);
    position: fixed;
    bottom: 20px;
    left: 50%;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    z-index: -1;
    color: white;
    margin-left: -60px;
}

HTML

<div id="content">
    <div id="viewport">
        <div class="frame text" style="-webkit-transform: translateZ(-12000px);-moz-transform: translateZ(-12000px);">
            <h1>Imagine The Possibilities!</h1>
        </div>
        <div class='frame'>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div class="frame text" style="-webkit-transform: translateZ(-12000px);-moz-transform: translateZ(-12000px);">
            <h1>Here You Have It...</h1>
            <h1>Scrolling And Zooming All At Once...</h1>
        </div>
        <div class='frame'>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div class="frame text" style="-webkit-transform: translateZ(-13000px);-moz-transform: translateZ(-13000px);">
            <h1>AND</h1>
        </div>
        <div>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div class="frame box" style="-webkit-transform: translateZ(-14000px);-moz-transform: translateZ(-14000px);">
            <p><b>Fairly Simple To Achieve With CSS Transform: TranslateZ Properties. Add Your Personal Touches With CSS Design & Images....Mix In A Little JavaScript To Calculate Scrolling Distance... </b>
            </p>
        </div>
        <div class='frame'>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div class="frame text" style="-webkit-transform: translateZ(-13000px);-moz-transform: translateZ(-13000px);">
            <h1>Pretty Cool Scrolling On Z-Axis Technique</h1>
        </div>
        <div class='frame'>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div class="frame text" style="-webkit-transform: translateZ(-17000px);-moz-transform: translateZ(-17000px);">
            <h1>Keep Scrolling To Check Me Out!</h1>
        </div>
        <div class='frame'>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div id="arrow">
            <div>&#8593;</div>
            Scroll...
        </div>
    </div>

Experiments on The Z-Axis

编辑器支持Emmet

快捷键

Experiments on The Z-Axis

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

CSS3 有“厚度”的立体图片效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字