粒子切换特效幻灯片效果-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Particle UI. HTML -&gt; SVG -&gt; Canvas -&gt; getImageData</title>
<style>
      @import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
canvas {
  position: absolute;
  background: transparent;
  transition: all 1.2s 0.3s cubic-bezier(0.6, 0.005, 0.525, 0.99);
  left: 0;
  pointer-events: none;
}

.arrow {
  position: absolute;
  z-index: 1;
  top: 230px;
  left: 390px;
  z-index: 100;
  cursor: pointer;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  height: 40px;
  width: 40px;
  border-radius: 40px;
  transition: all .6s;
  -webkit-animation: pulse 1s infinite;
          animation: pulse 1s infinite;
}
.arrow:hover {
  border: 2px solid white;
}
@-webkit-keyframes pulse {
  from {
    box-shadow: 0 0 0 0px white;
  }
  to {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  from {
    box-shadow: 0 0 0 0px white;
  }
  to {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}
.arrow img {
  width: 20px;
  position: relative;
  top: 10px;
  left: 10px;
}

.coverA {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: all 1.2s 0.2s cubic-bezier(0.6, 0.005, 0.525, 0.99);
  background-size: cover !important;
  background-position: center;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 98%, 100% 100%);
          clip-path: polygon(100% 0, 100% 0, 100% 98%, 100% 100%);
}

.coverOne {
  background: url("http://repo.bfw.wiki/bfwrepo/image/Marvel_Avengers_Infinity_War_China_cropped.jpg");
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.coverTwo {
  background: url("http://repo.bfw.wiki/bfwrepo/image/v1.jpg");
}

.coverThree {
  background: url("http://repo.bfw.wiki/bfwrepo/image/Annabelle-Comes-Home.jpg");
}

.coverFour {
  background: url("http://repo.bfw.wiki/bfwrepo/image/Dark-Phoenix-Review.jpg");
}

.coverFive {
  background: url("http://repo.bfw.wiki/bfwrepo/image/Marvel_Avengers_Infinity_War_China_cropped.jpg");
}

.logo {
  color: white;
  position: absolute;
  font-family: lato;
  z-index: 10;
  font-size: 12px;
  top: 20px;
  left: 25px;
  opacity: 0.6;
}

.cover {
  position: fixed;
  height: 400px;
  background: linear-gradient(-90deg, #0d040e 52%, transparent);
  width: 20%;
  z-index: 11;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateZ(100px);
          transform: translateY(-50%) translateZ(100px);
}

body {
  overflow: hidden;
  margin: 0;
  background: #0d040e;
}

canvas {
  -webkit-transform: translateZ(10px);
          transform: translateZ(10px);
}

canvas#textOne, canvas#textOne--pre {
  -webkit-transform: translateY(-70px) translateZ(13px);
          transform: translateY(-70px) translateZ(13px);
  position: absolute;
}

canvas#textTwo, canvas#textTwo--pre {
  -webkit-transform: translateY(-227px) translateZ(13px);
          transform: translateY(-227px) translateZ(13px);
  position: absolute;
  opacity: 0;
}

canvas#textThree, canvas#textThree--pre {
  -webkit-transform: translateY(-384px) translateZ(13px);
          transform: translateY(-384px) translateZ(13px);
  position: absolute;
  opacity: 0;
}

canvas#textFour, canvas#textFour--pre {
  -webkit-transform: translateY(-541px) translateZ(13px);
          transform: translateY(-541px) translateZ(13px);
  position: absolute;
  opacity: 0;
}

canvas#textFive, canvas#textFive--pre {
  -webkit-transform: translateY(-698px) translateZ(13px);
          transform: translateY(-698px) translateZ(13px);
  position: absolute;
  opacity: 0;
}

canvas#slide_one, canvas#slide_one--pre,
canvas#slide_two, canvas#slide_two--pre,
canvas#slide_three, canvas#slide_three--pre,
canvas#slide_four, canvas#slide_four--pre,
canvas#slide_five, canvas#slide_five--pre {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
}

.scene {
  height: 100vh;
  opacity: 0;
  transition: opacity 1s;
}
.scene_inner {
  width: 900px;
  box-shadow: 0 0 60px rgba(210, 49, 230, 0.0784313725);
  height: 500px;
  border-radius: 8px;
  position: absolute;
  -webkit-box-reflect: below 10px linear-gradient(to top, white -120%, rgba(255, 255, 255, 0) 25%);
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.scene_inner__left {
  width: 60%;
  height: 100%;
  float: left;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  font-family: 'lato';
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.scene_inner__left .overlay {
  opacity: .8;
  position: fixed;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 60%;
  height: 100%;
  background: #0a0415;
  z-index: 1;
}
.scene_inner__left .wrap {
  position: absolute;
  top: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.scene_inner__left .left {
  width: 30%;
  left: 60px;
  width: 400px;
}
.scene_inner__left .left_title {
  font-size: 20px;
  margin-bottom: 10px;
}
.scene_inner__left .left_description {
  font-size: 14px;
  opacity: 0.8;
}
.scene_inner__left .left_cta {
  padding: 10px 20px 12px 20px;
  border-radius: 4px;
  font-size: 14px;
  color: white;
  background: black;
  display: inline-block;
  margin-top: 20px;
}
.scene_inner__right {
  width: 40%;
  background: #fff;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  float: left;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.scene_inner__right h4 {
  font-family: 'lato';
  position: absolute;
  font-size: 20px;
  -webkit-transform: translateZ(20px) translateY(80px) translateX(25px);
          transform: translateZ(20px) translateY(80px) translateX(25px);
}
.scene_inner__right .menu {
  width: 18px;
  height: 2px;
  background: #111114;
  position: absolute;
  right: 20px;
  top: 20px;
}
.scene_inner__right .menu:after {
  content: '';
  display: block;
  position: relative;
  top: 2px;
  width: 18px;
  height: 2px;
  background: #111114;
}
.scene_inner__right .menu:before {
  content: '';
  display: block;
  position: relative;
  top: 9px;
  width: 10px;
  height: 2px;
  background: #111114;
}
.scene_inner__slider {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -560px;
  width: 1000px;
}
.scene_inner__slider .slide {
  background: #f5e0bf;
  width: 150px;
  height: 180px;
  border-radius: 8px;
  color: white;
  font-family: 'Lato';
  display: inline-block;
  margin-right: 10px;
}
.scene_inner__slider .slide_title {
  font-size: 14px;
  padding: 70px 20px 0 20px;
}
.scene_inner__slider .slide_text {
  font-size: 12px;
  line-height: 18px;
  padding: 0 20px 0 20px;
  opacity: 0.8;
}

    </style>

</head>
<body translate="no">
<div class='scene' data-deep-ui='true'>
<div class='cover'></div>
<div class='scene_inner'>
<div class='arrow'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/right-arrow.png'>
</div>
<div class='logo'>
MOVIZ
</div>
<div class='scene_inner__left'>
<div class='overlay'></div>
<div class='coverOne coverA'></div>
<div class='coverTwo coverA'></div>
<div class='coverThree coverA'></div>
<div class='coverFour coverA'></div>
<div class='wrap'>
<div class='left textOne' xmlns='http://www.w3.org/1999/xhtml'>
<div class='left_title'>
Avengers: Endgame
</div>
<div class='left_description'>
Twenty-three days after Thanos used the Infinity Gauntlet to disintegrate half of all life in the universe, Carol Danvers rescues Tony Stark and Nebula from deep space and returns them to Earth.
</div>
<div class='left_cta'>
Read more
</div>
</div>
<div class='left textTwo' xmlns='http://www.w3.org/1999/xhtml'>
<div class='left_title'>
Ready Player One
</div>
<div class='left_description'>
When the creator of a virtual reality called the OASIS dies, he makes a posthumous challenge to all OASIS users to find his Easter Egg, which will give the finder his fortune and control of his world.
</div>
<div class='left_cta'>
Read more
</div>
</div>
<div class='left textThree' xmlns='http://www.w3.org/1999/xhtml'>
<div class='left_title'>
Annabelle Comes Home
</div>
<div class='left_description'>
While babysitting the daughter of Ed and Lorraine Warren, a teenager and her friend unknowingly awaken an evil spirit trapped in a doll
</div>
<div class='left_cta'>
Read more
</div>
</div>
<div class='left textFour' xmlns='http://www.w3.org/1999/xhtml'>
<div class='left_title'>
X-Men: Dark Phoenix
</div>
<div class='left_description'>
Jean Grey begins to develop incredible powers that corrupt and turn her into a Dark Phoenix. Now the X-Men will have to decide if the life of a team member is worth more than all of humanity.
</div>
<div class='left_cta'>
Read more
</div>
</div>
<div class='left textFive' xmlns='http://www.w3.org/1999/xhtml'>
<div class='left_title'>
Avengers: Age of ultron
</div>
<div class='left_description'>
Twenty-three days after Thanos used the Infinity Gauntlet to disintegrate half of all life in the universe, Carol Danvers rescues Tony Stark and Nebula from deep space and returns them to Earth.
</div>
<div class='left_cta'>
Read more
</div>
</div>
</div>
</div>
<div class='scene_inner__right'>
<h4>Featured movies</h4>
<div class='menu'></div>
</div>
<div class='scene_inner__slider'>
<div class='slide slide_one' xmlns='http://www.w3.org/1999/xhtml'>
<h2 class='slide_title'>Avengers: Endgame</h2>
<p class='slide_text'>An absolute epic movie out in 2019</p>
</div>
<div class='slide slide_two' xmlns='http://www.w3.org/1999/xhtml'>
<h2 class='slide_title'>Ready Player One</h2>
<p class='slide_text'>An absolute epic movie out in 2019</p>
</div>
<div class='slide slide_three' xmlns='http://www.w3.org/1999/xhtml'>
<h2 class='slide_title'>Annabelle Comes Home</h2>
<p class='slide_text'>An absolute epic movie out in 2019</p>
</div>
<div class='slide slide_four' xmlns='http://www.w3.org/1999/xhtml'>
<h2 class='slide_title'>X-Men: Dark Phoenix</h2>
<p class='slide_text'>An absolute epic movie out in 2019</p>
</div>
<div class='slide slide_five' xmlns='http://www.w3.org/1999/xhtml'>
<h2 class='slide_title'>Avengers: Age of ultron</h2>
<p class='slide_text'>An absolute epic movie out in 2019</p>
</div>
</div>
</div>
</div>

<script src='http://repo.bfw.wiki/bfwrepo/js/jquery.min.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/fontBase64.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/imagesBase64.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/imagesBase642.js'></script>
<script>
      setTimeout(function () {
  $('.scene').css('opacity', 1);
}, 1000);

// ## Deep-ui | 3D User interface builder
// ## Depths can be defined on the html element as data-depth.
// ## Depth is calculated from the parent element with depth-ui set as true.
// ## Set data-deep-animate & data-deep-animate-time to true on parent to animate to point.

function deep_ui() {

  // Options
  var global_perspective = 800; // Global perspective set to parent
  var pivot = 80; // The higher this number the more subtle the pivot effect
  var debug = false; // Shows various debug information
  var animation_delay = 100; // Delay before animation starts cannot be 0. In ms.
  var animation_easing = 'ease'; // Animation easing

  // Variables
  var deep_parent = $('*[data-deep-ui="true"]'); // Parent with deep active
  var deep_element = $('[data-depth]'); // Elements with depth
  var count = 0;

  // Set perspective
  deep_parent.each(function () {

    $(this).css({
      'perspective': global_perspective + 'px',
      'transform-style': 'preserve-3d',
      'transform': 'translateY(-50%) tra' });
    // Set perspective of parent

    // If animation else is turned on, set the transition

    if ($(this).data('deep-animate') == true) {
      set_depth_animation(); // Set depths
    } else {
      set_depth(); // Set depths
    }

  });

  // Set the depths of each child element
  function set_depth() {
    // Set element depth
    deep_element.each(function () {
      $(this).css({
        'transform': 'translatez(' +
        $(this).data('depth') +
        'px) translateY(-0%)',
        'transform-style': 'preserve-3d' // Set CSS to all elements
      });
    });
  }

  function set_depth_animation() {
    // Set element depth

    deep_element.each(function () {
      $(this).css({
        'transform': 'translatez(1000px) translateY(-0%)',
        'transform-style': 'preserve-3d' // Set CSS to all elements
      });
      var deep_animate = 2;
      $(this).css('transition', 'all ' + 1.4 + 's ' + .3 * count + 's ' + animation_easing); // Set the transition on elements
      count++;
    });
  }
  // Pivot
  $(document).on('mousemove', function (e) {
    var x = -($(window).innerWidth() / 2 - e.pageX) / pivot; // Get current mouse x
    var y = ($(window).innerHeight() / 2 - e.pageY) / pivot; // Get current mouse y
    deep_parent.css('transform', 'rotateY(' + x + 'deg) rotateX(' + y + 'deg) translateY(-0%)'); // Set parent element rotation
  });

  // Debug
  function deep_debug() {
    deep_element.each(function () {
      $(this).append('<span class="d_label">Depth: ' + $(this).data('depth') + '</span>'); // Append depth tags
    });
    deep_parent.each(function () {
      $(this).append('<span class="d_b_label">Deep parent</span>'); // Append parent tags
    });
  }

  // Run debug if true
  if (debug) {
    deep_debug();
  }
}

// Init
deep_ui();
!function () {"use strict";var o = [],n = 0,e = 0,t = { window: "object" == typeof window, module: "object" == typeof module && "object" == typeof module.exports, amd: "function" == typeof define && define.amd, global: "object" == typeof global },r = { defineProp: "undefined" != typeof Object.defineProperty },a = { valuesCount: 1e4, randomInterval: 30, removeOptions: !0 },d = {};t.window && window.fastrandomOptions ? d = window.fastrandomOptions : t.global && global.fastrandomOptions ? d = global.fastrandomOptions : "object" == typeof fastrandomOptions && (d = fastrandomOptions);for (var i in a) a.hasOwnProperty(i) && !d.hasOwnProperty(i) && (d[i] = a[i]);d.removeOptions && (t.window && window.fastrandomOptions ? delete window.fastrandomOptions : t.global && global.fastrandomOptions && delete global.fastrandomOptions);var f = function (e) {return e ? o[e] : (n == d.valuesCount && (n = 0), o[n++]);};f.randomChanger = function () {e == d.valuesCount && (e = 0), o[e++] = Math.random();};for (var s = 0; s < d.valuesCount; s++) f.randomChanger();d.randomInterval && setInterval(f.randomChanger, d.randomInterval), f.valueOf = f, f.options = d, r.defineProp && (Object.defineProperty(f, "random", { get: function () {return f();} }), Object.defineProperty(f, "randomArray", { get: function () {return o;} }), Object.defineProperty(f, "currentRandomIndex", { get: function () {return n;} })), t.module ? module.exports = f : t.amd && define("fastrandom", [], function () {return f;}), t.window && (window.random = f);}();

class ParticulateUI {
  constructor() {
    this.elements = [];
  }

  add(el, render) {
    // Add the element to the particulate class ready for render
    el.height = Math.floor($(el.elem).outerHeight());
    el.width = Math.floor($(el.elem).outerWidth());
    el.html = $(el.elem).get(0).outerHTML;
    el.render = render;
    el.positionX = $(el.elem)[0].getBoundingClientRect().left + $(window)['scrollLeft']();
    el.positionY = $(el.elem)[0].getBoundingClientRect().top + $(window)['scrollTop']();
    el.pixels = [];
    el.data = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${el.width}" height="${el.height}"><foreignObject width="100%" height="100%">${el.html}</foreignObject><defs><style type="text/css">@font-face {font-family: "${primaryFont}"}</style></defs></svg>`;

    this.elements.push(el);



  }

  render() {
    // Render the elements

    this.elements.forEach(function (element) {
      // For each elements create a precursor canvas and append it the body
      var preCanvasElement = $('<canvas id="' + element.elem.split('.')[1] + '--pre"/>');
      $('.scene').append(preCanvasElement);

      // Get the context of this pre canvas
      var preCanvas = document.getElementById(element.elem.split('.')[1] + '--pre');
      var preCanvasCtx = preCanvas.getContext('2d');

      // Hide the pre canvas
      if (!element.render) {
        $('canvas#' + element.elem.split('.')[1] + '--pre').hide();
      }

      $('canvas#' + element.elem.split('.')[1] + '--pre').css({ 'left': element.positionX, 'top': element.positionY });

      // Set the height of the canvas to match the rendered element
      preCanvas.height = element.height;
      preCanvas.width = element.width;

      // Create BLOB from the elements data
      var DOMURL = window.URL || window.webkitURL || window;
      var img = new Image();
      var svg = new Blob([element.data], { type: 'image/svg+xml;charset=utf-8' });



      // Read and draw onto our preCanvas
      var reader = new FileReader();
      reader.readAsDataURL(svg);
      reader.onloadend = fu.........完整代码请登录后点击上方下载按钮下载查看