質問編集履歴
2
ミスの修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
iPhoneXのページのよう
|
|
1
|
+
iPhoneXのページのような効果で文字を背景にする
|
test
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
### したいこと
|
|
2
2
|
|
|
3
|
-
iPhoneXの公式ページ([既に削除されているのでアーカイブです](https://web.archive.org/web/20171228033747/https://www.apple.com/jp/iphone-x/))では、Xの文字がスクロールで拡大されて
|
|
3
|
+
iPhoneXの公式ページ([既に削除されているのでアーカイブです](https://web.archive.org/web/20171228033747/https://www.apple.com/jp/iphone-x/))では、Xの文字がスクロールで拡大されて画像になっています。
|
|
4
4
|
|
|
5
|
-
これ
|
|
5
|
+
スクロール後にiPhoneXの画像が出てきますがこれを別の画像にしてそのままページの背景にしたいです。
|
|
6
6
|
|
|
7
7
|
### 試した事
|
|
8
8
|
|
1
一部コピペできてなかったところの修正とちょっと追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,11 +6,25 @@
|
|
|
6
6
|
|
|
7
7
|
### 試した事
|
|
8
8
|
|
|
9
|
-
JavaScriptでスクロール量を取得して変数に入れて、その変数 * 1000 + 'rem;'を対象の文字のサイズにしました。
|
|
9
|
+
JavaScriptでスクロール量を取得して変数に入れて、その変数 * 10000 + 'rem;'を対象の文字のサイズにしました。
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
これでできるはずですが、なぜかできませんでした。
|
|
12
|
+
|
|
13
|
+
また余計にスクロールされました(CSSで調整すると何故か文字が消える)
|
|
12
14
|
|
|
13
15
|
```JavaScript
|
|
16
|
+
|
|
17
|
+
window.onload = function(){
|
|
18
|
+
|
|
19
|
+
setInterval("scroll()", 100);
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function scroll() {
|
|
24
|
+
|
|
25
|
+
var y = window.pageYOffset ;
|
|
26
|
+
|
|
27
|
+
}
|
|
14
28
|
|
|
15
29
|
$(function() {
|
|
16
30
|
|
|
@@ -18,7 +32,7 @@
|
|
|
18
32
|
|
|
19
33
|
$("#example").css({
|
|
20
34
|
|
|
21
|
-
"font-size": y * 1000 + 'rem'
|
|
35
|
+
"font-size": y * 10000 + 'rem'
|
|
22
36
|
|
|
23
37
|
});
|
|
24
38
|
|
|
@@ -52,7 +66,9 @@
|
|
|
52
66
|
|
|
53
67
|
```
|
|
54
68
|
|
|
55
|
-
###
|
|
69
|
+
### 注意点(?)
|
|
70
|
+
|
|
71
|
+
- jQueryを利用しています。
|
|
56
72
|
|
|
57
73
|
- 出来るだけ多くの環境でできるものをお願いします。
|
|
58
74
|
|