0

目的

ボタンをおすとテキストが複製されて画面が埋め尽くされる演出を作りたいです
調べてみてもうまく動くものがありませんでした

問題

ただ、HTMLを増やすとHTMLの数等でCSSを当てている所でデザインが崩れてしまいます
(例:nth-childやjQueryのeq)

  • これの直すのにかなりの時間がかかりそうなので、できればhtmlをふさやないままでテキストを複製したいです

  • また演出がデザインのためなので、じかにhtmlを増やしてしまうよりcssでやるほうが行儀がいいと感じたのでCSSでやりたいです

  • text()でテキストを複製してもその位置が指定できないのでつまってしまいました

ソース

元ソースはもっと複雑で全部のせれないですが、簡単にはこのようになっています
(実際はJQueryやCSSで順番系の指定を使ってると思っていただければ)

<body>
    <div class="wrap">
        <section class="horror_phase3">
            <p>怖い文章</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_phase3 p {
     display: none;
}
$(".horror_phase3 button").click(function() {
    let count = 1;
    let this1 = $(this);
    this1.prop("disabled", true);
    var counter = setInterval(function() {


        let p = 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);
});

1 件の回答 1

3

質問者さんの行ないたいことは、text-shadow プロパティを用いることで実現出来ると思います。しかし、この方法ではテキストに細かい装飾を行なうことが難しいため、もし各テキストに対して適用するスタイルなどが存在する場合は、ノードを複製したほうが簡単だと思います。

今回は、color プロパティに transparent を設定した上で、user-select プロパティに none を設定することで元テキストを隠しています。影の色のデフォルト値は currentColor なので、text-shadow プロパティを指定する際に影の色を設定しなければ、影は透明になってしまいます[1]

§ 4. Text Shadows: the text-shadow property[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 defaults to currentColor, i.e. the shadow’s color is taken from the element’s color property.

また、オフセットを指定する際に使用出来る長さの単位は <length> 型であるため、必然的に使用する単位は vw, vh になります[1]

§ 4. Text Shadows: the text-shadow property[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: per grammar
  • Animation type: by computed value, treating none as a zero-item list and appending blank shadows (transparent 0 0 0) as needed to match the longer list if the the shorter list is otherwise compatible with the longer one

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

  var count = 0;
  var counter = setInterval(
    function() {
      var p = 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_phase3 p {
  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>怖い文章</p>
    <button type="button">~ですか?</button>
  </section>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。