Question

我正在使用https://www.kirupa.com/html5/the_falling_snow_effect.htm中的代码，事实证明，整个页面都在下雪，不仅仅是横幅div ...

// Array to store our Snowflake objects
var snowflakes = [];

// Global variables to store our browser's window size
var browserWidth;
var browserHeight;

// Specify the number of snowflakes you want visible
var numberOfSnowflakes = 50;

// Flag to reset the position of the snowflakes
var resetPosition = false;

// Handle accessibility
var enableAnimations = false;
var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

// Handle animation accessibility preferences 
function setAccessibilityState() {
  if (reduceMotionQuery.matches) {
    enableAnimations = false;
  } else {
    enableAnimations = true;
  }
}
setAccessibilityState();

reduceMotionQuery.addListener(setAccessibilityState);

//
// It all starts here...
//
function setup() {
  if (enableAnimations) {
    window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
    window.addEventListener("resize", setResetFlag, false);
  }
}
setup();

//
// Constructor for our Snowflake object
//
function Snowflake(element, speed, xPos, yPos) {
  // set initial snowflake properties
  this.element = element;
  this.speed = speed;
  this.xPos = xPos;
  this.yPos = yPos;
  this.scale = 1;

  // declare variables used for snowflake's motion
  this.counter = 0;
  this.sign = Math.random() < 0.5 ? 1 : -1;

  // setting an initial opacity and size for our snowflake
  this.element.style.opacity = (.9 + Math.random()) / 3;
}

//
// The function responsible for actually moving our snowflake
//
Snowflake.prototype.update = function() {
  // using some trigonometry to determine our x and y position
  this.counter += this.speed / 5000;
  this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
  this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
  this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);

  // setting our snowflake's position
  setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element);

  // if snowflake goes below the browser window, move it back to the top
  if (this.yPos > browserHeight) {
    this.yPos = -50;
  }
}

//
// A performant way to set your snowflake's position and size
//
function setTransform(xPos, yPos, scale, el) {
  el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
}

//
// The function responsible for creating the snowflake
//
function generateSnowflakes() {

  // get our snowflake element from the DOM and store it
  var originalSnowflake = document.querySelector(".snowflake");

  // access our snowflake element's parent container
  var snowflakeContainer = originalSnowflake.parentNode;
  snowflakeContainer.style.display = "block";

  // get our browser's size
  browserWidth = document.documentElement.clientWidth;
  browserHeight = document.documentElement.clientHeight;

  // create each individual snowflake
  for (var i = 0; i < numberOfSnowflakes; i++) {

    // clone our original snowflake and add it to snowflakeContainer
    var snowflakeClone = originalSnowflake.cloneNode(true);
    snowflakeContainer.appendChild(snowflakeClone);

    // set our snowflake's initial position and related properties
    var initialXPos = getPosition(50, browserWidth);
    var initialYPos = getPosition(50, browserHeight);
    var speed = 5 + Math.random() * 40;

    // create our Snowflake object
    var snowflakeObject = new Snowflake(snowflakeClone,
      speed,
      initialXPos,
      initialYPos);
    snowflakes.push(snowflakeObject);
  }

  // remove the original snowflake because we no longer need it visible
  snowflakeContainer.removeChild(originalSnowflake);

  moveSnowflakes();
}

//
// Responsible for moving each snowflake by calling its update function
//
function moveSnowflakes() {

  if (enableAnimations) {
    for (var i = 0; i < snowflakes.length; i++) {
      var snowflake = snowflakes[i];
      snowflake.update();
    }
  }

  // Reset the position of all the snowflakes to a new value
  if (resetPosition) {
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;

    for (var i = 0; i < snowflakes.length; i++) {
      var snowflake = snowflakes[i];

      snowflake.xPos = getPosition(50, browserWidth);
      snowflake.yPos = getPosition(50, browserHeight);
    }

    resetPosition = false;
  }

  requestAnimationFrame(moveSnowflakes);
}

//
// This function returns a number between (maximum - offset) and (maximum + offset)
//
function getPosition(offset, size) {
  return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
}

//
// Trigger a reset of all the snowflakes' positions
//
function setResetFlag(e) {
  resetPosition = true;
}

#snowflakeContainer {
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
}

.snowflake {
  position: fixed;
  background-color: #ffffff;
  user-select: none;
  z-index: 1000;
  pointer-events: none;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

<div class="mainbanner">
  <div id="snowflakeContainer">
    <span class="snowflake"></span>
  </div>
  <br>
  <center>
    <p class="topText" style="font-size:8vw;"> Welcome to the ultimate <br>sleepover experience</p><br><br><br>
    <p class="topText" style="font-size:4vw;"> By Ultimate Teepee Party</p>

    <br><br><br>
    <a class="btn_1" href="book.html">Book Your Party</a></center>


</div>

必须要有一种方法使其仅显示在该横幅div内部而不是整个页面内？

Answer 1

如果您通过检查元素查看snow demo page，您将意识到作者将整个html页面而不是使用div嵌入到页面中，即javascript <SVGPie PieData="@PieData" height="200" width="300"></SVGPie> <SVGDoughnut PieData="@PieData"></SVGDoughnut> @code { private List<PieDataModel> PieData = new List<PieDataModel>(); protected override void OnInitialized() { GenerateSamplePieData(); base.OnInitialized(); } private void GenerateSamplePieData() { PieDataModel PDM = new PieDataModel(); PDM.Color = "#ff0000"; PDM.Name = "Section 1"; PDM.Percent = 30.0; PieData.Add(PDM); PDM = new PieDataModel(); PDM.Color = "#ffff00"; PDM.Name = "Section 2"; PDM.Percent = 20.0; PieData.Add(PDM); PDM = new PieDataModel(); PDM.Color = "#0000ff"; PDM.Name = "Section 3"; PDM.Percent = 20.0; PieData.Add(PDM); PDM = new PieDataModel(); PDM.Color = "#00ff00"; PDM.Name = "Section 4"; PDM.Percent = 30.0; PieData.Add(PDM); } }是指浏览器宽度，因此，除非修改JS，否则该页面只能在整个页面中使用，由于相对位置处理不当，因此我认为原始代码没有任何效果。指的是以下工作演示，它使您可以在整个页面中显示积雪。如果只希望将效果应用于某个元素，请尝试根据元素位置修改脚本计算。或者您可以执行作者的操作，将文档嵌入整个页面中

JsFiddle

browserHeight = document.documentElement.clientHeight

仅向特定的div添加降雪效果

1 个答案: