Add a touch of interactivity to any page with this section tutorial. Add up to 3 words or sentences that cycle through, with options to incorporate a mixture of static and dynamic text. A simple way to captivate audiences.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.9/typed.js"></script>
<div class="typed-container page-width animate--slide-in content-container color-{{ section.settings.color_scheme }}">
<h1 class="typing-text"> {{ section.settings.static1 }} </h1>
<h1 class="typedjs typing-text"> </h1>
<h1 class="typing-text"> {{ section.settings.static2 }} </h1>
</div>
{% schema %}
{
"name": "Typing Text",
"tag": "section",
"settings": [
{
"type": "text",
"id": "static1",
"label": "Static Text"
},
{
"type": "text",
"id": "typed-1",
"label": "Typed Word 1"
},
{
"type": "text",
"id": "typed-2",
"label": "Typed Word 2"
},
{
"type": "text",
"id": "typed-3",
"label": "Typed Word 3"
},
{
"type": "text",
"id": "static2",
"label": "Static Text 2"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
}
],
"presets": [
{ "name": "Typing Text" }
]
}
{% endschema %}
<style>
.typed-container {
display: flex;
gap: 1.25rem;
justify-content: center;
max-width: none!important;
}
</style>
<script>
//Types strings multiple times
var typed = new Typed(".typedjs", {
strings:["", "{{ section.settings.typed-1 }}", "{{ section.settings.typed-2 }}", "{{ section.settings.typed-3 }}"],
typeSpeed: 60,// typing speed
backSpeed: 60, // erasing speed
loop: true, // start back after ending typing
showCursor: false,
});
</script>