Move text only when scrolling - Framework?-CodePudding

Hello, everyone!

Is there a framework or something else that makes it easy to move text (to the left or right) when the user scrolls (for example near the footer)? So a pure scroll animation.

Thank you in advance!

I tried Scrollmagic, but i cant handle it. :/

CodePudding user response：

You can try gsap , however if you want to make it without a framework using scroll event you can try :

const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const container = document.getElementById("container")
const rect = container.getBoundingClientRect()

const animate = (element,position) => {
     element.style.transform = `translateX(${position}px)`
} 

       

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;
    
   window.requestAnimationFrame(function() {
     
      animate(first,lastKnownScrollPosition*.2)
      animate(second,lastKnownScrollPosition*-.2)
      animate(third,lastKnownScrollPosition*.2)
      
    });
});

body{
  height: 200vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#container{
  max-width: 100vw;
  overflow: hidden;
}

h1{
  transition: transform 0.2s linear;
}

<body>
<div id="container">
  <h1 id="first">
   this is a text this is a text this is a text
  </h1>
  <h1 id="second">
    this is a text this is a text this is a text
  </h1>
  <h1 id="third">
    this is a text this is a text this is a text
  </h1>
</div>
</body>

CodePudding user response：

This is a simple exemple to demonstrate the idea using jquery. gasp like @Chakib said before is a good solution.

function isVisible(el, plus, wrapper = window ){
  var winFromTop = jQuery(wrapper).scrollTop();
  var currentPosition = winFromTop   jQuery(wrapper).height();
  
  var el = jQuery(`${el}`);
  var elFromTop = el.length ? jQuery(el[0]).offset().top :       jQuery(el).offset().top;
  
  return (currentPosition   plus) > elFromTop
}

jQuery(window).scroll(function(e) {
  var idElement = '.anime';
  const visible = isVisible(idElement, -20)
  if(visible){
    console.log('=> ', idElement)
    jQuery(idElement).addClass('resetX')
  }
  else {
    jQuery(idElement).removeClass('resetX')
  }
});

body{
  overflow-x: hidden
}

.container{
  border: solid 1px red;
  max-width: 800px;
  margin: auto auto;
  padding: 5px;
}

.above-the-fold{
  background:  linear-gradient(180deg, rgba(163,196,243,1) 27%, rgba(142,236,245,1) 100%);
  height: calc(100vh   300px);
  margin-bottom: 30px;
}

.boxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box{
  margin: 10px;
  height: 200px;
  flex: 0 0 calc(50% - 30px);
  background-color: #98f5e1;
}

.text{
  font-size: 18px;
  margin: 10px;
}

.anime{
  transition: all .7s ease-in-out;
}

.left{
  transform: translateX(220px);
}

.right{
  transform: translateX(-220px);
}

.resetX{
  transform: translateX(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div ></div>
  <div >
    <div ></div>
    <div ></div>
    <div >Loren Ipsum</div>
    <div >Loren Ipsum</div>
  </div>
</div>