teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードの編集

2020/05/02 11:24

投稿

rrgsn
rrgsn

スコア9

title CHANGED
File without changes
body CHANGED
@@ -20,13 +20,17 @@
20
20
  ```
21
21
 
22
22
  ```CS
23
+
24
+
23
- .img-wrap3 {
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-wrap3:before {
32
+ .img-animation:before {
29
- animation: img-wrap3 2s cubic-bezier(.4, 0, .2, 1) forwards;
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
- .img-ani .img-wrap3:before {
45
+ @keyframes img-opacity {
46
+ 0% {
42
- animation: img-wrap3 2s cubic-bezier(.4, 0, .2, 1) forwards;
47
+ opacity: 0;
48
+ }
43
49
  }
44
50
 
45
- @keyframes img-wrap3 {
51
+ @keyframes img-animation {
46
52
  100% {
47
- transform: translateX(-100%);
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