Shopify - Texto que cambia solo v2

texto-choro.liquid

{% comment %}
    @rotcl
{% endcomment %}


<div class="container">
    <div class="row">
<div class="caption v-middle text-center">
    <h1 class="cd-headline clip">
		<span class="blc">{{ section.settings.t1 }}</span>
		<span class="cd-words-wrapper">
			<b class="is-visible">{{ section.settings.t2 }}</b>
			<b>{{ section.settings.t3 }}</b>
			<b>{{ section.settings.t4 }}</b>
		</span>
	</h1>
</div>
  </div>
</div>



<style>
  .cd-words-wrapper {
	display: inline-block;
	position: relative;
	text-align: left;
	font-size: 30px
}

.cd-words-wrapper b {
	display: inline-block;
	position: absolute;
	white-space: nowrap;
	left: 0;
	top: 0
}

.blc {
	font-size: 30px
}

.cd-words-wrapper b.is-visible {
	position: relative
}

.cd-headline.clip span {
	display: inline-block;
	padding: .2em 0
}

.cd-headline.clip .cd-words-wrapper {
	overflow: hidden;
	vertical-align: top
}

.cd-headline.clip b {
	opacity: 0
}

.cd-headline b.is-visible {
	opacity: 1;
	font-weight: 900
}
</style>

<script>
  jQuery(document).ready(function(s) {
    function e(e) {
        e.each(function() {
            var e = s(this),
                a = e.text().split(""),
                n = e.hasClass("is-visible");
            for (i in a) e.parents(".rotate-2").length > 0 && (a[i] = "<em>" + a[i] + "</em>"), a[i] = n ? '<i class="in">' + a[i] + "</i>" : "<i>" + a[i] + "</i>";
            var t = a.join("");
            e.html(t).css("opacity", 1)
        })
    }

    function a(i) {
        var e = c;
        i.each(function() {
            var i = s(this);
            if (i.hasClass("loading-bar")) e = h, setTimeout(function() {
                i.find(".cd-words-wrapper").addClass("is-loading")
            }, u);
            else if (i.hasClass("clip")) {
                var a = i.find(".cd-words-wrapper"),
                    t = a.width() + 10;
                a.css("width", t)
            } else if (!i.hasClass("type")) {
                var d = i.find(".cd-words-wrapper b"),
                    l = 0;
                d.each(function() {
                    var i = s(this).width();
                    i > l && (l = i)
                }), i.find(".cd-words-wrapper").css("width", l)
            }
            setTimeout(function() {
                n(i.find(".is-visible").eq(0))
            }, e)
        })
    }

    function n(s) {
        var i = r(s);
        if (s.parents(".cd-headline").hasClass("type")) {
            var e = s.parent(".cd-words-wrapper");
            e.addClass("selected").removeClass("waiting"), setTimeout(function() {
                e.removeClass("selected"), s.removeClass("is-visible").addClass("is-hidden").children("i").removeClass("in").addClass("out")
            }, C), setTimeout(function() {
                t(i, f)
            }, m)
        } else if (s.parents(".cd-headline").hasClass("letters")) {
            var a = s.children("i").length >= i.children("i").length;
            d(s.find("i").eq(0), s, a, p), l(i.find("i").eq(0), i, a, p)
        } else s.parents(".cd-headline").hasClass("clip") ? s.parents(".cd-words-wrapper").animate({
            width: "2px"
        }, w, function() {
            o(s, i), t(i)
        }) : s.parents(".cd-headline").hasClass("loading-bar") ? (s.parents(".cd-words-wrapper").removeClass("is-loading"), o(s, i), setTimeout(function() {
            n(i)
        }, h), setTimeout(function() {
            s.parents(".cd-words-wrapper").addClass("is-loading")
        }, u)) : (o(s, i), setTimeout(function() {
            n(i)
        }, c))
    }

    function t(s, i) {
        s.parents(".cd-headline").hasClass("type") ? (l(s.find("i").eq(0), s, !1, i), s.addClass("is-visible").removeClass("is-hidden")) : s.parents(".cd-headline").hasClass("clip") && s.parents(".cd-words-wrapper").animate({
            width: s.width() + 10
        }, w, function() {
            setTimeout(function() {
                n(s)
            }, v)
        })
    }

    function d(i, e, a, t) {
        if (i.removeClass("in").addClass("out"), i.is(":last-child") ? a && setTimeout(function() {
                n(r(e))
            }, c) : setTimeout(function() {
                d(i.next(), e, a, t)
            }, t), i.is(":last-child") && s("html").hasClass("no-csstransitions")) {
            var l = r(e);
            o(e, l)
        }
    }

    function l(s, i, e, a) {
        s.addClass("in").removeClass("out"), s.is(":last-child") ? (i.parents(".cd-headline").hasClass("type") && setTimeout(function() {
            i.parents(".cd-words-wrapper").addClass("waiting")
        }, 200), e || setTimeout(function() {
            n(i)
        }, c)) : setTimeout(function() {
            l(s.next(), i, e, a)
        }, a)
    }

    function r(s) {
        return s.is(":last-child") ? s.parent().children().eq(0) : s.next()
    }

    function o(s, i) {
        s.removeClass("is-visible").addClass("is-hidden"), i.removeClass("is-hidden").addClass("is-visible")
    }
    var c = 2500,
        h = 3800,
        u = h - 3e3,
        p = 50,
        f = 150,
        C = 500,
        m = C + 800,
        w = 600,
        v = 1500;
    ! function() {
        e(s(".cd-headline.letters").find("b")), a(s(".cd-headline"))
    }()
});
</script>


{% schema %}
{
  "name": "Text choro",
  "class": "tex",
  "settings": [
	{	
		"type": "header",
		"content": "Static"
	},
	{
		"type": "text",
		"id": "t1",
		"label": "Texto"
	},
	{	
		"type": "header",
		"content": "Dinamic"
	},
	{
		"type": "text",
		"id": "t2",
		"label": "Texto 2"
	},
	{
		"type": "text",
		"id": "t3",
		"label": "Texto 3"
	},
	{
		"type": "text",
		"id": "t4",
		"label": "Texto 4"
	}
  ],
  "presets": [{
    "name": "Texto choro",
    "category": "Custom"
  }]

}
{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Versión 2 del $1796629 .

Usualmente cuando tengo tiempo libre, me da por crear efectos y animaciones para cubrir necesecidades innecesarias...
Crear elemento texto-choro.liquid y agregar el texto a gusto a través del Customize de tu plantilla.