https://marnegebied.nl/pluginAppObj/pluginAppObj_26/main.js

1function init_pluginAppObj_26(text) {
2    
3    var element         = "#textillate_pluginAppObj_26",
4        elementVisible  = false,
5        text            = text.trim();
6
7    // Converts line wraps in the text (so Textillate/Lettering can interpretate them) and inserts it to the container
8    $(element).html(convertBr(text));
9
10    x5engine.boot.push(function(){
11        
12        if ($(element).css("visibility") == "visible") {
13            elementVisible = true;
14            reduceFontSize($(element), $("#pluginAppObj_26").width());
15
16            if ($(element).height() > $(window).height()) {
17                startAnimation();
18            }
19            else {
20               x5engine.utils.onElementInViewPort($(element), startAnimation, $(element).height() / 4);
21            }
22        }
23        else {
24            // Sticky bar fix when page is loaded scrolled and the sticky is visible from the beginning
25            setTimeout(function() {
26                if ($(element).css("visibility") == "visible") {
27                    elementVisible = true;
28                    reduceFontSize($(element), $("#pluginAppObj_26").width());                           
29
30                    if ($(element).height() > $(window).height()) {
31                        startAnimation();
32                    }
33                    else {
34                        x5engine.utils.onElementInViewPort($(element), startAnimation, $(element).height() / 4);
35                    }
36                }
37            }, 1000);
38        }
39    
40        
41        $(window).scroll(function() {
42            if (!elementVisible && $(element).css("visibility") == "visible") {  
43                elementVisible = true;
44                reduceFontSize($(element), $("#pluginAppObj_26").width());
45                startAnimation();
46            }
47        });
48
49        $(window).on("breakpointChangedOrFluid", function (e, breakpoint) {
50            // Reset the original font-size
51            $(element).css("font-size", 18 + "pt");
52            if ($(element).css("visibility") == "visible") {
53                elementVisible = true;
54                reduceFontSize($(element), $("#pluginAppObj_26").width());
55
56                if ($(element).height() > $(window).height()) {
57                    startAnimation();
58                }
59                else {
60                    x5engine.utils.onElementInViewPort($(element), startAnimation, $(element).height() / 4);
61                }
62            }
63            else {
64                elementVisible = false;
65            }
66        });
67    
68	});
69
70    function startAnimation() {
71        // Show the text during animation
72        $(element).css("opacity", "1");
73        
74        var animation_type              = "char",
75            in_animation_duration       = 1.5,
76            out_animation_duration      = 1.5,
77            in_delay                    = 1.5,
78            out_delay                   = 2,
79            in_animation_duration_ms    = in_animation_duration * 1000,
80            out_animation_duration_ms   = out_animation_duration * 1000,
81            in_delay_ms                 = in_delay * 1000,
82            out_delay_ms                = out_delay * 1000,
83            elements_to_animate         = 0,
84            in_elements_delay           = 0,
85            out_elements_delay          = 0;
86        
87        if (animation_type == "char") {
88            elements_to_animate = text.length;
89            in_elements_delay = in_animation_duration_ms / elements_to_animate;
90            out_elements_delay = out_animation_duration_ms / elements_to_animate;
91        }
92        else {
93            elements_to_animate = text.split(" ").length;
94            in_elements_delay = in_animation_duration_ms / elements_to_animate;
95            out_elements_delay = out_animation_duration_ms / elements_to_animate;
96        }
97        
98        $(element).textillate({
99            type: animation_type,
100            in: { // IN animation settings
101                effect: "fadeInLeftBig",
102                delay: in_elements_delay,
103                sync: false,
104                shuffle: false,
105                reverse: true,
106                callback: function () {
107                    // If OUT animation is active, prepare it and executes it after the setted OUT delay
108                    if (true) {
109                        setTimeout(function() {
110                            $(element).textillate("out"); 
111                        }, out_delay_ms);
112                    }
113                }
114            },
115            out: { // OUT animation settings
116                effect: "shake",
117                delay: out_elements_delay,
118                sync: false,
119                shuffle: true,
120                reverse: false,
121                callback: function () {
122                    // Prepare the IN animation after OUT animation, and executes it after the setted IN delay
123                    setTimeout(function() {
124                        $(element).textillate("in"); 
125                    }, in_delay_ms);
126                }
127            }
128        });
129        $(element).textillate("start");
130    }
131        
132    // Reduces the font size until text fits in its container without wraps
133    function reduceFontSize(el, containerWidth) {
134        // Clone the element to measure its size (to avoid animation issues). Replace our custom br tag with the original one before calculate the element width. After that replaces to the opposite (empty <p> tag)
135        var clone = el.clone().appendTo("#pluginAppObj_26");
136        clone.css({"display": "inline", "opacity": "0", "font-size": 18 + "pt"});
137        clone.html(clone.html().replace(/<span style=\"display: none;\"> ##br## <\/span>/g, "<p></p>"));
138
139        if (clone.width() > containerWidth) {
140            var originalFontSize = 18;
141            var newFontSize = Math.max(1, containerWidth * originalFontSize * 0.95 / clone.width());
142            el.css("font-size", newFontSize + "pt");
143        }
144        // Remove the cloded element
145        clone.remove();
146    }
147                    
148    // Converts line wraps (formatted as "&lt;br /&gt;

148" from text box) into special code (" ##br## "), so lettering.js can interpretate them
149    function convertBr(str) {
150        return str.replace(/&lt;br \/&gt;/g, "<span style=\"display: none;\"> ##br## </span>");
151    }
152}