Textify.js & Locomotive Scroll Example: Smooth Scrolling with Character Animation
<!DOCTYPE html>
<html>
<head>
<title>Textify.js & Locomotive Scroll Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/locomotive-scroll/4.0.0/locomotive-scroll.min.css" />
<style>
.section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
font-size: 3rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="section">
<div class="textify">Textify.js</div>
</div>
<div class="section">
<div class="textify">Locomotive Scroll</div>
</div>
<div class="section">
<div class="textify">Example</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/locomotive-scroll/4.0.0/locomotive-scroll.min.js"></script>
<script src="textify.js"></script>
<script>
$(document).ready(function() {
const scroll = new LocomotiveScroll();
$('.textify').textify();
});
</script>
</body>
</html>
<pre><code class="language-javascript">(function($) {
$.fn.textify = function() {
this.each(function() {
let text = $(this).text();
let html = '';
for (let i = 0; i &lt; text.length; i++) {
html += '<span>' + text.charAt(i) + '</span>';
}
$(this).html(html);
});
};
})(jQuery);
</code></pre>
<p>This example showcases the integration of Textify.js and Locomotive Scroll to create a smooth scrolling experience with animated text effects. The HTML structure includes three sections with the 'section' class, each containing a 'textify' div. These divs are transformed using Textify.js, while Locomotive Scroll enables smooth scrolling. The jQuery code initializes Locomotive Scroll and applies the 'textify' function to all elements with the 'textify' class. The 'textify' function breaks down text into individual span elements, allowing for character-level animation. Make sure to include the necessary CSS and JavaScript files, as well as the textify.js file, for this example to work correctly.</p>
原文地址: https://www.cveoy.top/t/topic/pWyY 著作权归作者所有。请勿转载和采集!