arrow_back
View code

<div class="questions width-90 width-60@md margin-x-auto position-relative">
  <div class="container">
    <div class="arrow">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 33">
        <path stroke="var(--color-higher)" stroke-width="2" d="M15.85 1.167l14.848 15.5-14.849 15.5M31 16.663H0"></path>
      </svg>
    </div>
    <div class="text-container">
      <a href="#">
        <span class="text-md">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </span>
      </a>
    </div>
  </div>
  <div class="container">
    <div class="arrow">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 33">
        <path stroke="var(--color-higher)" stroke-width="2" d="M15.85 1.167l14.848 15.5-14.849 15.5M31 16.663H0"></path>
      </svg>
    </div>
    <div class="text-container">
      <a href="#">
        <span class="text-md">
          Lorem ipsum dolor sit amet.
        </span>
      </a>
    </div>
  </div>
  <div class="container">
    <div class="arrow">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 33">
        <path stroke="var(--color-higher)" stroke-width="2" d="M15.85 1.167l14.848 15.5-14.849 15.5M31 16.663H0"></path>
      </svg>
    </div>
    <div class="text-container">
      <a href="#">
        <span class="text-md">
          Tempore omnis facere illum beatae doloribus ut odio saepe vel.
        </span>
      </a>
    </div>
  </div>
</div>
                        
Copy HTML

/*
 * File: _animated-qa.scss
 * Location /src/scss/components
 * Animated Q&A component
 */

.questions {
    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(270deg,var(--color-bg),hsla(0,0%,100%,0));
        width: 32%;
        pointer-events: none;
        z-index: 2;
    }
    .container {
        cursor: pointer;
        display: flex;
        padding: 30px 0;
        border-bottom: 1px solid var(--color-highest);
        .arrow {
            display: block;
            text-align: center;
            margin-right: 1em;
            display: flex;
            align-items: center;
            svg {
                width: 33px;
                height: 33px;
                @media screen and (max-width: 768px) {
                    width: 20px;
                    height: 20px;
                }
            }
        }
        .text-container {
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            flex-grow: 1;
            a {
                color: var(--color-highest);
                span {
                    position: relative;
                    transform: translateX(0);
                    display: inline-block;
                    padding-right: 30px;
                    transition: transform 10s linear;
                }
            }
        }
    }   
}
                        
Copy SCSS

/*
 * File: animated-qa.js
 * Location /src/js/components
 * Animated Q&A component
*/

(function () {
  document.querySelectorAll(".container").forEach(function (c) {
    const content = c.querySelector("span");
    const speed = 150;
    let duration = 0;
    c.addEventListener("mouseover", () => {
      const containerWidth = c.offsetWidth;
      const translate = content.offsetWidth - containerWidth + 100;
      duration = translate / speed;
      if (translate > 0) {
        content.style.transform = `translateX(${-1 * translate}px)`;
        content.style.transitionDuration = `${duration}s`;
      }
    });
    c.addEventListener("mouseout", () => {
      const translate = 0;
      content.style.transform = `translateX(${-1 * translate}px)`;
      content.style.transitionDuration = `${duration}s`;
    });
  });
})();

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.