Skip to content
Advertisement

FadeInLeft effect when changing content

window.addEventListener('scroll', () => {
    let scrollDistance = window.scrollY;

    if (window.innerWidth > 768) {
        document.querySelectorAll('.section1').forEach((el, i) => {
            if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
                document.querySelectorAll('.nav a').forEach((el) => {
                    if (el.classList.contains('active')) {
                        el.classList.remove('active');
                    }
                });

                document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
            }
        });
    }
});
body {
  background: gray;
  padding: 100px;
}

.block-2 {
  display: flex;
  flex-direction: row;
  background: white;
  width: 100%;
  padding: 50px;
  height: auto;
}

.section-left {
  position: sticky;
  top: 10px;
  height: 300px;
  /* background: gray; */
  width: 100%;
}

.section-right {
  background: blue;
  width: 100%;
}

.wrap {
  margin: 10px;
  background: red;
}

.content {
  height: 500px;
}

.footer {
  width: 100%;
  height: 700px;
  background: red;
}

.nav {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background-color: white;
  /*     padding: 20px;
*/
}

.nav ul {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0;
}

.nav a {
  display: flex !important;
  text-decoration: none;
  color: black !important;
  display: inline-block;
  /*     margin-right: 25px !important;
 */
}

@media screen and (max-width: 1024px) {}

.subtitle {

  opacity: 0;

}



.active {

  opacity: 1;

}

.content1 {
  position: absolute;
  background-color: red;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content2 {
  position: absolute;
  background-color: gray;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content3 {
  position: absolute;
  background-color: green;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content4 {
  position: absolute;
  background-color: blue;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}
<body>


  <div class="block-2">
    <div class="section-left">
      <nav class="nav">
        <ul>

          <li><a href="" class="active subtitle">
              <div class="content1">
                <h1>O1</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content2">
                <h1>O2</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content3">
                <h1>O3</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content4">
                <h1>O4</h1>
              </div>
            </a></li>
        </ul>
      </nav>
    </div>
    <div class="section-right">
      <div class="section1 wrap">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1 ">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</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

div {
    transition: <property> <duration> <timing-function> <delay>;
}

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}


window.addEventListener('scroll', () => {
    let scrollDistance = window.scrollY;

    if (window.innerWidth > 768) {
        document.querySelectorAll('.section1').forEach((el, i) => {
            if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
                document.querySelectorAll('.nav a').forEach((el) => {
                    if (el.classList.contains('active')) {
                        el.classList.remove('active');
                    }
                });

                document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
            }
        });
    }
});
body {
  background: gray;
  padding: 100px;
}

.block-2 {
  display: flex;
  flex-direction: row;
  background: white;
  width: 100%;
  padding: 50px;
  height: auto;
}

.section-left {
  position: sticky;
  top: 10px;
  height: 300px;
  /* background: gray; */
  width: 100%;
}

.section-right {
  background: blue;
  width: 100%;
}

.wrap {
  margin: 10px;
  background: red;
}

.content {
  height: 500px;
}

.footer {
  width: 100%;
  height: 700px;
  background: red;
}

.nav {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background-color: white;
  /*     padding: 20px;
*/
}

.nav ul {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0;
}

.nav a {
  display: flex !important;
  text-decoration: none;
  color: black !important;
  display: inline-block;
  /*     margin-right: 25px !important;
 */
}

@media screen and (max-width: 1024px) {}

.subtitle {
  opacity: 0;
  transition:300ms;
}


.subtitle > div {
  transition:300ms;
  right:100%;
}

.subtitle > div h1 {
  opacity:0;
  position:relative;
  top:2em;
  transition:300ms;
  transition-delay:1s;
}


.active {
  opacity: 1;
}

.active > div {
  right:0;
}

.active > div h1 {
  opacity:1;
  top: 0;
}

.content1 {
  position: absolute;
  background-color: red;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content2 {
  position: absolute;
  background-color: gray;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content3 {
  position: absolute;
  background-color: green;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content4 {
  position: absolute;
  background-color: blue;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}
<body>


  <div class="block-2">
    <div class="section-left">
      <nav class="nav">
        <ul>

          <li><a href="" class="active subtitle">
              <div class="content1">
                <h1>O1</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content2">
                <h1>O2</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content3">
                <h1>O3</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content4">
                <h1>O4</h1>
              </div>
            </a></li>
        </ul>
      </nav>
    </div>
    <div class="section-right">
      <div class="section1 wrap">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1 ">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</body>
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement