How do I replicate text without increasing HTML?

I want to create a production where the text will be copied and the screen will be filled when I click the button
When I looked it up, nothing worked well

However, if you increase HTML, the design will collapse when you guess CSS based on the number of HTML
(e.g. nth-child or jQuery eq)

It will take a long time to fix this, so I would like to copy the text without blocking html if possible
Also, the production is for the design, so I felt it would be better to do it with css than to increase html directly, so I want to do it with CSS
text() but I can't specify the location, so I'm stuck

It will take a long time to fix this, so I would like to copy the text without blocking html if possible.

Also, the production is for the design, so I felt it would be better to do it with css than to increase html directly, so I want to do it with CSS

Even if I duplicate the text with text(), I can't specify the location, so I'm stuck

The original source is more complicated and doesn't fit all of them, but it looks like this easily.
(If you think that JQuery and CSS actually use the designation of the order system.)

<body>
    <div class="wrap">
        <section class="horror_phase3">
            <p> Scary sentence</p><button type="button">~?</button>
        </section>
    </div>
</body>

.wrap{
     height —100vh;
     width: 100%;
     position:relative;
}
 .horror_phase3{
     z-index:3;
     position:absolute;
     display:flex;
     width: 100%;
     height —100%;
     flex-direction:column;
     justify-content:center;
     align-items:center;
}
 .horror_phase3p{
     display: none;
}

$(".horror_phase3button").click(function(){
    let count = 1;
    let this1 = $(this);
    This1.prop("disabled", true);
    var counter = setInterval(function(){


        letp = this1.prev().clone();
        This1.parent().append(p.css({
            display: "block",
            position: "absolute",
            top —Math.floor(Math.random()*Math.floor(100)) .toString() + "%",
            right —Math.floor(Math.random()*Math.floor(100)) .toString() + "%"
        }));
        count++;
        if(count==100){
            clearInterval (counter);
        }
    }, 50);
});

html jquery css

2022-09-30 11:48

1 Answers

What the questioner wants to do will be realized by using the text-shadow property.However, since it is difficult to decorate the text in detail, if there is a style to apply to each text, it would be easier to duplicate the node.

This time, the original text is hidden by setting transparent to colorproperty, and setting none to user-selectproperty.The default shadow color value is currentColor, so if you do not set the shadow color when specifying the text-shadow property, the shadow will become transparent.^[1]^[1]

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3]. (But note that spread values and the inset keyword are not allowed.) Each layer shadows the element’s text and all its text decorations (composited together). If the color of the shadow is not specified, it defaultst currentColor, i.e.the shadow's color is taken from the element's colorproperty.

Also, since the unit of length that can be used when specifying the offset is of type <length>, vw, vh, ^[1]^[1]

Name:text-shadow
Value:none | [<color>?&<length>{2,3}]#
Initial:none
Applies to:all elements
Inherited:yes
Percentages:n/a
Computed value:either the keyword none or a list, each item consisting of three absolute lengths plus a computed color
Canonical order:pergrammar
Animation type: by computed value, creating none as a zero-item list and applying blank shadows (transparent00 0 ) as needed to match the longer list if the shorter list is otherwise compatible with the longer one

$(".horror_phase3button").on("click", function(){
  $(this).prop("disabled", true);

  var count = 0;
  var counter = setInterval(
    function(){
      varp = this.prev() [0],
        x = Math.floor(Math.random() * Math.floor(100)) + "vw",
        y = Math.floor(Math.random() * Math.floor(100)) + "vh",
        text_offset=[x,y,"#000"].join(""),
        text_shadow=p.style.textShadow;
      count =++ count;

      if(count==100){
        clearInterval (counter);
      }

      p.style.textShadow=text_shadow?
        text_shadow.concat(", ", text_offset):
        text_offset;
    } .bind($(this)) ,
    50
  );
});

*{
  margin:0;
}

.wrap{
  position:relative;
  width: 100%;
  height —100vh;
}

.horror_phase3{
  display:flex;
  z-index:3;
  position:absolute;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width: 100%;
  height —100%;
}

.horror_phase3p{
  position:absolute;
  top:0;
  left:0;
  color:transparent;
  -moz-user-select: none;
  - webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <section class="horror_phase3">
    <p> Scary Sentences </p>
    <button type="button">~?</button>
  </section>
</div>

2022-09-30 11:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656