小贝子编程

在现有网站的后台实现代码.(用JS动画替换背景图像)



我需要帮助。我最近对网页设计产生了兴趣，所以我开始从模板中学习基础知识。我现在的问题是，由于我无法设法让它工作，我如何将这个 javascript 实现到我的网站的背景中，目前那里显示了那个 minecraft 图像？

每当我尝试实现它时，无论出于何种原因，我都会破坏整个页面，可悲的是。

此致敬意！

我想要实现的代码：https://codepen.io/towc/pen/eNEBQX(下面的代码(

.html：

<canvas id=c></canvas>
<a href=http://hd4desktop.com/669-colours-circle-rainbow-hd-wallpaper/>
<img src=http://hd4desktop.com/images/m/a-colours-circle-rainbow-HDWallpaper.jpg ></a>

.css：

body {
  overflow: hidden;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}
a {
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc( 100% - 200px );
  top: calc( 100% - 130px );
}
img {
  width: 200px;
}

.JS：

// base image: http://hd4desktop.com/images/m/a-colours-circle-rainbow-HD-Wallpaper.jpg
var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    opts = {
      lineCount: 100,
      starCount: 30,
      radVel: .01,
      lineBaseVel: .1,
      lineAddedVel: .1,
      lineBaseLife: .4,
      lineAddedLife: .01,
      starBaseLife: 10,
      starAddedLife: 10,
      ellipseTilt: -.3,
      ellipseBaseRadius: .15,
      ellipseAddedRadius: .02,
      ellipseAxisMultiplierX: 2,
      ellipseAxisMultiplierY: 1,
      ellipseCX: w / 2,
      ellipseCY: h / 2,
      repaintAlpha: .015
    },
    gui = new dat.GUI,
    lines = [],
    stars = [],
    tick = 0,
    first = true;
function init() {
  lines.length = stars.length = 0;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#333';
  ctx.fillRect( 0, 0, w, h );
  if( first ) {
    var f = gui.addFolder( 'logics' );
    f.add( opts, 'lineCount', 1, 300 );
    f.add( opts, 'starCount', 1, 300 );
    f.add( opts, 'radVel', 0, 1 );
    f.add( opts, 'lineBaseVel', .01, 1 );
    f.add( opts, 'lineAddedVel', 0, 1 );
    f.add( opts, 'lineBaseLife', 0, 1 );
    f.add( opts, 'lineAddedLife', 0, 1 );
    f.add( opts, 'starBaseLife', 0, 100 );
    f.add( opts, 'starAddedLife', 0, 100 );
       f = gui.addFolder( 'graphics' );
    f.add( opts, 'ellipseTilt', -Math.PI, Math.PI ).step( .1 );
    f.add( opts, 'ellipseBaseRadius', 0, .5 );
    f.add( opts, 'ellipseAddedRadius', 0, .5 );
    f.add( opts, 'ellipseAxisMultiplierX', 0, 3 );
    f.add( opts, 'ellipseAxisMultiplierY', 0, 3 );
    f.add( opts, 'ellipseCX', 0, w );
    f.add( opts, 'ellipseCY', 0, h );
    f.add( opts, 'repaintAlpha', 0, 1 );
    gui.add( window, 'init' ).name( 'reset animation' );
    gui.add( window, 'LuukLamers' );
    loop();
    first = false;
  }
}
function loop() {
  window.requestAnimationFrame( loop );
  step();
  draw();
}
function step() {
  tick += .5;
  if( lines.length < opts.lineCount && Math.random() < .5 )
    lines.push( new Line );
  if( stars.length < opts.starCount )
    stars.push( new Star );
  lines.map( function( line ) { line.step(); } );
  stars.map( function( star ) { star.step(); } );
}
function draw() {
  ctx.shadowBlur = 0;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
  ctx.fillRect( 0, 0, w, h );
  ctx.globalCompositeOperation = 'lighter';
  ctx.translate( opts.ellipseCX, opts.ellipseCY );
  ctx.rotate( opts.ellipseTilt );
  ctx.scale( opts.ellipseAxisMultiplierX, opts.ellipseAxisMultiplierY );
  // ctx.shadowBlur here almost does nothing
  lines.map( function( line ) { line.draw(); } );
  ctx.scale( 1/opts.ellipseAxisMultiplierX, 1/opts.ellipseAxisMultiplierY );
  ctx.rotate( -opts.ellipseTilt );
  ctx.translate( -opts.ellipseCX, -opts.ellipseCY );
  stars.map( function( star ) { star.draw(); } );
}
function Line() {
  this.reset();
}
Line.prototype.reset = function() { 
  this.rad = Math.random() * Math.PI * 2,
  this.len = w * ( opts.ellipseBaseRadius + Math.random() * opts.ellipseAddedRadius );
  this.lenVel = opts.lineBaseVel + Math.random() * opts.lineAddedVel;
  this.x = this.px = Math.cos( this.rad ) * this.len;
  this.y = this.py = Math.sin( this.rad ) * this.len;
  this.life = this.originalLife = w * ( opts.lineBaseLife + Math.random() * opts.lineAddedLife );
  this.alpha = .2 + Math.random() * .8;
}
Line.prototype.step = function() {
  --this.life;
  var ratio = 1 - .1 *  this.life / this.originalLife;
  this.px = this.x;
  this.py = this.y;
  this.rad += opts.radVel;
  this.len -= this.lenVel;
  this.x = Math.cos( this.rad ) * this.len;
  this.y = Math.sin( this.rad ) * this.len;
  if( this.life <= 0 )
    this.reset();
}
Line.prototype.draw = function() {
  var ratio = Math.abs( this.life / this.originalLife - 1/2 );
  ctx.lineWidth = ratio * 5;
  ctx.strokeStyle = ctx.shadowColor = 'hsla(hue, 80%, light%, alp)'
    .replace( 'hue', tick + this.x / ( w * ( opts.ellipseBaseRadius + opts.ellipseAddedRadius ) ) * 100 )
    .replace( 'light', 75 - ratio * 150 )
    .replace( 'alp', this.alpha );
  ctx.beginPath();
  ctx.moveTo( this.px, this.py );
  ctx.lineTo( this.x, this.y );
  ctx.stroke();
}
function Star() {
  this.reset();
};
Star.prototype.reset = function() {
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.life = opts.starBaseLife + Math.random() * opts.starAddedLife;
}
Star.prototype.step = function() {
  --this.life;
  if( this.life <= 0 )
    this.reset();
}
Star.prototype.draw = function(){
  ctx.fillStyle = ctx.shadowColor = 'hsla(hue, 80%, 50%, .2)'
    .replace( 'hue', tick + this.x / w * 100 );
  ctx.shadowBlur = this.life;
  ctx.fillRect( this.x, this.y, 1, 1 );
};
window.addEventListener( 'resize', function() {
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  opts.ellipseCX = w / 2;
  opts.ellipseCY = h / 2;
  init();
} );
function LuukLamers() {
  var i = 0,
      array = [ 300, 74, 0.04, 0.1, 0.1, .55, 10, 100, 10, -.15, .18, .01, 3, 1, w / 2, h / 2, 0.02 ];
  for( var key in opts ) {
    opts[ key ] = array[ i ];
    ++i;
  }
  init();
}
init();

我当前的网站(会有音乐自动播放，所以将网站静音！http://5.196.26.60/backgroundmusic.html

我认为基本的 css 东西会干扰其他一些已经使用的东西吗？

如果您需要任何其他信息，请随时询问，我尝试回答！

最好的问候和提前感谢的帮助:)！

我不确定你有多接近，但你基本上需要做的是在你的网站中包含所有的css和javascript。这包括用于制作空间效果的javascript GUI库。在代码笔中，如果单击JS旁边的小设置轮，则可以看到包含的库。确保您已添加这些内容。之后，我只是在页面的overlaydiv中添加了html。见下文，希望对您有所帮助... 

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    
    opts = {
      
      lineCount: 100,
      starCount: 30,
      
      radVel: .01,
      lineBaseVel: .1,
      lineAddedVel: .1,
      lineBaseLife: .4,
      lineAddedLife: .01,
      
      starBaseLife: 10,
      starAddedLife: 10,
      
      ellipseTilt: -.3,
      ellipseBaseRadius: .15,
      ellipseAddedRadius: .02,
      ellipseAxisMultiplierX: 2,
      ellipseAxisMultiplierY: 1,
      ellipseCX: w / 2,
      ellipseCY: h / 2,
      
      repaintAlpha: .015
    },
    gui = new dat.GUI,
    
    lines = [],
    stars = [],
    tick = 0,
    first = true;
function init() {
  
  lines.length = stars.length = 0;
  
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#333';
  ctx.fillRect( 0, 0, w, h );
  
  if( first ) {
    
    var f = gui.addFolder( 'logics' );
    f.add( opts, 'lineCount', 1, 300 );
    f.add( opts, 'starCount', 1, 300 );
    f.add( opts, 'radVel', 0, 1 );
    f.add( opts, 'lineBaseVel', .01, 1 );
    f.add( opts, 'lineAddedVel', 0, 1 );
    f.add( opts, 'lineBaseLife', 0, 1 );
    f.add( opts, 'lineAddedLife', 0, 1 );
    f.add( opts, 'starBaseLife', 0, 100 );
    f.add( opts, 'starAddedLife', 0, 100 );
       f = gui.addFolder( 'graphics' );
    f.add( opts, 'ellipseTilt', -Math.PI, Math.PI ).step( .1 );
    f.add( opts, 'ellipseBaseRadius', 0, .5 );
    f.add( opts, 'ellipseAddedRadius', 0, .5 );
    f.add( opts, 'ellipseAxisMultiplierX', 0, 3 );
    f.add( opts, 'ellipseAxisMultiplierY', 0, 3 );
    f.add( opts, 'ellipseCX', 0, w );
    f.add( opts, 'ellipseCY', 0, h );
    f.add( opts, 'repaintAlpha', 0, 1 );
    gui.add( window, 'init' ).name( 'reset animation' );
    gui.add( window, 'LuukLamers' );
    
    loop();
    first = false;
  }
}
function loop() {
  
  window.requestAnimationFrame( loop );
  step();
  draw();
}
function step() {
  
  tick += .5;
  
  if( lines.length < opts.lineCount && Math.random() < .5 )
    lines.push( new Line );
  
  if( stars.length < opts.starCount )
    stars.push( new Star );
  
  lines.map( function( line ) { line.step(); } );
  stars.map( function( star ) { star.step(); } );
}
function draw() {
  
  ctx.shadowBlur = 0;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
  ctx.fillRect( 0, 0, w, h );
  
  ctx.globalCompositeOperation = 'lighter';
  
  ctx.translate( opts.ellipseCX, opts.ellipseCY );
  ctx.rotate( opts.ellipseTilt );
  ctx.scale( opts.ellipseAxisMultiplierX, opts.ellipseAxisMultiplierY );
  
  // ctx.shadowBlur here almost does nothing
  lines.map( function( line ) { line.draw(); } );
  
  ctx.scale( 1/opts.ellipseAxisMultiplierX, 1/opts.ellipseAxisMultiplierY );
  ctx.rotate( -opts.ellipseTilt );
  ctx.translate( -opts.ellipseCX, -opts.ellipseCY );
  
  stars.map( function( star ) { star.draw(); } );
}
function Line() {
  
  this.reset();
}
Line.prototype.reset = function() { 
  this.rad = Math.random() * Math.PI * 2,
  this.len = w * ( opts.ellipseBaseRadius + Math.random() * opts.ellipseAddedRadius );
  this.lenVel = opts.lineBaseVel + Math.random() * opts.lineAddedVel;
  
  this.x = this.px = Math.cos( this.rad ) * this.len;
  this.y = this.py = Math.sin( this.rad ) * this.len;
  
  this.life = this.originalLife = w * ( opts.lineBaseLife + Math.random() * opts.lineAddedLife );
  
  this.alpha = .2 + Math.random() * .8;
}
Line.prototype.step = function() {
  
  --this.life;
  
  var ratio = 1 - .1 *  this.life / this.originalLife;
  
  this.px = this.x;
  this.py = this.y;
  
  this.rad += opts.radVel;
  this.len -= this.lenVel;
  
  this.x = Math.cos( this.rad ) * this.len;
  this.y = Math.sin( this.rad ) * this.len;
  
  if( this.life <= 0 )
    this.reset();
}
Line.prototype.draw = function() {
  
  var ratio = Math.abs( this.life / this.originalLife - 1/2 );
  
  ctx.lineWidth = ratio * 5;
  ctx.strokeStyle = ctx.shadowColor = 'hsla(hue, 80%, light%, alp)'
    .replace( 'hue', tick + this.x / ( w * ( opts.ellipseBaseRadius + opts.ellipseAddedRadius ) ) * 100 )
    .replace( 'light', 75 - ratio * 150 )
    .replace( 'alp', this.alpha );
  ctx.beginPath();
  ctx.moveTo( this.px, this.py );
  ctx.lineTo( this.x, this.y );
  
  ctx.stroke();
}
function Star() {
  
  this.reset();
};
Star.prototype.reset = function() {
  
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.life = opts.starBaseLife + Math.random() * opts.starAddedLife;
}
Star.prototype.step = function() {
  
  --this.life;
  
  if( this.life <= 0 )
    this.reset();
}
Star.prototype.draw = function(){
  
  ctx.fillStyle = ctx.shadowColor = 'hsla(hue, 80%, 50%, .2)'
    .replace( 'hue', tick + this.x / w * 100 );
  ctx.shadowBlur = this.life;
  ctx.fillRect( this.x, this.y, 1, 1 );
};
window.addEventListener( 'resize', function() {
  
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  
  opts.ellipseCX = w / 2;
  opts.ellipseCY = h / 2;
  
  init();
} );
function LuukLamers() {
  
  var i = 0,
      array = [ 300, 74, 0.04, 0.1, 0.1, .55, 10, 100, 10, -.15, .18, .01, 3, 1, w / 2, h / 2, 0.02 ];
  
  for( var key in opts ) {
    
    opts[ key ] = array[ i ];
    ++i;
  }
  
  init();
}
init();
body {
  
  overflow: hidden;
}
canvas {
  
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}
a {
  
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc( 100% - 200px );
  top: calc( 100% - 130px );
}
img {
  width: 200px;
}
/*Add z-index to the controls */
.dg.ac {
    position: absolute;
    z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Make sure you have this included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script> 
<section id="intro" style="background-image: url('http://pungaleet.bplaced.net/Portfolio/img/Testrender.jpg');" class="intro">      
      <div class="overlay">
		<canvas id=c></canvas>
		<a href=http://hd4desktop.com/669-colours-circle-rainbow-hd-wallpaper/><img src=http://hd4desktop.com/images/m/a-colours-circle-rainbow-HD-Wallpaper.jpg ></a>
	  </div>
      <div class="content">
        <div class="container clearfix">
          <div class="row">
            <div class="col-md-8 col-md-offset-2 col-sm-12">
              <p class="italic">Hey there, buddy!</p>
              <h1>Welcome to my newly created Portfolio!</h1>
              <p class="italic">Check it out to find out stuff about me and my Services like Minecraft coding,</p>
			  <p></p>
			  <p class="italic"> League of Legends coaching and much more.</p>
			  <div id="navigation" class="">
			    <div class="scroll-down">
				<h5>Scroll down to see more</h5>
				<a href="#about"><i class="fa fa-angle-double-down"></i></a>
				</div>
			  
            </div>
          </div>
        </div>
      </div>
    </div>
</section>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium