質問編集履歴

2

全文追記します

2020/08/28 07:25

投稿

hati3693
hati3693

スコア24

test CHANGED
File without changes
test CHANGED
@@ -16,12 +16,132 @@
16
16
 
17
17
  ```html
18
18
 
19
+ <!DOCTYPE html>
20
+
21
+ <html lang="ja">
22
+
23
+ <head>
24
+
25
+ <meta charset=utf-8>
26
+
27
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
28
+
29
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">
30
+
31
+ <meta name="format-detection" content="telephone=no">
32
+
33
+ <meta name="apple-mobile-web-app-capable" content="yes">
34
+
35
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
36
+
37
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
38
+
39
+ <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
40
+
41
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
42
+
43
+ </head>
44
+
45
+ <style>
46
+
47
+ #main_contents {
48
+
49
+ overflow: hidden;
50
+
51
+ width: 125%;
52
+
53
+ position: absolute;
54
+
55
+ left: 50%;
56
+
57
+ transform: translateX(-50%);
58
+
59
+ z-index: 100;
60
+
61
+ height: 100VH;
62
+
63
+ z-index: 100;
64
+
65
+ }
66
+
67
+ #main_contents img {
68
+
69
+ width: 100%;
70
+
71
+ position: absolute;
72
+
73
+ bottom: 0;
74
+
75
+ }
76
+
77
+ </style>
78
+
79
+ <body onload = "initMap()" id="toplink">
80
+
19
81
  <div id="main_contents">
20
82
 
21
83
  <img src="img/1.jpg" />
22
84
 
23
85
  </div>
24
86
 
87
+ <script>
88
+
89
+ $('#main_contents').delay(500).fadeIn(1000, 1);
90
+
91
+ var footerOffsetTop = $('#main_contents img').offset().bottom;// 移動先の位置を取得します
92
+
93
+ $('#main_contents img').css({'position':'absolute','bottom':footerOffsetTop})
94
+
95
+ $('#main_contents img').delay(2000).animate({
96
+
97
+ top: ''
98
+
99
+ },5800,"swing",function(){
100
+
101
+ $('#main_contents').delay(1000).fadeTo(2000, 0.01, function(){
102
+
103
+ $(this).slideUp(150, function() {
104
+
105
+ $(this).remove();
106
+
107
+ });
108
+
109
+ });
110
+
111
+ });
112
+
113
+ let el = document.querySelector('#main_contents img');
114
+
115
+ let wrapper = document.querySelector('#main_contents');
116
+
117
+ wrapper.addEventListener('mouseenter', addWillChange);
118
+
119
+ el.addEventListener('animationEnd', removeWillChange);
120
+
121
+ function addWillChange() {
122
+
123
+ let target = this.children[0];
124
+
125
+ target.style.willChange = 'opacity';
126
+
127
+ }
128
+
129
+ function removeWillChange() {
130
+
131
+ this.style.willChange = 'unset';
132
+
133
+ }
134
+
135
+
136
+
137
+ </script>
138
+
139
+ </body>
140
+
141
+ </html>
142
+
143
+
144
+
25
145
  ```
26
146
 
27
147
  ```css

1

コンソールエラー追記

2020/08/28 07:25

投稿

hati3693
hati3693

スコア24

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,6 @@
1
- 縦長画像を下から上に動かすアニメーションがIEだけ動きません。
1
+ 縦長画像を下から上に動かすアニメーションがIEだけ正常に動きません。
2
+
3
+ 下から上のアニメが無くいきなり上に飛びます。
2
4
 
3
5
  ほかの主要ブラウザは動きましたが、どうにかしてIEも対応できないでしょうか。
4
6
 
@@ -81,3 +83,21 @@
81
83
  });
82
84
 
83
85
  ```
86
+
87
+
88
+
89
+ コンソールエラー
90
+
91
+ DOM7011: このページのコードによって、バックワード キャッシュとフォワード キャッシュが無効になりました。詳細については、http://go.microsoft.com/fwlink/?LinkID=291337 を参照してください。
92
+
93
+
94
+
95
+ HTML1300: ナビゲーションが発生しました。
96
+
97
+
98
+
99
+ SEC7113: CSS は、MIME の種類が一致しないため、無視されました
100
+
101
+
102
+
103
+ SCRIPT5009: 'initMap' は定義されていません。