Text Looping Transition

Transition when scrolling through gallery-like paragraphs What is a text looping transition How do you make a text looping transition? This script and codes were developed by Assaf Gelber on 09 March 2022, Wednesday.

How do I make an text looping transition?
  1. Text Looping Transition Previews
  2. Text Looping Transition HTML Codes
  3. Text Looping Transition CSS Codes
  4. Text Looping Transition JS Codes
Text Looping Transition Previews

Text Looping Transition HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Text Looping Transition</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
body {
  background: #F7F7E9;
  transform: translateZ(0);
}

.wrapper {
  position: relative;
  width: 80%;
  margin: 50px auto;
}
.wrapper a {
  background: #4DD65F;
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  box-shadow: 2px 2px 0 0 #AAA;
  transform: translate(2px, 2px);
  cusror: pointer;
  transition: all 0.2s;
}
.wrapper a:hover {
  border: none;
  box-shadow: 4px 4px 0 0 #AAA;
  transform: translate(0, 0);
}
.wrapper a:active {
  box-shadow: 1px 1px 0 0 #AAA;
  transform: translate(3px, 3px);
}

.part {
  position: absolute;
  padding-top: 25px;
  font-family: Source Sans Pro;
}
.part:not(.active) {
  display: none;
}
.part.up {
  animation: part-up 0.5s;
}
.part.down {
  animation: part-down 0.5s;
}
.part.right {
  animation: part-right 0.5s;
}
.part.left {
  animation: part-left 0.5s;
}

@keyframes part-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes part-down {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}
@keyframes part-right {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes part-left {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(-100px);
  }
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class='wrapper'>
  <p class='part active up'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim ligula eget risus tincidunt, eu pulvinar nulla dapibus. Nam at eros neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget arcu et lectus mollis congue. Ut eleifend scelerisque mi, id tempor augue pharetra nec. Donec hendrerit nisi quam, ut fermentum turpis bibendum id. Duis aliquet fermentum tristique. Curabitur dignissim orci eget sapien interdum consequat. Pellentesque eu dui sed turpis faucibus rhoncus. Donec vel lobortis eros. Ut placerat sodales facilisis.
  </p>
  <p class='part'>
    Draecenas in ipsum sed metus rhoncus scelerisque cursus ut leo. Nunc tempor velit ac diam mollis, imperdiet tempor purus cursus. Mauris aliquam molestie orci a pharetra. Morbi vestibulum, magna tristique ullamcorper suscipit, felis purus egestas neque, sit amet laoreet augue sapien vel turpis. Aliquam aliquam, est ac rhoncus faucibus, dolor quam auctor est, nec ultrices nisl magna a nibh. Morbi hendrerit rhoncus lacus, at porta leo vulputate quis. Nam euismod mi vitae lorem cursus, lacinia accumsan ipsum bibendum. Donec non interdum lacus. Suspendisse in metus ut neque sodales volutpat.
  </p>
  <p class='part'>
    Mauris faucibus et arcu vitae sodales. Curabitur viverra eget est quis ornare. Nunc nibh orci, ultrices nec pulvinar at, volutpat eu sem. Cras quis nunc at mi pretium mattis vitae nec neque. Nam eget ante in enim pharetra scelerisque. Maecenas rutrum hendrerit dolor, eu gravida nulla ultrices tristique. Aenean cursus est orci, et ullamcorper dui egestas eget. Suspendisse ornare, magna non placerat sollicitudin, augue orci eleifend eros, eu placerat ligula lectus vel arcu. Proin vitae orci sit amet augue scelerisque adipiscing vestibulum a sem. Donec adipiscing, orci sit amet dictum euismod, sapien velit sollicitudin nulla, quis laoreet dui nisl sed libero. Ut tincidunt commodo mi, sit amet interdum nibh adipiscing vitae. Sed ac aliquet eros, sed porta mi. Phasellus in faucibus augue.
  </p>
  <a class='prev' href='#'>&laquo;</a>
  <a class='next' href='#'>&raquo;</a>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Text Looping Transition CSS Codes

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
body {
  background: #F7F7E9;
  transform: translateZ(0);
}

.wrapper {
  position: relative;
  width: 80%;
  margin: 50px auto;
}
.wrapper a {
  background: #4DD65F;
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  box-shadow: 2px 2px 0 0 #AAA;
  transform: translate(2px, 2px);
  cusror: pointer;
  transition: all 0.2s;
}
.wrapper a:hover {
  border: none;
  box-shadow: 4px 4px 0 0 #AAA;
  transform: translate(0, 0);
}
.wrapper a:active {
  box-shadow: 1px 1px 0 0 #AAA;
  transform: translate(3px, 3px);
}

.part {
  position: absolute;
  padding-top: 25px;
  font-family: Source Sans Pro;
}
.part:not(.active) {
  display: none;
}
.part.up {
  animation: part-up 0.5s;
}
.part.down {
  animation: part-down 0.5s;
}
.part.right {
  animation: part-right 0.5s;
}
.part.left {
  animation: part-left 0.5s;
}

@keyframes part-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes part-down {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}
@keyframes part-right {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes part-left {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(-100px);
  }
}

Text Looping Transition JS Codes

var currentIndex = 0,
				pCount   = $('.part').length;

// Description scrolling
$('.wrapper a').on('click', function() {
  var $active  = $('.part.active'),
      isNext   = $(this).hasClass('next');
  currentIndex = (currentIndex + (isNext ? 1 : -1)) % pCount;
  if (currentIndex === -1) {
    currentIndex = pCount - 1;
  }
  var $next = $('.part:eq(' + currentIndex + ')');
  $active.addClass(isNext ? 'left' : 'down');
  $next.addClass('active').addClass(isNext ? 'up' : 'right');
  setTimeout(function() { 
    $active.removeClass('active up down right left');
    $next.removeClass('up down right left')
  }, 500);
  return false;
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.