JavaScript
x
17
17
1
window.addEventListener('scroll', () => {2
let scrollDistance = window.scrollY;3
4
if (window.innerWidth > 768) {5
document.querySelectorAll('.section1').forEach((el, i) => {6
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {7
document.querySelectorAll('.nav a').forEach((el) => {8
if (el.classList.contains('active')) {9
el.classList.remove('active');10
}11
});12
13
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');14
}15
});16
}17
});JavaScript
1
115
115
1
body {2
background: gray;3
padding: 100px;4
}5
6
.block-2 {7
display: flex;8
flex-direction: row;9
background: white;10
width: 100%;11
padding: 50px;12
height: auto;13
}14
15
.section-left {16
position: sticky;17
top: 10px;18
height: 300px;19
/* background: gray; */20
width: 100%;21
}22
23
.section-right {24
background: blue;25
width: 100%;26
}27
28
.wrap {29
margin: 10px;30
background: red;31
}32
33
.content {34
height: 500px;35
}36
37
.footer {38
width: 100%;39
height: 700px;40
background: red;41
}42
43
.nav {44
position: relative;45
left: 0;46
top: 0;47
width: 100%;48
background-color: white;49
/* padding: 20px;50
*/51
}52
53
.nav ul {54
display: flex;55
list-style-type: none;56
flex-direction: column;57
padding: 0;58
}59
60
.nav a {61
display: flex !important;62
text-decoration: none;63
color: black !important;64
display: inline-block;65
/* margin-right: 25px !important;66
*/67
}68
69
@media screen and (max-width: 1024px) {}70
71
.subtitle {72
73
opacity: 0;74
75
}76
77
78
79
.active {80
81
opacity: 1;82
83
}84
85
.content1 {86
position: absolute;87
background-color: red;88
/*opacity: 0;*/89
width: 100%;90
height: 300px;91
}92
93
.content2 {94
position: absolute;95
background-color: gray;96
/*opacity: 0;*/97
width: 100%;98
height: 300px;99
}100
101
.content3 {102
position: absolute;103
background-color: green;104
/*opacity: 0;*/105
width: 100%;106
height: 300px;107
}108
109
.content4 {110
position: absolute;111
background-color: blue;112
/*opacity: 0;*/113
width: 100%;114
height: 300px;115
}JavaScript
1
51
51
1
<body>2
3
4
<div class="block-2">5
<div class="section-left">6
<nav class="nav">7
<ul>8
9
<li><a href="" class="active subtitle">10
<div class="content1">11
<h1>O1</h1>12
</div>13
</a></li>14
15
<li><a href="" class="subtitle">16
<div class="content2">17
<h1>O2</h1>18
</div>19
</a></li>20
21
<li><a href="" class="subtitle">22
<div class="content3">23
<h1>O3</h1>24
</div>25
</a></li>26
27
<li><a href="" class="subtitle">28
<div class="content4">29
<h1>O4</h1>30
</div>31
</a></li>32
</ul>33
</nav>34
</div>35
<div class="section-right">36
<div class="section1 wrap">37
<div class="content">asdf</div>38
</div>39
<div class="wrap section1 ">40
<div class="content">asdf</div>41
</div>42
<div class="wrap section1">43
<div class="content">asdf</div>44
</div>45
<div class="wrap section1">46
<div class="content">asdf</div>47
</div>48
</div>49
</div>50
<div class="footer"></div>51
</body>How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Advertisement
Answer
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you’d like.
Here’s a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
JavaScript
1
4
1
div {2
transition: <property> <duration> <timing-function> <delay>;3
}4
JavaScript
1
11
11
1
#delay {2
font-size: 14px;3
transition-property: font-size;4
transition-duration: 4s;5
transition-delay: 2s;6
}7
8
#delay:hover {9
font-size: 36px;10
}11
JavaScript
1
17
17
1
.box {2
border-style: solid;3
border-width: 1px;4
display: block;5
width: 100px;6
height: 100px;7
background-color: #0000FF;8
transition: width 2s, height 2s, background-color 2s, transform 2s;9
}10
11
.box:hover {12
background-color: #FFCCCC;13
width: 200px;14
height: 200px;15
transform: rotate(180deg);16
}17
JavaScript
1
17
17
1
window.addEventListener('scroll', () => {2
let scrollDistance = window.scrollY;3
4
if (window.innerWidth > 768) {5
document.querySelectorAll('.section1').forEach((el, i) => {6
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {7
document.querySelectorAll('.nav a').forEach((el) => {8
if (el.classList.contains('active')) {9
el.classList.remove('active');10
}11
});12
13
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');14
}15
});16
}17
});JavaScript
1
134
134
1
body {2
background: gray;3
padding: 100px;4
}5
6
.block-2 {7
display: flex;8
flex-direction: row;9
background: white;10
width: 100%;11
padding: 50px;12
height: auto;13
}14
15
.section-left {16
position: sticky;17
top: 10px;18
height: 300px;19
/* background: gray; */20
width: 100%;21
}22
23
.section-right {24
background: blue;25
width: 100%;26
}27
28
.wrap {29
margin: 10px;30
background: red;31
}32
33
.content {34
height: 500px;35
}36
37
.footer {38
width: 100%;39
height: 700px;40
background: red;41
}42
43
.nav {44
position: relative;45
left: 0;46
top: 0;47
width: 100%;48
background-color: white;49
/* padding: 20px;50
*/51
}52
53
.nav ul {54
display: flex;55
list-style-type: none;56
flex-direction: column;57
padding: 0;58
}59
60
.nav a {61
display: flex !important;62
text-decoration: none;63
color: black !important;64
display: inline-block;65
/* margin-right: 25px !important;66
*/67
}68
69
@media screen and (max-width: 1024px) {}70
71
.subtitle {72
opacity: 0;73
transition:300ms;74
}75
76
77
.subtitle > div {78
transition:300ms;79
right:100%;80
}81
82
.subtitle > div h1 {83
opacity:0;84
position:relative;85
top:2em;86
transition:300ms;87
transition-delay:1s;88
}89
90
91
.active {92
opacity: 1;93
}94
95
.active > div {96
right:0;97
}98
99
.active > div h1 {100
opacity:1;101
top: 0;102
}103
104
.content1 {105
position: absolute;106
background-color: red;107
/*opacity: 0;*/108
width: 100%;109
height: 300px;110
}111
112
.content2 {113
position: absolute;114
background-color: gray;115
/*opacity: 0;*/116
width: 100%;117
height: 300px;118
}119
120
.content3 {121
position: absolute;122
background-color: green;123
/*opacity: 0;*/124
width: 100%;125
height: 300px;126
}127
128
.content4 {129
position: absolute;130
background-color: blue;131
/*opacity: 0;*/132
width: 100%;133
height: 300px;134
}JavaScript
1
51
51
1
<body>2
3
4
<div class="block-2">5
<div class="section-left">6
<nav class="nav">7
<ul>8
9
<li><a href="" class="active subtitle">10
<div class="content1">11
<h1>O1</h1>12
</div>13
</a></li>14
15
<li><a href="" class="subtitle">16
<div class="content2">17
<h1>O2</h1>18
</div>19
</a></li>20
21
<li><a href="" class="subtitle">22
<div class="content3">23
<h1>O3</h1>24
</div>25
</a></li>26
27
<li><a href="" class="subtitle">28
<div class="content4">29
<h1>O4</h1>30
</div>31
</a></li>32
</ul>33
</nav>34
</div>35
<div class="section-right">36
<div class="section1 wrap">37
<div class="content">asdf</div>38
</div>39
<div class="wrap section1 ">40
<div class="content">asdf</div>41
</div>42
<div class="wrap section1">43
<div class="content">asdf</div>44
</div>45
<div class="wrap section1">46
<div class="content">asdf</div>47
</div>48
</div>49
</div>50
<div class="footer"></div>51
</body>