基于Canvas实现的图片幻灯片轮播器

Canvas Image slider，带局部细节放大和很棒的背景粒子效果。

canvas, slider

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    var canvas = document.getElementById('in-canvas');
    var bgCanvas = document.getElementById('bg-canvas');
    var ctx = canvas.getContext('2d');
    var bgCtx = bgCanvas.getContext('2d');

var w = canvas.width = bgCanvas.width = $(window).width();
    var h = canvas.height = bgCanvas.height = $(window).height();
    $(window).on('resize', function() {
        w = canvas.width = bgCanvas.width = $(window).width();
        h = canvas.height = bgCanvas.height = $(window).height();
    });
    var halfW = w / 2;
    var halfH = h / 2;
    var slider;
    var masks = [];
    var stars = [];
    var starsNum = 500;
    var isAnimated = false;
    var maskSettings = {
        x: 0,
        y: h / 7,
        mWidth: w / 4,
        mHeight: h / 3,
        mStroke: 40,
        speed: 4,
        opacity: 0,
        offset: w / 10
    };

var colors = ['217', '358', '177', '29'];
    var color = colors[0];

var img = new Image();
    var imagesources = [];
    $('.slide').each(function(i) {
        imagesources[i] = $(this).find('img').attr('src');
    });
    var imgagesource = imagesources[0];

function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

function distance(x, y) {
        var hypotenuse = Math.round(Math.sqrt(x * x + y * y));
        return hypotenuse;
    }

function CreateStars() {
        this.r = random(10, 20);
        this.x = random(0, distance(halfW, halfH));
        this.y = 0;
        this.rotation = random(0, 360) * Math.PI / 180;
        this.speed = random(0, .5) * Math.PI / 180;

this.draw = function() {
            var grd = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
            grd.addColorStop(0, '#fff');
            grd.addColorStop(0.1, 'hsl(' + color + ', 61%, 33%)');
            grd.addColorStop(0.25, 'hsl(' + color + ', 64%, 6%)');
            grd.addColorStop(1, 'transparent');
            bgCtx.save();
            bgCtx.translate(halfW, halfH);
            bgCtx.rotate(this.rotation);
            bgCtx.beginPath();
            bgCtx.fillStyle = grd;
            bgCtx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
            bgCtx.fill();
            bgCtx.restore();

this.rotation += this.speed / 50;
        };
    }

function CreateMask() {
        img.src = imgagesource;

this.cx = maskSettings.x;
        this.cy = maskSettings.y;
        this.mWidth = maskSettings.mWidth;
        this.mHeight = maskSettings.mHeight;
        this.mStroke = maskSettings.mStroke;
        this.speed = maskSettings.speed;
        this.op = maskSettings.opacity;
        this.offset = maskSettings.offset;
        this.destination = this.cx + this.offset;
        this.draw = function() {
            ctx.save();
            ctx.globalAlpha = this.op;
            ctx.beginPath();
            ctx.rect(this.cx, this.cy, this.mWidth, this.mStroke);
            ctx.rect(this.cx, this.cy, this.mStroke, this.mHeight);
            ctx.rect(this.cx + this.mWidth, this.cy, this.mStroke, this.mHeight);
            ctx.rect(this.cx, this.cy + (this.mHeight - this.mStroke), this.mWidth, this.mStroke);
            ctx.clip();
            ctx.drawImage(img, 0, 0, img.width, img.height);
            ctx.restore();

ctx.save();
            ctx.globalAlpha = this.op;
            ctx.beginPath();
            ctx.rect(w - this.cx - this.mWidth, h - this.cy - this.mHeight, this.mWidth, this.mHeight);
            ctx.clip();
            ctx.drawImage(img, w - img.width, h - img.height, img.width, img.height);
            ctx.restore();
        };
    }

if (mask.op >= 1) {
                mask.op = 1;
            }
            if (mask.cx >= mask.destination) {
                cancelAnimationFrame(request);
                isAnimated = false;
            }
            mask.draw();
        },
        out: function() {
            ctx.clearRect(0, 0, w, h);
            var request = requestAnimationFrame(animateMask.out);
            mask.op = mask.op - .1;
            mask.cx = mask.cx - mask.speed;
            if (mask.op <= 0) {
                mask.op = 0;
            }
            if (mask.cx <= 0) {
                cancelAnimationFrame(request);
            }
            mask.draw();
        }
    };
    var animateStars = function() {
        bgCtx.clearRect(0, 0, w, h);
        for (i = 0; i < stars.length; i++) {
            stars[i].draw();
        }
        requestAnimationFrame(animateStars);
    };

function init() {
        slider = new CreateSlider();
        mask = new CreateMask();
        masks.push(mask);
        for (i = 0; i < starsNum; i++) {
            var star = new CreateStars();
            stars.push(star);
        }
        slider.constraction();
        animateMask.in();
        animateStars();
    }

window.addEventListener('load', function() {
        $('.loader').hide();
        init();
    });
    window.addEventListener('resize', function() {
        mask.draw();
    });
});

编译

CSS

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
}
.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
    z-index: 1000;
}
#bg-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
#in-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
}
.container {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    z-index: 10;
}
.slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 5;
}
.slide:nth-child(1) {
    left: 0%;
}
.slide:nth-child(2) {
    left: 100%;
}
.slide:nth-child(3) {
    left: 200%;
}
.slide:nth-child(4) {
    left: 300%;
}
.bg {
    position: relative;
    z-index: 1;
    height: 60vh;
    width: 70%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.bg:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.controls {
    position: absolute;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 100;
}
.cont-list {
    display: inline-block;
    vertical-align: middle;
    list-style: none;
}
.cont-list li {
    display: inline-block;
    margin: 10px;
}
.cont-list li.active span {
    background-color: #ebebeb;
}
.cont-list span {
    display: block;
    width: 20px;
    height: 20px;
    border: 3px solid #ebebeb;
    border-radius: 50%;
    cursor: pointer;
}
.prev,
.next {
    display: inline-block;
    width: 50px;
    margin: 0 10px;
    z-index: 100;
    font-size: 52px;
    line-height: 1;
    text-align: center;
    color: #ebebeb;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.prev {
    right: 150px;
}
.next {
    right: 20px;
}

HTML

Canvas Image slider，带局部细节放大和很棒的背景粒子效果。

canvas, slider

编辑器支持Emmet

快捷键

Canvas Image slider，带局部细节放大和很棒的背景粒子效果。

canvas, slider

HTML5 Canvas 基于3D矢量类实现的宇宙网络图

基于Canvas实现的网孔连接背景图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：