回答編集履歴
1
ソースの修正
answer
CHANGED
|
@@ -6,18 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
参考：[Transparent text with text-shadow in IE](https://stackoverflow.com/questions/20482663/transparent-text-with-text-shadow-in-ie)
|
|
8
8
|
|
|
9
|
-
spreadに対応するブラウザは現状IEだけなので他のブラウザで同様の指定をするとエラーとなりtext-shadowそのものが無効になります。なのでIEかどうかを検知して処理を分岐させる必要があります。そこは質問者のほうでなんとかできると思うので頑張ってください。
|
|
9
|
+
spreadに対応するブラウザは現状IEだけなので他のブラウザで同様の指定をするとエラーとなりtext-shadowそのものが無効になります。~~なのでIEかどうかを検知して処理を分岐させる必要があります。そこは質問者のほうでなんとかできると思うので頑張ってください。~~
|
|
10
|
+
追記：参考資料を見直したらstyleを適用する順番でブラウザハックができるそうなので検証ソースも修正しました。IE用を後に設定すると他ブラウザでは指定が無効になるのでOKだそうな。
|
|
10
11
|
|
|
11
12
|
以下、検証用ソース。IE11とChromeで動作確認。
|
|
12
|
-
|
|
13
13
|
```html
|
|
14
14
|
<html>
|
|
15
15
|
|
|
16
16
|
<head>
|
|
17
|
+
|
|
17
18
|
<style type="text/css">
|
|
18
19
|
.main {
|
|
19
20
|
background-color: #123;
|
|
20
21
|
height: 1280px;
|
|
22
|
+
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.main .txt_wrap {
|
|
@@ -54,40 +56,51 @@
|
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
</style>
|
|
59
|
+
|
|
57
60
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
61
|
+
|
|
58
62
|
<script>
|
|
59
63
|
$(window).on("scroll", function() {
|
|
60
64
|
var main_txt = $("#main_txt");
|
|
61
65
|
var sct = $(this).scrollTop();
|
|
62
66
|
console.log("rgb(255, 255, 255) 0px 0px" + sct + "px");
|
|
67
|
+
|
|
63
68
|
if (sct > 25) {
|
|
64
69
|
//25よりスクロール量が多ければtrue
|
|
70
|
+
// ohter UA
|
|
71
|
+
main_txt.addClass("blur").css({
|
|
72
|
+
"text-shadow": "rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px"
|
|
73
|
+
});
|
|
65
74
|
//>=IE10 only
|
|
66
75
|
main_txt.addClass("blur").css({
|
|
67
76
|
"text-shadow": "rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px 0.01em"
|
|
68
77
|
});
|
|
69
|
-
// ohter UA
|
|
70
|
-
main_txt.addClass("blur").css({
|
|
71
|
-
|
|
78
|
+
//$('#main_txt').addClass("blur").css({"text-shadow":"rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px"});
|
|
72
|
-
|
|
79
|
+
|
|
73
80
|
} else {
|
|
74
81
|
main_txt.removeClass("blur").removeAttr('style');
|
|
82
|
+
//$('#main_txt').removeClass("blur").removeAttr('style');
|
|
75
83
|
}
|
|
76
84
|
console.log(main_txt.hasClass("blur"));
|
|
85
|
+
|
|
77
86
|
});
|
|
78
87
|
|
|
79
88
|
</script>
|
|
89
|
+
|
|
80
90
|
</head>
|
|
81
91
|
|
|
82
92
|
<body>
|
|
93
|
+
|
|
83
94
|
<div class="main">
|
|
84
95
|
<div class="txt_wrap" id="main_txt">
|
|
85
96
|
<h3>test</h3>
|
|
86
97
|
<p>testtesttesttest<br>testtesttest</p>
|
|
87
98
|
</div>
|
|
99
|
+
|
|
88
100
|
</div>
|
|
101
|
+
|
|
102
|
+
|
|
89
103
|
</body>
|
|
90
104
|
|
|
91
105
|
</html>
|
|
92
|
-
|
|
93
106
|
```
|