HTML5 Touchscroll.js 宽尺寸图片在手机上的水平滚动

HTML5 Touch Scroll on Mobile Devices 宽尺寸图片在移动设备上的触摸水平滚动： refer to: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile 在chrome中测试，你需要启动移动模拟。

scroll

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font: 100%/1.5 Helvetica, Arial, sans-serif;
    color: #444;
    background: white;
}
#chrome {
    height: 100%;
}
#demo {
    height: 100%;
    background: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: justify;
}
@media only screen and (min-width: 440px) {
    #chrome {
        height: 611px;
        padding: 159px 0 0 47px;
        background: url(/uploads/150201/iphone.png) no-repeat;
    }
    #demo {
        width: 320px;
        height: 460px;
        -webkit-border-bottom-left-radius: 2px;
        -webkit-border-bottom-right-radius: 2px;
        overflow: hidden;
    }
}
@media only screen and (min-width: 880px) {
    /* probably iphone portrait */
    
    #chrome {
        height: 1136px;
        padding: 71px 0 0 56px;
        background: url(/uploads/150201/ipad.png) no-repeat;
    }
    #demo {
        width: 768px;
        height: 1004px;
    }
}
@media screen and (width: 480px) and (max-height: 300px) {
    /* probably ipad portrait */
    
    #chrome {
        background: none;
        height: 100%;
        padding: 0;
    }
    #demo {
        height: 100%;
        width: 100%;
        -webkit-border-radius: 0;
    }
}
@media screen and (width: 768px) and (max-height: 1004px) {
    /* probably ipad landscape */
    
    #chrome {
        background: none;
        height: 100%;
        padding: 0;
    }
    #demo {
        height: 100%;
        width: 100%;
        -webkit-border-radius: 0;
    }
}
@media only screen and (width: 1024px) and (max-height: 748px) {
    #chrome {
        background: none;
        height: 100%;
        padding: 0;
    }
    #demo {
        height: 100%;
        width: 100%;
        -webkit-border-radius: 0;
    }
}
.toolbar {
    border-bottom: 1px solid #2d3642;
    border-top: 1px solid #cdd5df;
    padding: 8px 4px;
    height: 28px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bccd), color-stop(0.5, #889bb3), color-stop(0.5, #8195af), to(#6d84a2));
    overflow: hidden;
    display: webkit-box;
}
h1 {
    line-height: 26px;
    font-size: 1.25em;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
    white-space: nowrap;
    color: #fff;
    text-align: center;
    margin: 0 4px;
    overflow: hidden;
}
.tabs {
    border-top: 1px solid #333;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000), color-stop(0.5, #333), color-stop(0.5, #262626));
    display: -webkit-box;
    text-align: center;
}
.tabs > * {
    font-size: 0.8em;
    height: 1.2em;
    padding: 35px 0 0.5em 0;
    color: #808184;
    text-decoration: none;
    margin: 0.3em;
    display: block;
    width: 1px;
    -webkit-box-flex: 1;
    max-width: 25% !important;
}
.tabs > .current {
    -webkit-border-radius: 0.4em;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#222), color-stop(0.5, #444), color-stop(0.5, #363636));
    color: #ccc;
}
.tabs > *:before {
    background: none center no-repeat;
    content: "";
    display: block;
    font: bold 32px/35px inherit;
    height: 35px;
    margin-top: -35px;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 0px;
}
.tabs > [href="#about"]:before {
    content: "Ts";
    letter-spacing: -3px;
    text-indent: -5px;
}
.tabs > [href="#horiz"]:before {
    content: "\2194";
}
.tabs > [href="#twodim"]:before {
    content: "\21B3";
}
.scroller {
    -webkit-box-flex: 1;
    display: none;
    overflow: hidden;
    padding: 1em;
}
.touchScroll {
    padding: 0;
}
.touchScrollInner {
    padding: 0.5em;
}
h2 {
    color: #405070;
    font-size: 1.125em;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0;
}
h2,
p {
    margin-bottom: 0.75em;
}
#horiz {
    background: black;
}
#horiz .touchScrollHandle {
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    min-height: 6px;
    min-width: 6px;
}
.figure {
    position: relative;
}
.figure > .legend {
    background: rgba(255, 255, 255, 0.4);
    bottom: 0;
    color: #000;
    font-size: 0.75em;
    margin: 0;
    padding: 8px;
    position: absolute;
    text-shadow: #fff 0 0 2px;
}
.figure > img {
    display: block;
}
.legend a {
    color: #1f1a6b;
    text-decoration: none;
}

HTML

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>TouchScroll Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href="/uploads/150201/touchscroll.css" rel="stylesheet">
</head>

<body>

<div id="chrome">
        <div id="demo">
            <div class="toolbar">
                <h1>TouchScroll Demo</h1>
            </div>
            <div class="scroller" id="about">
                <h2>TouchScroll</h2>
                <p>TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Touch (yes, that includes Android). It is meant to mimic “native” scrolling feeling and behavior as much as possible.</p>
                <p><strong>This demo works best on iPhone, iPad and in WebKit Nightly.</strong> Safari 4 kind of works, too.</p>

<h2>A JavaScript-based scroller?</h2>

<p>While Safari Mobile features native scrolling, there are two reasons to re-implement scrolling with JavaScript: The original scrolling behavior is rather slow – we were looking for a solution that feels more fluid. And the viewport behavior
                    of Mobile Safari and other mobile browsers using WebKit doesn’t allow for fixed positioned elements.</p>

<p>TouchScroll uses a combination of JavaScript and CSS 3. All animations are done with CSS transitions – no JavaScript intervals. That means, the deceleration animation can be configured with a <a href="https://www.w3.org/TR/css3-transitions/#transition-timing-function_tag">bezier curve</a>.</p>

<p>The elasticity effect when crossing the scroller bounds is achieved by dividing the bezier curve into two sub-curves using my (yet to be finished) <a href="https://github.com/davidaurelio/css-beziers">CSS Bezier library for JavaScript</a>.</p>

<p>On Safari mobile TouchScroll benefits from hardware acceleration for CSS transforms and transitions, which allows for very smooth scrolling. Android hasn’t any hardware support, which makes the animations choppier than on Apples devices.</p>

<h2>Updating the scroller</h2>

<p>The scroller updates its dimensions and position automatically on window resizes (<code>window.onresize</code>), orientation changes (<code>window.onorientationchange</code>) and DOM modifications inside the scroller (<code>DOMSubtreeModified</code>                    event). It only needs to be updated manually when it wasn’t visible on initialization (or last update) as soon it is made visible again.</p>

<h2>Customization</h2>

<p>TouchScroll allows you to customize many aspects of the scrolling behavior. The following aspects are configurable:</p>

<ul>
                    <li>minimum scrolling offset – to prevent unintended scrolling, a minumum offset can be defined. It defaults to 5 pixels.</li>
                    <li>Flicking behavior: maximum duration between the last move event and the release event that triggers flicking. The default is 150&thinsp;ms.</li>
                    <li>Average friction and bezier curve for the flicking animation (CSS transition)</li>
                    <li>Elasticity at the borders, and the maximum bounce length when flicking.</li>
                    <li>The snapback duration and its timing function.</li>
                </ul>

<h2>Get it!</h2>
                <p>TouchScroll is released under a BSD license. You can find more information on how to get TouchScroll
                    <a href="https://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile">on our blog</a>.</p>

</div>
            <div class="scroller" id="horiz">
                <div class="figure">
                    <img src="/uploads/150201/olympic-stadium.jpg" alt="Olympic Stadium Munich">
                    <p class="legend">Photo: <a href="https://www.flickr.com/photos/davemorris/4202188/">“olympic montage 01”</a> by Daveybot – cc licensed.</p>
                </div>
            </div>
            <div class="scroller" id="twodim">
                <h2>Yet to be done</h2>
            </div>

<div class="tabs">
                <a href="#about" class="current">About</a>
                <a href="#horiz">Horizontal</a>
                <a href="#twodim">2-Dimensional</a>
            </div>
        </div>
    </div>

function showScreen(screenId) {
                try {
                    var activeScreen = document.querySelector("#demo .scroller#" + screenId);
                } catch (e) {
                    return;
                }

if (!activeScreen) {
                    return;
                }
                Array.prototype.forEach.call(document.querySelectorAll("#demo .scroller"), function(screen) {
                    screen.style.display = "none";
                });
                activeScreen.style.display = "block";
                scrollers[screenId].setupScroller(true);
            }

Array.prototype.forEach.call(document.querySelectorAll("#demo .scroller"), function(scroller) {
                scrollers[scroller.id] = new TouchScroll(scroller, {
                    elastic: true
                });
            });

var hash = location.hash.slice(1);
            showScreen(hash || "about");
            tab = document.querySelector('#demo .tabs [href="' + location.hash + '"]');
            if (tab) {
                Array.prototype.forEach.call(tab.parentNode.children, function(tab) {
                    tab.className = "";
                });
                tab.className = "current";
            }
        }())
    </script>

</body>

</html>

HTML5 Touch Scroll on Mobile Devices 宽尺寸图片在移动设备上的触摸水平滚动： refer to: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile 在chrome中测试，你需要启动移动模拟。

scroll

编辑器支持Emmet

快捷键

HTML5 Touch Scroll on Mobile Devices 宽尺寸图片在移动设备上的触摸水平滚动： refer to: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile 在chrome中测试，你需要启动移动模拟。

scroll

Three.js GSAP使用鼠标滚轮和滑动来操控3D双绞线螺旋动画

HTML5网站首页全屏视频背景 + 滚动时收缩标题栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：