teratail
回答率
85.49%
質問するログイン新規登録
トップに関する質問各要素の横へのアニメーション移動

編集履歴

質問編集履歴

2

コード修正

2021/06/10 07:28

投稿

mikan23
mikan23

スコア13

test CHANGED
File without changes
test CHANGED
@@ -78,6 +78,12 @@
78
78
 
79
79
  }
80
80
 
81
+ .container{
82
+
83
+ width: 270vw;
84
+
85
+ }
86
+
81
87
  .wrapper{
82
88
 
83
89
  display: flex;
@@ -88,9 +94,9 @@
88
94
 
89
95
  .box1 {
90
96
 
91
- height: 100px;
97
+ height: 200px;
92
-
98
+
93
- width:80%;
99
+ width: 90vw;
94
100
 
95
101
  background: pink;
96
102
 
@@ -100,9 +106,9 @@
100
106
 
101
107
  .box2 {
102
108
 
103
- height: 200px;
109
+ height: 500px;
104
-
110
+
105
- width:80%;
111
+ width: 90vw;
106
112
 
107
113
  background: #607964;
108
114
 
@@ -112,19 +118,39 @@
112
118
 
113
119
  .box3 {
114
120
 
115
- height: 150px;
121
+ height: 350px;
116
-
122
+
117
- width: 80%;
123
+ width: 90vw;
118
124
 
119
125
  background: #adf4e7;
120
126
 
121
-
127
+
122
128
 
123
129
  }
124
130
 
125
131
  .active1 {
126
132
 
133
+ transform: translateX(1.4%);
134
+
135
+ background: red;
136
+
137
+ transition: all 450ms 0s ease;
138
+
139
+ }
140
+
141
+ .active2 {
142
+
143
+ transform: translateX(-31.7%);
144
+
145
+ background: yellow;
146
+
147
+ transition: all 450ms 0s ease;
148
+
149
+ }
150
+
151
+ .active3 {
152
+
127
- transform: translateX(5%);
153
+ transform: translateX(-65%);
128
154
 
129
155
  background: blue;
130
156
 
@@ -132,33 +158,11 @@
132
158
 
133
159
  }
134
160
 
135
- .active2 {
136
-
137
- transform: translateX(0%);
138
-
139
- background: blue;
140
-
141
- transition: all 450ms 0s ease;
142
-
143
- }
144
-
145
- .active3 {
146
-
147
- transform: translateX(-5%);
148
-
149
- background: blue;
150
-
151
- transition: all 450ms 0s ease;
152
-
153
- }
154
-
155
-
156
-
157
161
  ```
158
162
 
159
163
  ```js
160
164
 
161
- var $box = $('.box1');
165
+ var $box = $('.container');
162
166
 
163
167
  var $button = $('.button1');
164
168
 
@@ -172,7 +176,7 @@
172
176
 
173
177
 
174
178
 
175
- var $box = $('.box2');
179
+ var $box = $('.container');
176
180
 
177
181
  var $button = $('.button2');
178
182
 

1

コードの修正

2021/06/10 07:28

投稿

mikan23
mikan23

スコア13

test CHANGED
File without changes
test CHANGED
@@ -44,7 +44,9 @@
44
44
 
45
45
 
46
46
 
47
- <div class=container>
47
+ <div class="container">
48
+
49
+ <div class="wrapper">
48
50
 
49
51
  <div class="box1">１</div>
50
52
 
@@ -54,12 +56,20 @@
54
56
 
55
57
  </div>
56
58
 
57
-
59
+ </div>
58
60
 
59
61
  ```
60
62
 
61
63
  ```css
62
64
 
65
+ body{
66
+
67
+ overflow-x: hidden;
68
+
69
+ }
70
+
71
+
72
+
63
73
  nav{
64
74
 
65
75
  display: flex;
@@ -68,12 +78,10 @@
68
78
 
69
79
  }
70
80
 
71
- .container{
81
+ .wrapper{
72
82
 
73
83
  display: flex;
74
84
 
75
- overflow: hidden;
76
-
77
85
  }
78
86
 
79
87
 
@@ -82,7 +90,7 @@
82
90
 
83
91
  height: 100px;
84
92
 
85
- width:80vw;
93
+ width:80%;
86
94
 
87
95
  background: pink;
88
96
 
@@ -94,7 +102,7 @@
94
102
 
95
103
  height: 200px;
96
104
 
97
- width:80vw;
105
+ width:80%;
98
106
 
99
107
  background: #607964;
100
108
 
@@ -106,21 +114,45 @@
106
114
 
107
115
  height: 150px;
108
116
 
109
- width: 80vw;
117
+ width: 80%;
110
118
 
111
119
  background: #adf4e7;
112
120
 
113
- transition: all 450ms 0s ease;
121
+
114
-
122
+
115
- }
123
+ }
116
-
124
+
117
- .active {
125
+ .active1 {
118
-
126
+
119
- transform: translateX(-50%);
127
+ transform: translateX(5%);
120
128
 
121
129
  background: blue;
122
130
 
131
+ transition: all 450ms 0s ease;
132
+
123
- }
133
+ }
134
+
135
+ .active2 {
136
+
137
+ transform: translateX(0%);
138
+
139
+ background: blue;
140
+
141
+ transition: all 450ms 0s ease;
142
+
143
+ }
144
+
145
+ .active3 {
146
+
147
+ transform: translateX(-5%);
148
+
149
+ background: blue;
150
+
151
+ transition: all 450ms 0s ease;
152
+
153
+ }
154
+
155
+
124
156
 
125
157
  ```
126
158
 
@@ -134,7 +166,7 @@
134
166
 
135
167
  $button.on('click', function(){
136
168
 
137
- $box.toggleClass('active');
169
+ $box.toggleClass('active1');
138
170
 
139
171
  });
140
172
 
@@ -148,13 +180,13 @@
148
180
 
149
181
  $button.on('click', function(){
150
182
 
151
- $box.toggleClass('active');
183
+ $box.toggleClass('active2');
152
184
 
153
185
  });
154
186
 
155
187
 
156
188
 
157
- var $box = $('.box3');
189
+ var $box = $('.container');
158
190
 
159
191
  var $button = $('.button3');
160
192
 
@@ -162,7 +194,7 @@
162
194
 
163
195
  $button.on('click', function(){
164
196
 
165
- $box.toggleClass('active');
197
+ $box.toggleClass('active3');
166
198
 
167
199
  });
168
200