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.
- Edit your code.
- Add a new section and name it 'Typing Text.'
- Remove all the code that's already auto-generated and paste in the code below.
- Save your code and return back to the theme. Refresh the page to make sure your section is generated.
- Have fun customising the section!
<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>
