質問編集履歴
1
コードの編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,13 +20,17 @@
|
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
```CS
|
|
23
|
+
|
|
24
|
+
|
|
23
|
-
.img-
|
|
25
|
+
.img-animation {
|
|
26
|
+
animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
|
|
24
27
|
overflow: hidden;
|
|
25
28
|
position: relative;
|
|
26
29
|
}
|
|
27
30
|
|
|
31
|
+
|
|
28
|
-
.img-
|
|
32
|
+
.img-animation:before {
|
|
29
|
-
animation: img-
|
|
33
|
+
animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
|
|
30
34
|
background: #fff;
|
|
31
35
|
bottom: 0;
|
|
32
36
|
content: '';
|
|
@@ -38,13 +42,15 @@
|
|
|
38
42
|
z-index: 1;
|
|
39
43
|
}
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
@keyframes img-opacity {
|
|
46
|
+
0% {
|
|
42
|
-
|
|
47
|
+
opacity: 0;
|
|
48
|
+
}
|
|
43
49
|
}
|
|
44
50
|
|
|
45
|
-
@keyframes img-
|
|
51
|
+
@keyframes img-animation {
|
|
46
52
|
100% {
|
|
47
|
-
transform: translateX(
|
|
53
|
+
transform: translateX(100%);
|
|
48
54
|
}
|
|
49
55
|
}
|
|
50
56
|
|
|
@@ -55,7 +61,7 @@
|
|
|
55
61
|
|
|
56
62
|
```JS
|
|
57
63
|
|
|
58
|
-
(function() {
|
|
64
|
+
$(window).on(function() {
|
|
59
65
|
const image = document.querySelectorAll('.img-wrap3');
|
|
60
66
|
|
|
61
67
|
const observer = new IntersectionObserver(function(entries) {
|
|
@@ -71,6 +77,8 @@
|
|
|
71
77
|
Array.prototype.forEach.call(image, function(img) {
|
|
72
78
|
observer.observe(img);
|
|
73
79
|
});
|
|
80
|
+
})
|
|
81
|
+
|
|
74
82
|
```
|
|
75
83
|
|
|
76
84
|
|