使用Flickity实现的平行视差游戏场景幻灯片

slider with parallax by flickity.js，鼠标在场景上拖动，可以观察到游戏场景有一个3D深度视差效果。

h5, flickity.js, parallax, slider

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    background: black;
    font-family: sans-serif;
}
/* ---- parallax ---- */

.sprite {
    background-image: url('/uploads/1907/yoshis-island-parallax-sprite.png');
    background-repeat: no-repeat;
}
.parallax {
    width: 512px;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 40px;
    background-position: 0 -1344px;
    margin: 40px auto 20px;
}
.parallax__carousel {} .parallax__carousel__cell {
    width: 512px;
    height: 448px;
}
.parallax__carousel__cell:nth-child(1) {
    background-position: -0px -448px;
}
.parallax__carousel__cell:nth-child(2) {
    background-position: -512px -448px;
}
.parallax__carousel__cell:nth-child(3) {
    background-position: -1024px -448px;
}
.parallax__carousel__cell:nth-child(4) {
    background-position: -1536px -448px;
}
.parallax__carousel__cell:nth-child(5) {
    background-position: -2048px -448px;
}
.parallax__layer {
    position: absolute;
    height: 448px;
    left: 0;
    top: 0;
}
.parallax__layer--bg {
    width: 2224px;
}
.parallax__layer--fg {
    pointer-events: none;
    width: 5200px;
    background-position: 0 -896px;
}
.flickity-prev-next-button {
    z-index: 2;
}
.flickity-page-dots {
    /*  bottom: 10px;*/
    
    z-index: 2;
}
.flickity-page-dots .dot {
    background: white;
}
.tagline {
    font-size: 20px;
    text-align: center;
    margin: 0 0 20px;
}
.tagline a {
    color: #666;
    text-decoration: none;
}
.tagline a:hover {
    color: #8C8;
}

HTML

slider with parallax by flickity.js，鼠标在场景上拖动，可以观察到游戏场景有一个3D深度视差效果。

h5, flickity.js, parallax, slider

编辑器支持Emmet

快捷键

slider with parallax by flickity.js，鼠标在场景上拖动，可以观察到游戏场景有一个3D深度视差效果。

h5, flickity.js, parallax, slider

使用ReactJS和jQuery实现的城市背景平行视差动画

使用CSS mix-blend-mode实现的山脉背景和平行视差动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：