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

編集履歴

質問編集履歴

2

コード修正

2021/06/10 07:28

投稿

mikan23
mikan23

スコア13

title CHANGED
File without changes
body CHANGED
@@ -38,54 +38,56 @@
38
38
  display: flex;
39
39
  justify-content: center;
40
40
  }
41
+ .container{
42
+ width: 270vw;
43
+ }
41
44
  .wrapper{
42
45
  display: flex;
43
46
  }
44
47
 
45
48
  .box1 {
46
- height: 100px;
49
+ height: 200px;
47
- width:80%;
50
+ width: 90vw;
48
51
  background: pink;
49
52
  transition: all 450ms 0s ease;
50
53
  }
51
54
  .box2 {
52
- height: 200px;
55
+ height: 500px;
53
- width:80%;
56
+ width: 90vw;
54
57
  background: #607964;
55
58
  transition: all 450ms 0s ease;
56
59
  }
57
60
  .box3 {
58
- height: 150px;
61
+ height: 350px;
59
- width: 80%;
62
+ width: 90vw;
60
63
  background: #adf4e7;
61
-
64
+
62
65
  }
63
66
  .active1 {
64
- transform: translateX(5%);
67
+ transform: translateX(1.4%);
65
- background: blue;
68
+ background: red;
66
69
  transition: all 450ms 0s ease;
67
70
  }
68
71
  .active2 {
69
- transform: translateX(0%);
72
+ transform: translateX(-31.7%);
70
- background: blue;
73
+ background: yellow;
71
74
  transition: all 450ms 0s ease;
72
75
  }
73
76
  .active3 {
74
- transform: translateX(-5%);
77
+ transform: translateX(-65%);
75
78
  background: blue;
76
79
  transition: all 450ms 0s ease;
77
80
  }
78
-
79
81
  ```
80
82
  ```js
81
- var $box = $('.box1');
83
+ var $box = $('.container');
82
84
  var $button = $('.button1');
83
85
 
84
86
  $button.on('click', function(){
85
87
  $box.toggleClass('active1');
86
88
  });
87
89
 
88
- var $box = $('.box2');
90
+ var $box = $('.container');
89
91
  var $button = $('.button2');
90
92
 
91
93
  $button.on('click', function(){

1

コードの修正

2021/06/10 07:28

投稿

mikan23
mikan23

スコア13

title CHANGED
File without changes
body CHANGED
@@ -21,65 +21,81 @@
21
21
  <input class="button3" type="button" value="3">
22
22
  </nav>
23
23
 
24
- <div class=container>
24
+ <div class="container">
25
+ <div class="wrapper">
25
26
  <div class="box1">１</div>
26
27
  <div class="box2">２</div>
27
28
  <div class="box3">３</div>
28
29
  </div>
29
-
30
+ </div>
30
31
  ```
31
32
  ```css
33
+ body{
34
+ overflow-x: hidden;
35
+ }
36
+
32
37
  nav{
33
38
  display: flex;
34
39
  justify-content: center;
35
40
  }
36
- .container{
41
+ .wrapper{
37
42
  display: flex;
38
- overflow: hidden;
39
43
  }
40
44
 
41
45
  .box1 {
42
46
  height: 100px;
43
- width:80vw;
47
+ width:80%;
44
48
  background: pink;
45
49
  transition: all 450ms 0s ease;
46
50
  }
47
51
  .box2 {
48
52
  height: 200px;
49
- width:80vw;
53
+ width:80%;
50
54
  background: #607964;
51
55
  transition: all 450ms 0s ease;
52
56
  }
53
57
  .box3 {
54
58
  height: 150px;
55
- width: 80vw;
59
+ width: 80%;
56
60
  background: #adf4e7;
61
+
62
+ }
63
+ .active1 {
64
+ transform: translateX(5%);
65
+ background: blue;
57
66
  transition: all 450ms 0s ease;
58
67
  }
59
- .active {
68
+ .active2 {
60
- transform: translateX(-50%);
69
+ transform: translateX(0%);
61
70
  background: blue;
71
+ transition: all 450ms 0s ease;
62
72
  }
73
+ .active3 {
74
+ transform: translateX(-5%);
75
+ background: blue;
76
+ transition: all 450ms 0s ease;
77
+ }
78
+
63
79
  ```
64
80
  ```js
65
81
  var $box = $('.box1');
66
82
  var $button = $('.button1');
67
83
 
68
84
  $button.on('click', function(){
69
- $box.toggleClass('active');
85
+ $box.toggleClass('active1');
70
86
  });
71
87
 
72
88
  var $box = $('.box2');
73
89
  var $button = $('.button2');
74
90
 
75
91
  $button.on('click', function(){
76
- $box.toggleClass('active');
92
+ $box.toggleClass('active2');
77
93
  });
78
94
 
79
- var $box = $('.box3');
95
+ var $box = $('.container');
80
96
  var $button = $('.button3');
81
97
 
82
98
  $button.on('click', function(){
83
- $box.toggleClass('active');
99
+ $box.toggleClass('active3');
84
100
  });
85
101
  ```