HTML5 双曝光轮播幻灯片

double exposure carousel slider 使用canvas globalCompositeOperation: source-over图片混合效果实现的透明图层叠加特效。使用HTML5可以实现原本只能在PS中制作的图片特效，而且可编程，更加灵活。

html5, slider

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function(){
  var loading = document.getElementById("loading");
  loading.classList.add("loading-done");
  
  var property = {
    element: "#images",
    parallax: .6,
    interval: 2200,
    animDuration: 1300,
    easing: easingInOutQuad
  }

var slider = new DXslider(property);
  slider.init();
}

class DXslider{
  constructor(property){
    this.images = document.querySelector(property.element);
    this.preButton = document.querySelector(property.element + " nav .pre");
    this.nextButton = document.querySelector(property.element + " nav .next");
    this.lightenImages = document.querySelectorAll(".lighten img");
    this.normalImages = document.querySelectorAll(".normal img");
    this.canvasBox = document.createElement("div");
    this.paraEffect = property.parallax; //have to clamp 0 ~ 1
    this.canvasArray = [];
    this.progress = 0;
    this.animating = false;
    this.interval = property.interval;
    this.left = true;
    this.duration = property.animDuration;
    this.easing = property.easing;
    
    this.images.appendChild(this.canvasBox);
    this.canvasBox.classList.add("canvas");
  }
  
  init(){
    this.settingStyle();
    this.settingCanvas();
    
    this.preButton.addEventListener("click", function(e){
      if(!this.animating){  
        this.left = false;
        clearTimeout(this.timer);
        this.slide();
      }
    }.bind(this), false);
    
    this.preButton.addEventListener("touchend", function(e){
      if(!this.animating){  
        this.left = false;
        clearTimeout(this.timer);
        this.slide();
      }
    }.bind(this), false);

this.nextButton.addEventListener("click", function(e){
      if(!this.animating){ 
        this.left = true;
        clearTimeout(this.timer);
        this.slide();
      }
    }.bind(this), false);
    
    this.nextButton.addEventListener("touchend", function(e){
      if(!this.animating){ 
        this.left = true;
        clearTimeout(this.timer);
        this.slide();
      }
    }.bind(this), false);
  }
  
  settingStyle(){
    this.imagesWidth = this.images.offsetWidth;
    this.width = this.lightenImages[0].width;
    this.height = this.lightenImages[0].height;
    this.dpi = this.width / this.imagesWidth;
    
    this.images.style.height = this.canvasBox.style.height = this.imagesWidth * this.height / this.width + "px";
    
    this.preButton.classList.add("after-loading");
    this.nextButton.classList.add("after-loading");
  }
  
  settingCanvas(){
    var canvas, context, normal, lighten, n;
    for(var i = 0, len = this.normalImages.length * 2; i < len; i++){
      canvas = document.createElement("canvas");
      this.canvasBox.appendChild(canvas);
      context = canvas.getContext("2d");
    
      canvas.width = this.width;
      canvas.height = this.height;
      canvas.style.width = this.imagesWidth + "px";
      canvas.style.height = this.imagesWidth * this.height / this.width + "px";
    
      //add images(lighten and normal) into canvasArray
      n = i % (len / 2);
      normal = this.normalImages[n];
      lighten = this.lightenImages[n];
      this.canvasArray.push({
        canvas: canvas, context: context, normal: normal, lighten: lighten
      });
    }
    
    this.render(this.progress, -this.imagesWidth);
    this.timer = setTimeout(this.slide.bind(this), this.interval);
  }
  
  slide(){
    this.left ? 
    this.tween(-this.imagesWidth, this.duration, this.easing) :
    this.tween(this.imagesWidth, this.duration, this.easing);
  }
  
  tween(change, duration, easingFunc){
    var startTime = new Date();
    this.progress = 0;
    this.animating = true;
    this.update(startTime, change, duration, easingFunc);
  }
  
  update(startTime, change, duration, easingFunc){
    var time = new Date() - startTime;
    if(time < duration){
      this.progress = easingFunc(time / duration);
      this.render(this.progress, change);
      requestAnimationFrame(this.update.bind(this, startTime, change, duration, easingFunc));
    } else {
      if(this.left){
        var firstEle = this.canvasArray[0];
        this.canvasArray.shift();
        this.canvasArray.push(firstEle);
      } else {
        var lastEle = this.canvasArray[this.canvasArray.length - 1];
        this.canvasArray.pop();
        this.canvasArray.unshift(lastEle);
      }
      this.progress = 1;
      this.animating = false;
      time = duration;
      this.left = true;
      this.render(0, -this.imagesWidth);
      this.timer = setTimeout(this.slide.bind(this), this.interval);
    }
  }
  
  render(progress, position){
    for(var i = 0, len = this.canvasArray.length; i < len; i++){
      var canvas = this.canvasArray[i].canvas;
      canvas.style.setProperty("-webkit-transform", "translate(" + (progress * position - (len / 2 - i) * this.imagesWidth)  + "px, 0)");
      canvas.style.transform = "translate(" + (progress * position - (len / 2 - i) * this.imagesWidth)  + "px, 0)";
      
      var context = this.canvasArray[i].context;
      context.clearRect(0, 0, this.width, this.height);
      context.globalCompositeOperation = "source-over";
      context.drawImage(this.canvasArray[i].normal, 0, 0, this.width, this.height);
      context.globalCompositeOperation = "lighten";
      context.drawImage(this.canvasArray[i].lighten, ((len / 2 - i) * this.imagesWidth - progress * position) * this.dpi * this.paraEffect, 0, this.width, this.height);
    }
  }
}

//easing
//prepare only easingInOutQuad
function easingInOutQuad(t){
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; 
}

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #222;
}
#loading {
    color: #fff;
    position: absolute;
    letter-spacing: 3px;
    width: 10em;
    line-height: 2em;
    top: calc(50% - 1em);
    left: calc(50% - 5em);
    z-index: 2;
    text-align: center;
}
.loading-done {
    display: none;
}
#images {
    position: relative;
    width: 600px;
    margin: auto;
    /*   -webkit-perspective: 500px;
  perspective: 500px; */
}
.canvas {
    position: relative;
    display: block;
    overflow: hidden;
}
#images img {
    display: none;
    vertical-align: bottom;
}
canvas {
    vertical-align: bottom;
    position: absolute;
}
nav ul {
    height: 0;
    margin: 0;
}
nav li {
    position: absolute;
    width: 25px;
    height: 25px;
    opacity: .3;
    list-style: none;
    top: calc(50% - 12px);
    z-index: 100;
    transition: opacity .3s;
}
nav li:hover {
    opacity: .7;
}
.pre.after-loading {
    left: -40px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
.next.after-loading {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    right: -40px;
}

HTML

double exposure carousel slider 使用canvas globalCompositeOperation: source-over图片混合效果实现的透明图层叠加特效。使用HTML5可以实现原本只能在PS中制作的图片特效，而且可编程，更加灵活。

html5, slider

编辑器支持Emmet

快捷键

double exposure carousel slider 使用canvas globalCompositeOperation: source-over图片混合效果实现的透明图层叠加特效。 使用HTML5可以实现原本只能在PS中制作的图片特效，而且可编程，更加灵活。

html5, slider

HTML5 口袋妖怪幻灯片

HTML5商品幻灯片右上角详情菜单盒子展开动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

double exposure carousel slider 使用canvas globalCompositeOperation: source-over图片混合效果实现的透明图层叠加特效。使用HTML5可以实现原本只能在PS中制作的图片特效，而且可编程，更加灵活。