Question

基本上，我正在尝试为背景创建动画。我需要调整代码某些方面的大小。基本上有2个部分。第1部分和第2部分。我需要调整第2部分的大小。我希望第2部分位于第1部分的底部（或深蓝色部分）。尺寸可以适中，但我只希望位于底部。这是第1部分和第2部分的代码。第1部分是HOC实验室或浮动标题，第2部分是涟漪，根据您是否单击链接来显示Manan或Canvas。这是帮助参考的链接。我基本上使用了他们的代码，但是更改了某些方面的名称。 https://codepen.io/chingy/pen/mddyKWZ和https://codepen.io/camilleguy/pen/oNNpvMY

第1部分的HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
        <div id="wrapper">
        <div id="back">
            <h1>HOC Lab</h1>
        </div>
        <div id="front">
            <h1>HOC Lab</h1>
        </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

第1部分的CSS

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab:700&display=swap');
 html, body {
     margin: 0;
     padding: 0;
}
 html {
     overflow: hidden;
}
 #wrapper {
     position: absolute;
     margin: 0;
     padding: 0;
     width: 100vw;
     height: 100vh;
     top: 0;
     left: 0;
}
 #back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50%;
     background-color: #97afe6;
     overflow: hidden;
}
 #back h1 {
     color: white;
     bottom: 0;
     transform: translate(-50%, 40%) scale(0.98);
}
 #front {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 50%;
     background-color: #6a8fe6;
     overflow: hidden;
}
 #front h1 {
     color: #97afe6;
     top: 0;
     transform: translate(-50%, -60%);
}
 h1 {
     font-family: 'Zilla Slab', serif;
     font-weight: bold;
     font-size: 8.5vw;
     position: absolute;
     display: block;
     left: 50%;
     margin: 0;
     will-change: transform;
}

第1部分的JavaScript

// Global settings
const param = {
    bg: {
        DYNAMIC_BACKGROUND: true,
        MAX_BACKGROUND_ROTATION: 10,
        PARALLAXE_INTENSITY: 0.8,
        PARALLAXE_DEPTH: 6,
        PARALLAXE_XY_RATIO: 5,
        PARALLAXE_Z_RATIO: 0.99
    }
};

(function backgroundManager() {
    "use strict";

    if (!param.bg.DYNAMIC_BACKGROUND) return;


    // Function variables
    let vars = {
        wrapper: document.getElementById("wrapper"),
        h1back: document.getElementById("back").firstElementChild,
        h1front: document.getElementById("front").firstElementChild,
        bgHeight: null,
        bgWidth: null,
        bgScale: 1,
        bgRotate: 0,
        bgParallaxe: {
            x: 0,
            y: 0
        },
        bgMoveReady: true
    };


    // Initialization
    adjustBackground();
    window.addEventListener('mousemove', rotateBackground);
    window.addEventListener('resize', adjustBackground);
  setTimeout(() => {
        vars.wrapper.style.transition = `transform 0.25s cubic-bezier(0, 0, .23, .96)`;
    }, 1);


    // Functions

    function windowDiagonale() {

        let h = window.innerHeight,
            w = window.innerWidth;

        return Math.sqrt(h * h + w * w);
    }

    function adjustBackground() {

        let diag = windowDiagonale(),
            ratio;

        vars.bgHeight = vars.wrapper.offsetHeight;
        vars.bgWidth = vars.wrapper.offsetWidth;

        ratio = diag / Math.min(vars.bgHeight, vars.bgWidth);
        vars.bgScale = ratio;
        updateBackground();
    }

    function rotateBackground(event) {

        let xPos = event.clientX,
            yPos = event.clientY,
            xAmount = -(xPos - vars.bgWidth / 2) / (vars.bgWidth / 2),
            yAmount = -(yPos - vars.bgHeight / 2) / (vars.bgHeight / 2);

        vars.bgRotate = xAmount * param.bg.MAX_BACKGROUND_ROTATION;
        vars.bgParallaxe.x = -param.bg.PARALLAXE_INTENSITY * xAmount;
        vars.bgParallaxe.y = -param.bg.PARALLAXE_INTENSITY * yAmount;

        updateBackground();
    }

    function updateBackground() {
      if(!vars.bgMoveReady) return;
        let backTranslateX = -50 + vars.bgParallaxe.x * (1 / param.bg.PARALLAXE_DEPTH) * param.bg.PARALLAXE_XY_RATIO,
            backTranslateY = 45 + vars.bgParallaxe.y * 1 / param.bg.PARALLAXE_DEPTH,
            backScale = param.bg.PARALLAXE_Z_RATIO * 1 / vars.bgScale,
            backRotate = -vars.bgRotate,
            frontTranslateX = -50 + vars.bgParallaxe.x,
            frontTranslateY = -55 + vars.bgParallaxe.y * param.bg.PARALLAXE_XY_RATIO,
            frontScale = 1 / vars.bgScale,
            frontRotate = -vars.bgRotate;

      vars.bgMoveReady = false;

        vars.wrapper.style.transform = `scale(${vars.bgScale}) rotate(${vars.bgRotate}deg)`;
        vars.h1back.style.transform = `translate(${backTranslateX}%, ${backTranslateY}%) scale(${backScale}) rotate(${backRotate}deg)`;
        vars.h1front.style.transform = `translate(${frontTranslateX}%, ${frontTranslateY}%) scale(${frontScale}) rotate(${frontRotate}deg)`;

      setTimeout(() => {
        vars.bgMoveReady = true
    }, 16);
    }
}());

第2部分的HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script src="script.js"></script>
  </body>
</html>

第2部分的CSS

html, body, canvas {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;    
  background: #020120;    
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

p {
  font-size: 0.8em;
  font-weight: bold;
  position: absolute;
  width: 100%;
  bottom: 5%;
  left: 0;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  color: white;
}

第2部分的JavaScript

var fps = 60,
    interval = 1000 / fps,
    lastTime = (new Date()).getTime(),
    currentTime = 0,
    delta = 0;

var mouseX = 0, mouseY = 0,
    mouseRadius = 75,
    mousePower = 15,
    particleDensity = 10,
    particleStiffness = 0.15,
    particleOffset = 0,
    particleFriction = 0.9,
    particles = [],
    text = 'Manan!',
    isPopulated = false;


(function() {
  "use strict";

  const canvas = document.getElementById('canvas');  
  const context = canvas.getContext('2d');

  function init() {

      bindMouse();

      window.onresize();
      window.requestAnimationFrame(render);
  }  

  window.onresize = function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;  
  };



  class Particle {
      constructor(canvas, context, x, y) {
          this.canvas = canvas;
          this.context = context;
          this.x = x;
          this.y = y;
          this.radius = particleDensity / 2;        
          this.spring = {
              x: x, y: y
          };

          this.dX = 0;           
          this.dY = 0;
      }

      getDistanceTo(x, y) {
          let dX = x - this.x,
              dY = y - this.y;
          return {
            x: dX, y: dY,
            dist: Math.sqrt(dX * dX + dY * dY)
          };
      }



      repulseTo(x, y) {
          let distance = this.getDistanceTo(x, y),
              repulseAngle = Math.atan2(distance.y, distance.x),
              repulseForce = (-1 * Math.pow(mousePower, 2)) / distance.dist;

          this.dX += Math.cos(repulseAngle) * repulseForce;
          this.dY += Math.sin(repulseAngle) * repulseForce;        
      }

      springTo() {
          this.dX += (this.spring.x - this.x) * particleStiffness;
          this.dY += (this.spring.y - this.y) * particleStiffness;        
      }

      update() {
          this.springTo();

          this.dX *= particleFriction;
          this.dY *= particleFriction;

          this.x += this.dX;
          this.y += this.dY;
      }

      draw() { 
          this.context.fillStyle = 'white';

          this.context.beginPath();
          this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
          this.context.fill();        
      }
  }




  function bindMouse() {
      canvas.addEventListener('mousemove', (event) => {
          mouseX = event.clientX - canvas.offsetLeft;
          mouseY = event.clientY - canvas.offsetTop;
      });
  }


  function createParticle(x, y) {
      particles.push(new Particle(canvas, context, x, y));
  }

  function convertTextToParticle() {
      context.save();
      context.fillStyle = "#000000";
      context.font = "Bold 200px Arial";
      let textSize = context.measureText(text),
          textHeight = 75;
      context.translate((canvas.width / 2) - (textSize.width / 2), canvas.height / 2);
      context.fillText(text, 0, textHeight);
      context.restore();    


      let image = context.getImageData(0, 0, canvas.width, canvas.height);
      particles = [];
      for(var y = 0; y < canvas.height; y += particleDensity) {
          for(var x = 0; x < canvas.width; x += particleDensity) {
              let opacity = image.data[((x + (y * canvas.width)) * 4 + 3)];
              if(opacity > 0) {
                  createParticle(x, y);
              }
          }
      }    


      isPopulated = true;
  }





  function update() {
      for(var i = 0; i < particles.length; i++) {
          let p = particles[i];

          if(p.getDistanceTo(mouseX, mouseY).dist <= mouseRadius + p.radius) {
              p.repulseTo(mouseX, mouseY);        
          }


          p.update();
      }
  }

  function draw() {
      for(var i = 0; i < particles.length; i++) {
          let p = particles[i];
          p.draw();
      }
  }

  function clear() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  }  

  function render() {
      currentTime = (new Date()).getTime();
      delta = currentTime - lastTime;

      if(delta > interval) {

          update();

          clear();

          if(!isPopulated) {
              convertTextToParticle();
          } else {
              draw(); 
          }

          lastTime = currentTime - (delta % interval);
      }

      window.requestAnimationFrame(() => {
          render();
      });    
  }  

  init();

})();

需要帮助调整页面零件的大小

0 个答案: