弹性图片堆栈：弹性可拖拉交互动效

Elastic Stack: Elastic Dragging Interaction 一叠图片弹性相连，移动第一张连带拉伸下面的相邻图片。快速划动（Swipe）可以浏览后续图片。

模板，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<body>
    <div class="container">
        <header>
            <h1>Elastic Stack <span>Elastic dragging interaction</h1>
        </header>
        <ul id="elasticstack" class="elasticstack">
            <li><img src="https://tympanus.net/Development/ElasticStack/img/1.jpg" alt="01" />
                <h5>Saudade</h5>
            </li>
            <li>
                <div class="overlay"></div><img src="https://tympanus.net/Development/ElasticStack/img/2.jpg" alt="02" />
                <h5>Tuqburni</h5>
            </li>
            <li><img src="https://tympanus.net/Development/ElasticStack/img/3.jpg" alt="03" />
                <h5>Retrouvailles</h5>
            </li>
            <li><img src="https://tympanus.net/Development/ElasticStack/img/4.jpg" alt="04" />
                <h5>Onsra</h5>
            </li>
            <li><img src="https://tympanus.net/Development/ElasticStack/img/5.jpg" alt="05" />
                <h5>Mamihlapinatapai</h5>
            </li>
            <li><img src="https://tympanus.net/Development/ElasticStack/img/6.jpg" alt="06" />
                <h5>Koi No Yokan</h5>
            </li>
        </ul>
    </div>
    
    <script src="https://tympanus.net/Development/ElasticStack/js/draggabilly.pkgd.min.js"></script>
    <script src="https://tympanus.net/Development/ElasticStack/js/elastiStack.js"></script>
    <script>
        new ElastiStack(document.getElementById('elasticstack'));
    </script>
</body>

</html>

Elastic Stack: Elastic Dragging Interaction 一叠图片弹性相连，移动第一张连带拉伸下面的相邻图片。快速划动（Swipe）可以浏览后续图片。

模板，教程

编辑器支持Emmet

快捷键

Elastic Stack: Elastic Dragging Interaction 一叠图片弹性相连，移动第一张连带拉伸下面的相邻图片。快速划动（Swipe）可以浏览后续图片。

模板，教程

弹性缩略图动效的图片轮播动画/相册

使用jQuery和PHP实现的在线交互式图片合成

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：