HTML5带音效的交互式日食动画

用鼠标拖动月亮来遮挡太阳，背景音乐的音量会随着发生变化。

h5, eclipse

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var moon = document.getElementById("moon"),
    parc = document.getElementById("perc"),
    audio = document.getElementById("audio"),
    dragging = false,
    radius = 75,
    area = Math.PI * radius * radius,
    offs = [0, 0];

function init() {
    moon.addEventListener("mousedown", selectMoon);
    moon.addEventListener("touchstart", selectMoon);
    document.body.addEventListener("mousemove", moveMoon);
    document.body.addEventListener("touchmove", moveMoon);
    document.body.addEventListener("mouseup", dropMoon);
    document.body.addEventListener("touchend", dropMoon);
    setMoonData(window.innerWidth / 2 + radius * 2.5, window.innerHeight / 2);
    audio.play();
}

function selectMoon(evt) {
    dragging = true;
    var coords = getCoords(evt),
        bcr = moon.getBoundingClientRect();
    offs = [coords[0] - bcr.left - radius, coords[1] - bcr.top - radius];
}

function moveMoon(evt) {
    if (!dragging)
        return;
    var coords = getCoords(evt);
    setMoonData(coords[0] - offs[0], coords[1] - offs[1]);
}

function setMoonData(x, y) {
    moon.style.left = x / window.innerWidth * 100 + "%";
    moon.style.top = y / window.innerHeight * 100 + "%";

var offset = Math.hypot(x - window.innerWidth / 2, y - window.innerHeight / 2),
        sector = Math.acos((offset / 2) / radius) / Math.PI,
        triangle = Math.sqrt(radius * radius - offset * offset / 4) * (offset / 2),
        overlap = (area * sector - triangle) * 2 / area || 0,
        opacity = Math.max(400 - offset, 0) / 1000,
        expOverlap = Math.pow(overlap, 4);

//Bling bling
    moon.style.boxShadow = "inset " + (x - window.innerWidth / 2) / 10 + "px " + (y - window.innerHeight / 2) / 10 + "px 50px rgba(255, 255, 119, " + opacity + ")";
    moon.style.background = "hsl(194, 56%, " + (1 - expOverlap) * 60 + "%)";
    perc.innerHTML = "Volume: " + (overlap * 100).toPrecision(4) + "%";
    document.body.style.background = "hsl(" + (194 + Math.floor(166 * expOverlap)) + ", 66%, " + (1 - expOverlap) * 50 + "%)";

//Oh yeah, set the volume, I guess.
    audio.volume = overlap;
}

function dropMoon() {
    dragging = false;
}

function getCoords(evt) {
    return [(evt.touches || [evt])[0].clientX, (evt.touches || [evt])[0].clientY];
}

Math.hypot = function(a, b) {
    return Math.sqrt(a * a + b * b);
};

init();

编译

CSS

HTML

用鼠标拖动月亮来遮挡太阳，背景音乐的音量会随着发生变化。

h5, eclipse

编辑器支持Emmet

快捷键

用鼠标拖动月亮来遮挡太阳，背景音乐的音量会随着发生变化。

h5, eclipse

HTML5 SVG带虹吸现象的日食动画

HTML5带音效致自己座右铭动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：