Text Looping Transition

Developer
Assaf Gelber
Size
5,619 Kb
Views
8,092
  1. Text Looping Transition Previews
  2. Text Looping Transition HTML Codes
  3. Text Looping Transition CSS Codes
  4. Text Looping Transition JS Codes

How do I make an 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 03 January 2023, Tuesday.

Text Looping Transition Previews
IQ Test

Text Looping Transition - Script Codes 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 - Script Codes 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 - Script Codes 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;
});
Text Looping Transition - Script Codes
Text Looping Transition - Script Codes
Home Page Home
Developer Assaf Gelber
Username agelber
Uploaded January 03, 2023
Rating 4
Size 5,619 Kb
Views 8,092
Do you need developer help for Text Looping Transition?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Assaf Gelber (agelber) Script Codes
Name
Form Placeholder Labels
Transition Demo
RotateX and Y Demo
ScaleZ Demo
Perspective Demo
Animation Demo
Translate Demo
Pure CSS Image Gallery
Skew Demo
Origin Demo
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!