带滴水和浪涌效果的移动音乐播放器

Mobile Music Player

gsap, player

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    var $cover = $(".player-cover"),
        $bars = $(".player-spectrum-bar"),
        $drops = $(".player-drops"),
        $spectrum = $(".player-spectrum")

, paused = false

, barWidth = $bars.width(), barHeight = $bars.height()

, coverPos = $cover.position(), coverSize = $cover.width(), coverCenter = coverPos.left + (coverSize / 2), coverRadius = coverSize / 2

, spectrumPos = $spectrum.position().top, spectrumMargin = parseFloat($spectrum.css("marginTop")), dropsPos = $drops.position(), distanceCoverFromDrops = dropsPos.top - coverPos.top - coverSize;

$.fn.animBar = function(v) {
        var $bar = $(this);

var min = 0.1;
        var setV = true
        if (typeof v == "undefined") {
            v = min + (Math.random() * (1 - min));
            setV = false;
        } else {
            // v=Math.max(min,v)
        }

if (v > parseFloat($bar.attr("data-scale")) && v > min) {
            TweenMax.to($bar, v * (setV ? 0.6 : 0.2), {
                scaleY: v,
                attr: {
                    "data-scale": v
                },
                ease: Quad.easeOut,
                onComplete: function() {
                    TweenMax.to($bar, v * 0.6, {
                        scaleY: 0.1,
                        attr: {
                            "data-scale": 0.1
                        },
                        ease: Quad.easeIn,
                        onComplete: function() {
                            $bar.animBar(v * 0.5)
                        }
                    });
                },
                onUpdate: function() {
                    $bar.checkCoverDrops()
                }
            });

}
        if (!setV && !paused) {
            setTimeout(function() {
                $bar.animBar()
            }, Math.random() * 500);
        }
    }
    $.fn.checkCoverDrops = function() {
        var $bar = $(this);

var barPos = $bar.position();

if (barPos.left + (barWidth / 2) >= coverPos.left && barPos.left - (barWidth / 2) <= coverPos.left + coverSize) {
            var scale = parseFloat($bar.attr("data-scale"));
            var size = scale * barHeight;
            if (size >= distanceCoverFromDrops) {
                var peak = {
                    top: size - distanceCoverFromDrops,
                    left: barPos.left + (barWidth / 2)
                }
                var dx = peak.left - coverCenter;
                var dy = peak.top - coverRadius;
                var distance = Math.sqrt((dx * dx) + (dy * dy));
                if (distance < coverRadius - 5) {
                    addDrop(barPos.left)
                }
            }
        }
    }

function addDrop(x) {
        var $drop = $("<div/>")
            .addClass("player-drop")
            .css({
                left: x,
                top: dropTopPos(x)
            })
            .appendTo(".player-drops");
        var distanceFromCenter = coverCenter - (x + (barWidth / 2));
        TweenMax.to($drop, Math.abs(distanceFromCenter) * 0.06, {
            x: distanceFromCenter,
            y: Math.abs(distanceFromCenter) * 0.3,
            ease: Quint.easeInOut,
            force3D: true,
            onComplete: function() {
                $drop.addClass('player-drop-ready')
                TweenMax.to($drop, 1, {
                    scaleY: 1.5,
                    ease: Quad.easeInOut
                })
            }
        })

}

function dropTopPos(x) {
        return -distanceCoverFromDrops - (Math.abs((x + (barWidth / 2)) - coverCenter) * 0.314)
    }

start();

$(".play-pause-button").click(function() {
        paused = !paused;
        if (!paused) {
            start();
        }
    })
})

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Satisfy);
body {
    background: #05010E;
    margin-top: 80px;
    font-family: 'Open Sans', sans-serif;
}
h1 {
    font-family: "Satisfy", cursive;
    color: #fff;
    font-size: 2.5em;
    text-align: center;
}
.iPhone {
    background: #fff;
    border: solid 2px #c5c5c5;
    height: 500px;
    width: 260px;
    border-radius: 30px;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 3px 5px 0 rgba(50, 50, 50, 0.25);
    -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    -moz-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.iPhoneInner {
    background: #fff;
    border: solid 2px #b4b4b4;
    height: 496px;
    width: 256px;
    border-radius: 30px;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 3px 5px 0 rgba(50, 50, 50, 0.75);
    -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    -moz-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.iPhoneInner .circButton {
    background: #fff;
    border: solid 2px #3b3b3b;
    width: 36px;
    height: 36px;
    position: relative;
    margin: 0 auto;
    border-radius: 50%;
    top: 48px;
    cursor: pointer;
}
.iPhoneInner .smallTopCirc {
    background-color: #1f1f1f;
    background-image: -webkit-linear-gradient(#1f1f1f, #141414);
    background-image: linear-gradient(#1f1f1f, #141414);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 6px;
    position: relative;
    margin: 0 auto;
}
.iPhoneInner .camera {
    background-color: #1f1f1f;
    background-image: -webkit-linear-gradient(#1f1f1f, #141414);
    background-image: linear-gradient(#1f1f1f, #141414);
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: solid 1px #c5c5c5;
    top: 17px;
    left: 85px;
}
.iPhoneInner .oval {
    background-color: #1f1f1f;
    background-image: -webkit-linear-gradient(#1f1f1f, #141414);
    background-image: linear-gradient(#1f1f1f, #141414);
    width: 50px;
    height: 4px;
    top: 14px;
    border-radius: 2px;
    margin: 0 auto;
    margin-bottom: -12px;
    position: relative;
}
.iScreen {
    position: relative;
    width: 230px;
    height: 400px;
    margin: 0 auto;
    top: 40px;
    overflow: hidden;
    background: #0B0119;
    background-color: #0B0119;
    background-image: -webkit-linear-gradient(#0B0119, #0B0119);
    background-image: linear-gradient(#0B0119, #0B0119);
    border: solid 2px #3b3b3b;
    -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    -moz-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.iScreen .usman img {
    display: block;
    max-width: 140px;
    margin: 0 auto;
    top: 80px;
    position: relative;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
}
.iScreen .usman .center {
    display: block;
    max-width: 140px;
    margin: 0 auto;
    right: 130px;
    top: 0;
    transition-delay: 2s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
    position: relative;
}
.iScreen .showMe {
    opacity: 1;
}
.turnOn {
    background: #fd3951;
    border: solid 2px #d1d1d1;
}
.noShad {
    box-shadow: none;
}
.flip {
    width: 260px;
    max-width: 100%;
    right: 0;
    top: 0;
    text-align: center;
    display: block;
    position: absolute;
    background: #fd3951;
    margin-bottom: 40px;
    border: none;
    outline: none;
    color: #fff;
    font-family: "Satisfy", cursive;
    cursor: pointer;
    font-size: 2em;
    top: 10px;
    right: 10px;
    border: solid 2px #fff;
}
.player-info {
    text-align: center;
}
.player-info-text {
    padding: 30px 0;
    background: #0B0119;
    margin-bottom: 25px;
}
.player-song-name {
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-size: 1.3rem;
    font-weight: 200;
}
.player-artist {
    font-weight: 600;
    margin: 5px 0 0 0;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: #fff;
}
.player-cover {
    overflow: hidden;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: 115px;
    height: 115px;
    z-index: 3;
    margin-top: 8px;
    background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2015/02/Elegant-Taylor-Swift-2015.jpg");
    box-shadow: 0 3px 5px 0 rgba(50, 50, 50, 0.25);
    background-size: cover;
    background-position: center;
}
.player-drops {
    position: relative;
    transform: translateZ(0);
}
.player-drop {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
}
.player-spectrum {
    transform: translateZ(0);
    position: absolute;
    height: 160px;
    margin-top: -45px;
    z-index: 2;
    white-space: nowrap;
}
.player-spectrum-floor {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: -30px;
}
.player-spectrum-bars {
    font-size: 0;
    position: absolute;
    bottom: 0;
    -webkit-backface-visibility: hidden;
}
.player-spectrum-bar {
    display: inline-block;
    width: 20px;
    height: 150px;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.player-controls,
.player-buttons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
}
.player-controls {
    position: absolute;
    height: 50px;
    line-height: 50px;
    z-index: 5;
    bottom: 10px;
}
.player-buttons {
    padding: 0 10px;
}
.player-button {
    padding: 0;
    margin: 0 5px;
    padding: 0 5px;
    background: transparent;
    border: none;
    color: #841E21;
    font-size: 18px;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.player-button:hover {
    color: #fff;
}
.player-slider {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 6px;
    margin-left: 10px;
    background: #841E21;
    border-radius: 4px;
    cursor: pointer;
}
.player-slider::before,
.player-slider::after {
    content: '';
    position: absolute;
}
.player-slider::before,
.player-slider::after {
    content: '';
    position: absolute;
}
.player-slider::before {
    top: 0;
    left: 0;
    bottom: 0;
    right: 40%;
    border-radius: 4px;
    background: #222;
}
.player-slider::after {
    opacity: 1;
    right: 40%;
    width: 10px;
    height: 10px;
    top: -2.5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
.player-drop,
.player-spectrum-floor,
.player-controls,
.player-spectrum-bar {
    background: #ad2a2a;
}

HTML

Mobile Music Player

gsap, player

编辑器支持Emmet

快捷键

Mobile Music Player

gsap, player

使用VueJS和ThreeJS构建的SomaFM电台音乐播放器

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：