回答編集履歴

2

変更

2021/05/10 10:15

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -1,4 +1,6 @@
1
1
  勘でテキトウに修正したら動いたのでどうぞ。
2
+
3
+ 回答に入り切らなかったので2分割してコメントにも書いてます。
2
4
 
3
5
  ```html
4
6
 

1

コード編集

2021/05/10 10:15

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -1,7 +1,131 @@
1
1
  勘でテキトウに修正したら動いたのでどうぞ。
2
2
 
3
- ```
3
+ ```html
4
4
 
5
- <!DOCTYPE HTML><html><head> <title></title> <style>*{box-sizing: border-box;}html, body{width: 100%; height: 100%;}body{margin: 0; overflow: hidden; background: #222; font-family: monospace;}h1{margin-top: 0;}button{font-family: monospace; border: 2px solid tomato; background: transparent; width: 250px; font-size: 1.2em; padding: 10px 0; border-radius: 5px; display: block; cursor: pointer; margin: 1em auto;}article{width: 80%; margin: auto; font-size: 2em; top: 50%; position: relative; transform: translateY(-50%);}</style></head><body> <article> <h1 id="headline_01">英語</h1> <p id="text_01">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p><h1 id="headline_02">数学</h1> <p id="text_02">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p><h1 id="headline_03">国語</h1> <p id="text_03">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p><h1 id="headline_04">理科</h1> <p id="text_04">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p><h1 id="headline_05">社会</h1> <p id="text_05">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p><button id="shuffler">リセット</button> </article> <script type="text/javascript">function WordShuffler(holder, opt){var that=this; var time=0; this.now; this.then=Date.now(); this.delta; this.currentTimeOffset=0; this.word=null; this.currentWord=null; this.currentCharacter=0; this.currentWordLength=0; var options={fps: 20, timeOffset: 5, textColor: '#000', fontSize: "50px", useCanvas: false, mixCapital: false, mixSpecialCharacters: false, needUpdate: true, colors: [ '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b']}if (typeof opt !="undefined"){for (key in opt){options[key]=opt[key];}}this.needUpdate=true; this.fps=options.fps; this.interval=1000 / this.fps; this.timeOffset=options.timeOffset; this.textColor=options.textColor; this.fontSize=options.fontSize; this.mixCapital=options.mixCapital; this.mixSpecialCharacters=options.mixSpecialCharacters; this.colors=options.colors; this.useCanvas=options.useCanvas; this.chars=[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; this.specialCharacters=[ '!', '§', '$', '%', '&', '/', '(', ')', '=', '?', '_', '<', '>', '^', '°', '*', '#', '-', ':', ';', '~'] if (this.mixSpecialCharacters){this.chars=this.chars.concat(this.specialCharacters);}this.getRandomColor=function (){var randNum=Math.floor(Math.random() * this.colors.length); return this.colors[randNum];}//if Canvas this.position={x: 0, y: 50}//if DOM if (typeof holder !="undefined"){this.holder=holder;}if (!this.useCanvas && typeof this.holder=="undefined"){console.warn('Holder must be defined in DOM Mode. Use Canvas or define Holder');}this.getRandCharacter=function (characterToReplace){if (characterToReplace==" "){return ' ';}var randNum=Math.floor(Math.random() * this.chars.length); var lowChoice=-.5 + Math.random(); var picketCharacter=this.chars[randNum]; var choosen=picketCharacter.toLowerCase(); if (this.mixCapital){choosen=lowChoice < 0 ? picketCharacter.toLowerCase() : picketCharacter;}return choosen;}this.writeWord=function (word){this.word=word; this.currentWord=word.split(''); this.currentWordLength=this.currentWord.length;}this.generateSingleCharacter=function (color, character){var span=document.createElement('span'); span.style.color=color; span.innerHTML=character; return span;}this.updateCharacter=function (time){this.now=Date.now(); this.delta=this.now - this.then; if (this.delta > this.interval){this.currentTimeOffset++; var word=[]; if (this.currentTimeOffset===this.timeOffset && this.currentCharacter !==this.currentWordLength){this.currentCharacter++; this.currentTimeOffset=0;}for (var k=0; k < this.currentCharacter; k++){word.push(this.currentWord[k]);}for (var i=0; i < this.currentWordLength - this.currentCharacter; i++){word.push(this.getRandCharacter(this.currentWord[this.currentCharacter + i]));}if (that.useCanvas){c.clearRect(0, 0, stage.x * stage.dpr, stage.y * stage.dpr); c.font=that.fontSize + " sans-serif"; var spacing=0; word.forEach(function (w, index){if (index > that.currentCharacter){c.fillStyle=that.getRandomColor();}else{c.fillStyle=that.textColor;}c.fillText(w, that.position.x + spacing, that.position.y); spacing +=c.measureText(w).width;});}else{if (that.currentCharacter===that.currentWordLength){that.needUpdate=false;}this.holder.innerHTML=''; word.forEach(function (w, index){var color=null if (index > that.currentCharacter){color=that.getRandomColor();}else{color=that.textColor;}that.holder.appendChild(that.generateSingleCharacter(color, w));});}this.then=this.now - (this.delta % this.interval);}}this.restart=function (){this.currentCharacter=0; this.needUpdate=true;}function update(time){time++; if (that.needUpdate){that.updateCharacter(time);}requestAnimationFrame(update);}this.writeWord(this.holder.innerHTML); update(time);}var headline_11=document.getElementById('headline_01'); var headline_12=document.getElementById('headline_02'); var headline_13=document.getElementById('headline_03'); var headline_14=document.getElementById('headline_04'); var headline_15=document.getElementById('headline_05'); var text=document.getElementById('text'); var shuffler=document.getElementById('shuffler'); var headText=new WordShuffler(headline_11,{textColor: '#fff', timeOffset: 18, mixCapital: true, mixSpecialCharacters: true}); var headText2=new WordShuffler(headline_12,{textColor: '#fff', timeOffset: 18, mixCapital: true, mixSpecialCharacters: true}); var headText3=new WordShuffler(headline_13,{textColor: '#fff', timeOffset: 18, mixCapital: true, mixSpecialCharacters: true}); var headText4=new WordShuffler(headline_14,{textColor: '#fff', timeOffset: 18, mixCapital: true, mixSpecialCharacters: true}); var headText5=new WordShuffler(headline_15,{textColor: '#fff', timeOffset: 18, mixCapital: true, mixSpecialCharacters: true}); var pText=new WordShuffler(text_01,{textColor: '#fff', timeOffset: 2}); var pText2=new WordShuffler(text_02,{textColor: '#fff', timeOffset: 2}); var pText3=new WordShuffler(text_03,{textColor: '#fff', timeOffset: 2}); var pText4=new WordShuffler(text_04,{textColor: '#fff', timeOffset: 2}); var pText5=new WordShuffler(text_05,{textColor: '#fff', timeOffset: 2}); var buttonText=new WordShuffler(shuffler,{textColor: 'tomato', timeOffset: 10}); shuffler.addEventListener('click', function (){headText.restart(); pText.restart(); headText2.restart(); pText2.restart(); headText3.restart(); pText3.restart(); headText4.restart(); pText4.restart(); headText5.restart(); pText5.restart(); buttonText.restart();}); </script> </body></html>
5
+ <!DOCTYPE HTML>
6
+
7
+ <html>
8
+
9
+ <head>
10
+
11
+ <title></title>
12
+
13
+ <style>
14
+
15
+ * {
16
+
17
+ box-sizing: border-box;
18
+
19
+ }
20
+
21
+
22
+
23
+ html,
24
+
25
+ body {
26
+
27
+ width: 100%;
28
+
29
+ height: 100%;
30
+
31
+ }
32
+
33
+
34
+
35
+ body {
36
+
37
+ margin: 0;
38
+
39
+ overflow: hidden;
40
+
41
+ background: #222;
42
+
43
+ font-family: monospace;
44
+
45
+ }
46
+
47
+
48
+
49
+ h1 {
50
+
51
+ margin-top: 0;
52
+
53
+ }
54
+
55
+
56
+
57
+ button {
58
+
59
+ font-family: monospace;
60
+
61
+ border: 2px solid tomato;
62
+
63
+ background: transparent;
64
+
65
+ width: 250px;
66
+
67
+ font-size: 1.2em;
68
+
69
+ padding: 10px 0;
70
+
71
+ border-radius: 5px;
72
+
73
+ display: block;
74
+
75
+ cursor: pointer;
76
+
77
+ margin: 1em auto;
78
+
79
+ }
80
+
81
+
82
+
83
+ article {
84
+
85
+ width: 80%;
86
+
87
+ margin: auto;
88
+
89
+ font-size: 2em;
90
+
91
+ top: 50%;
92
+
93
+ position: relative;
94
+
95
+ transform: translateY(-50%);
96
+
97
+ }
98
+
99
+ </style>
100
+
101
+ </head>
102
+
103
+ <body>
104
+
105
+ <article>
106
+
107
+ <h1 id="headline_01">英語</h1>
108
+
109
+ <p id="text_01">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
110
+
111
+ <h1 id="headline_02">数学</h1>
112
+
113
+ <p id="text_02">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
114
+
115
+ <h1 id="headline_03">国語</h1>
116
+
117
+ <p id="text_03">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
118
+
119
+ <h1 id="headline_04">理科</h1>
120
+
121
+ <p id="text_04">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
122
+
123
+ <h1 id="headline_05">社会</h1>
124
+
125
+ <p id="text_05">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
126
+
127
+ <button id="shuffler">リセット</button>
128
+
129
+ </article>
6
130
 
7
131
  ```