基于RxJS实现的3D悬浮卡片音乐播放器（含亮色和暗色界面方案切换）

3D Card Music Player with smooth parallax

h5, reactivex, player, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var body = document.querySelector("body");
var album = document.querySelector(".album");
var loaded = false;
var albumDetails = {
    dark: {
        album: "Grouper - Grid of Points",
        song: "The Races",
        art: "/uploads/1906/grouper-grid-of-points.jpg",
        position: "01 of 07",
        start: "0:27",
        end: "0:50",
        highlight: "#fdfdfd",
        accent: "#f70040",
        background: "#1d1d1d"
    },

light: {
        album: "Frontierer - Orange Mathematics",
        song: "The Collapse",
        art: "/uploads/1906/frontierer-orange-mathematics.jpg",
        accent: "#f78900",
        highlight: "#1d1d1d",
        background: "#fdfdfd",
        position: "03 of 16",
        start: "1:00",
        end: "2:08"
    }
};

album.classList.add("album--loaded");

setTimeout(function() {
    album.classList.add("album--parallax");
}, 1200);

function toggleThemes(theme) {
    var album = albumDetails[theme];
    var albumArt = document.querySelector(".album__art");
    var albumTitle = document.querySelector(".album__song__album marquee");
    var albumSong = document.querySelector(".album__song__title");
    var albumPosition = document.querySelector(".album__song__position");
    var albumCurrentTime = document.querySelector(".album__song__current-time");
    var albumFullTime = document.querySelector(".album__song__full-length");
    albumArt.style.background = "url(" + album.art + ") 50% 50% no-repeat";
    albumTitle.innerText = album.album;
    albumSong.innerText = album.song;
    albumPosition.innerText = album.position;
    albumCurrentTime.innerText = album.start;
    albumFullTime.innerText = album.end;
    document.documentElement.style.setProperty("--highlight", album.highlight);
    document.documentElement.style.setProperty("--background", album.background);
    document.documentElement.style.setProperty("--accent", album.accent);
}

// https://css-tricks.com/animated-intro-rxjs/

function smoothParallax() {
    var body = document.querySelector("body");
    var clientHeight = window.innerHeight;
    var bodyDims = {
        w: body.getBoundingClientRect().width,
        h: body.getBoundingClientRect().height
    };

var limit = {
        x: 25,
        y: 25
    };

console.clear();

function lerp(start, end) {
        var dx = end.x - start.x;
        var dy = end.y - start.y;

return {
            x: start.x + dx * 0.1,
            y: start.y + dy * 0.1
        };

}

var docEl = document.documentElement;

var mouseMove$ = Rx.Observable.
    fromEvent(docEl, "mousemove").
    map(function(event) {
        return {
            x: event.clientX,
            y: event.clientY
        };
    });

var touchMove$ = Rx.Observable.
    fromEvent(docEl, "touchmove").
    map(function(event) {
        return {
            x: event.touches[0].clientX,
            y: event.touches[0].clientY
        };
    });

var animationFrame$ = Rx.Observable.interval(10, Rx.Scheduler.animationFrame);

var move$ = Rx.Observable.merge(mouseMove$, touchMove$);

var smoothMove$ = animationFrame$.
    withLatestFrom(move$, function(frame, move) {
        return move;
    }).
    scan(lerp);

console.log(smoothMove$);

smoothMove$.subscribe(function(pos) {
        var clamped = {
            x: pos.x / bodyDims.w * limit.x - limit.x / 2,
            y: pos.y / bodyDims.h * limit.y - limit.y / 2
        };

document.documentElement.style.setProperty("--move-y", clamped.y + "deg");
        document.documentElement.style.setProperty("--move-x", clamped.x + "deg");

});
}

smoothParallax();

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Arimo:400,400i,700,900");
input[type="range"] {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    
    width: 100%;
    /* Specific width is required for Firefox. */
    
    background: transparent;
    /* Otherwise white in Chrome */
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type="range"]:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type="range"]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    
    background: transparent;
    border-color: transparent;
    color: transparent;
}
:root {
    --width: 60vw;
    --highlight: #fdfdfd;
    --background: #1d1d1d;
    --accent: #f70040;
    --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
    --move-x: 0deg;
    --move-y: 0deg;
}
@media screen and (max-width: 1090px) {
    :root {
        --width: 80vw;
    }
}
@media screen and (max-width: 786px) {
    :root {
        --width: 90vw;
    }
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background: #f6f6f6;
    perspective: 90vw;
}
.toggles {
    width: 100%;
    text-align: center;
    margin: -25px 0 25px;
}
.album {
    position: relative;
    width: var(--width);
    height: 0;
    box-shadow: 0px 50px 40px -35px rgba(0, 0, 0, 0.3);
    background: var(--background);
    display: grid;
    grid-template-columns: 30% 60% 10%;
    grid-template-rows: repeat(8, 1fr);
    transform-style: preserve-3d;
    transition: all 0.6s linear;
    min-width: 685px;
    max-width: 810px;
    min-height: 390px;
    max-height: 500px;
    transform: rotateX(-45deg);
}
.album.album--loaded {
    transform: rotateX(0);
    height: calc(var(--width) * 0.6);
}
.album.album--parallax {
    transition: none;
    transform: rotateX(var(--move-y)) rotateY(var(--move-x));
}
.album__menu {
    width: 20px;
    margin-top: 30px;
    margin-left: 30px;
}
.album__menu path {
    fill: var(--highlight);
}
.album__reflection {
    position: absolute;
    width: 60%;
    top: 0;
    left: 30%;
    bottom: 0;
    box-shadow: 0px 30px 40px -15px rgba(0, 0, 0, 0.7);
}
.album__player {
    position: relative;
    display: contents;
    grid-column: 1 / 1;
    grid-row: 1 / -1;
    z-index: 3;
}
.album__art {
    position: relative;
    grid-column: 2 / 2;
    grid-row: 1 / -1;
    display: block;
    background: url("/uploads/1906/grouper-grid-of-points.jpg") 50% 50% no-repeat;
    background-size: cover !important;
    max-width: 100%;
    transform: scale(0);
    transition: all 0.6s 0.3s var(--easing);
    z-index: 2;
    max-height: 100%;
}
.album--loaded .album__art {
    transform: scale(1);
}
.album__song {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-left: 40px;
    font-family: "Arimo", sans-serif;
    transform: translateZ(50px);
    z-index: 3;
}
.album__song__album,
.album__song__position {
    color: var(--highlight);
    font-size: 12px;
    margin: 10px 0;
    transform: translateZ(35px) translateX(-100%);
    opacity: 0;
    transition: all 0.6s 0.6s var(--easing);
}
.album--loaded .album__song__album,
.album--loaded .album__song__position {
    opacity: 1;
    transform: translateZ(35px) translateX(0);
}
.album__song__album {
    margin-right: 20px;
    margin-left: 5px;
}
.album__song__title {
    font-size: calc(100vw * 0.07);
    color: var(--accent);
    line-height: 0.9;
    font-weight: 900;
    transform: translateX(-100%);
    opacity: 0;
    z-index: 3;
    transition: all 0.3s 0.6s var(--easing);
}
.album--loaded .album__song__title {
    opacity: 1;
    transform: translateX(0);
}
.album--parallax .album__song__title {
    transition: all 0.1s linear;
}
.album__controls {
    grid-row: 6 / 7;
    grid-column: 1 / 2;
    padding-left: 40px;
    display: flex;
    align-items: center;
    transform: translateZ(35px) translateX(-100%);
    opacity: 0;
    transition: all 0.8s 0.6s var(--easing);
}
.album--loaded .album__controls {
    opacity: 1;
    transform: translateZ(35px) translateX(0);
}
.album__song__scrubber {
    grid-row: 7;
    width: 70%;
    margin: 10px auto 0;
    transform: translateZ(35px) translateX(-100%);
    opacity: 0;
    transition: all 0.8s 0.6s var(--easing);
}
.album--loaded .album__song__scrubber {
    opacity: 1;
    transform: translateZ(35px) translateX(0);
}
.album__song__current-time,
.album__song__full-length {
    color: var(--highlight);
    font-size: 10px;
    font-family: "Arimo", sans-serif;
    display: block;
    margin-top: 5px;
}
.album__song__current-time {
    float: left;
}
.album__song__full-length {
    float: right;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    margin-top: -2px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    cursor: pointer;
    margin-top: -2px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 1px;
    background: var(--highlight);
    width: 100%;
}
input[type=range]::-moz-range-track {
    height: 1px;
    background: var(--highlight);
    width: 100%;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: var(--highlight);
}
.album__prev,
.album__play {
    margin-right: 13px;
}
.album__prev,
.album__next {
    transform: translateZ(10px);
}
.album__prev path,
.album__next path {
    fill: var(--highlight);
}
.album__prev {
    transform-origin: 50%;
    transform: rotateZ(180deg);
}
.album__play {
    padding: 10px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transform: translateZ(10px);
}
.album__play path {
    transform-origin: 50%;
}
.album__play path:nth-of-type(2) {
    fill: var(--accent);
}
.album__play:hover {
    border: 2px solid var(--highlight);
}
.album__play:hover path {
    transform: scale(1.2);
}
.album__avatar {
    width: 45px;
    height: 45px;
    grid-column: 3 / 4;
    border-radius: 50%;
    margin: 25px 0 0 15px;
    transition: all 0.6s 0.3s var(--easing);
    transform: translateY(25%) scale(0.3);
    transform-origin: 50% 50%;
    opacity: 0;
}
.album--loaded .album__avatar {
    transform: translateY(0) scale(1);
    opacity: 1;
}
@media screen and (max-width: 850px) {
    .album__avatar {
        width: 30px;
        height: 30px;
        margin-left: 25px;
    }
}
.album__like {
    margin: 15px 27px;
    cursor: pointer;
    padding: 5px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    transition: all 0.6s 0.6s var(--easing);
    transform: translateY(25%) scale(0.3);
    transform-origin: 50% 50%;
    opacity: 0;
}
.album__like path {
    fill: var(--accent);
}
.album__like:hover {
    border-color: var(--highlight);
}
.album__like:hover path {
    fill: var(--highlight);
}
.album--loaded .album__like {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.album--parallax .album__like {
    transition: all 0.1s linear;
}
.album__add {
    margin: 0 27px;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #979797;
    border-radius: 50%;
    transition: all 0.6s 0.9s var(--easing);
    transform: translateY(25%) scale(0.3);
    transform-origin: 50% 50%;
    opacity: 0;
}
.album__add path {
    fill: var(--highlight);
}
.album__add:hover {
    border: 1px solid var(--accent);
}
.album__add:hover path {
    fill: var(--accent);
}
.album--loaded .album__add {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.album__volume {
    grid-column: 3 / 4;
    grid-row: 7 / -1;
    transform-origin: 50%;
    transform: rotateZ(-90deg);
    margin: 15px 0 0 25px;
    transition: all 0.6s 1.2s var(--easing);
    transform: translateY(25%) scale(0.3);
    transform-origin: 50% 50%;
    opacity: 0;
}
.album__volume path {
    stroke: var(--highlight);
    fill: var(--highlight);
    stroke-width: 10px;
}
.album--loaded .album__volume {
    transform: scale(1) translateY(0);
    opacity: 1;
}

HTML

<div class="toggles">
    <button class="toggle--dark">
        Dark Theme
    </button>
    <button class="toggle-light">
        Light Theme
    </button>
</div>

<div class="album">
    <svg class="album__menu" height="12px" version="1.1" viewBox="0 0 18 12" width="18px">
        <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
            <g fill="#000000" id="Core" transform="translate(-87.000000, -342.000000)">
                <g id="menu" transform="translate(87.000000, 342.000000)">
                    <path d="M0,12 L18,12 L18,10 L0,10 L0,12 L0,12 Z M0,7 L18,7 L18,5 L0,5 L0,7 L0,7 Z M0,0 L0,2 L18,2 L18,0 L0,0 L0,0 Z" id="Shape" />
                </g>
            </g>
        </g>
    </svg>
    <div class="album__reflection"></div>
    <div class="album__player">
        <div class="album__song">
            <h2 class="album__song__album">
        <marquee scrollamount="3">
          
          Grouper - Grid of Points
        </marquee>
      </h2>
            <h1 class="album__song__title">
        The Races
      </h1>
            <h2 class="album__song__position">
        track 01 of 07
      </h2>
        </div>

</div>
        <div class="album__song__scrubber">
            <input type="range" min="0" max="100" class="album__song__scrubber">
            <span class="album__song__current-time">0:28</span>
            <span class="album__song__full-length">0:50</span>
        </div>

</div>

</div>

3D Card Music Player with smooth parallax

h5, reactivex, player, template

编辑器支持Emmet

快捷键

3D Card Music Player with smooth parallax

h5, reactivex, player, template

使用Vue.JS实现的自适应材质化商品卡片和购物篮（购物车）

基于jQuery和GSAP实现的页面滚动图像过渡切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：