Hey everyone,
I'm facing an issue with an animated code I sourced from Google. I've added it as a section on my Shopify store, but now the page load time has slowed down significantly. Can anyone offer assistance or advice on how to optimize this code for smoother performance within my Shopify theme?
Thanks in advance for any help or suggestions!
<!DOCTYPE html>
<html lang="{{ shop.locale }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ 'font.woff' | asset_url }}" rel='stylesheet' type='text/css'>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="your-animation-library.js"></script>
</head>
<!-- Custom style -->
<style>
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
}
.cd-title {
position: relative;
height: 160px;
line-height: 230px;
text-align: center;
}
.cd-title h1 {
font-size: 2.4rem;
font-weight: 700;
}
@media only screen and (min-width: 768px) {
.cd-title {
line-height: 250px;
}
}
@media only screen and (min-width: 1170px) {
.cd-title {
height: 200px;
line-height: 300px;
}
.cd-title h1 {
font-size: 3rem;
}
}
.cd-intro {
width: 100%;
max-width: 1468px;
text-align: center;
}
.cd-intro {
margin: 4em auto;
}
@media only screen and (min-width: 768px) {
.cd-intro {
margin: 5em auto;
}
}
@media only screen and (min-width: 1170px) {
.cd-intro {
margin: 6em auto;
}
}
.cd-headline {
font-size: 1.76rem;
line-height: 1.2;
}
@media only screen and (min-width: 768px) {
.cd-headline {
font-size: 3.1rem;
font-weight: 300;
}
}
@media only screen and (min-width: 1170px) {
.cd-headline {
font-size: 4.6rem;
}
}
.cd-words-wrapper {
display: inline-block;
position: relative;
text-align: center;
}
.cd-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.cd-words-wrapper b.is-visible {
position: relative;
}
.no-js .cd-words-wrapper b {
opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
opacity: 1;
}
/* --------------------------------
xclip
-------------------------------- */
.cd-headline.clip span {
display: inline-block;
}
.cd-headline.clip .cd-words-wrapper {
overflow: hidden;
vertical-align: top;
}
.cd-headline.clip .cd-words-wrapper::after {
/* line */
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #aebcb9;
}
.cd-headline.clip b {
opacity: 0;
}
.cd-headline.clip b.is-visible {
opacity: 1;
}
<!-- Second CSS code -->
<style>
.cd-intro {
width: 100%;
max-width: 1468px;
text-align: center;
}
</style>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<section class="cd-intro">
<h1 class="cd-headline clip is-full-width">
<span>
{% case shop.locale %}
{% when 'es' %}
En Fleurlovin, encontrarás
{% when 'zh-CN' %}
在Fleurlovin，你将找到
{% else %}
At Fleurlovin, you'll find
{% endcase %}
</span>
<span class="cd-words-wrapper">
<b class="is-visible">
{% case shop.locale %}
{% when 'es' %}
lujo
{% when 'zh-CN' %}
豪华
{% else %}
luxury
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
innovación
{% when 'zh-CN' %}
创新
{% else %}
innovation
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
comodidad
{% when 'zh-CN' %}
舒适
{% else %}
comfort
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
elegancia
{% when 'zh-CN' %}
优雅
{% else %}
elegance
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
inspiración
{% when 'zh-CN' %}
灵感
{% else %}
inspiration
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
emoción
{% when 'zh-CN' %}
兴奋
{% else %}
excitement
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
calidad
{% when 'zh-CN' %}
质量
{% else %}
quality
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
sofisticación
{% when 'zh-CN' %}
精致
{% else %}
sophistication
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
diversidad
{% when 'zh-CN' %}
多样性
{% else %}
diversity
{% endcase %}
</b>
<b>
{% case shop.locale %}
{% when 'es' %}
originalidad
{% when 'zh-CN' %}
独创性
{% else %}
originality
{% endcase %}
</b>
</span>
</h1>
</section> <!-- cd-intro -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script async>
$(document).ready(function() {
var animationDelay = 2500,
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000,
lettersDelay = 50,
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
revealDuration = 600,
revealAnimationDelay = 1500;
initHeadline();
function initHeadline() {
singleLetters($('.cd-headline.letters').find('b'));
animateHeadline($('.cd-headline'));
}
function singleLetters($words) {
$words.each(function() {
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (var i in letters) {
if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters).css('opacity', 1);
});
}
function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function() {
var headline = $(this);
if (headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function() {
headline.find('.cd-words-wrapper').addClass('is-loading');
}, barWaiting);
} else if (headline.hasClass('clip')) {
var spanWrapper = headline.find('.cd-words-wrapper'),
newWidth = spanWrapper.width() + 10;
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type')) {
var words = headline.find('.cd-words-wrapper b'),
width = 0;
words.each(function() {
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.cd-words-wrapper').css('width', width);
}
setTimeout(function() {
hideWord(headline.find('.is-visible').eq(0));
}, duration);
});
}
function hideWord($word) {
var nextWord = takeNext($word);
if ($word.parents('.cd-headline').hasClass('type')) {
var parentSpan = $word.parent('.cd-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function() {
parentSpan.removeClass('selected');
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function() {
showWord(nextWord, typeLettersDelay);
}, typeAnimationDelay);
} else if ($word.parents('.cd-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
} else if ($word.parents('.cd-headline').hasClass('clip')) {
$word.parents('.cd-words-wrapper').animate({ width: '2px' }, revealDuration, function() {
switchWord($word, nextWord);
showWord(nextWord);
});
} else if ($word.parents('.cd-headline').hasClass('loading-bar')) {
$word.parents('.cd-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function() {
hideWord(nextWord);
}, barAnimationDelay);
setTimeout(function() {
$word.parents('.cd-words-wrapper').addClass('is-loading');
}, barWaiting);
} else {
switchWord($word, nextWord);
setTimeout(function() {
hideWord(nextWord);
}, animationDelay);
}
}
function showWord($word, $duration) {
if ($word.parents('.cd-headline').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');
} else if ($word.parents('.cd-headline').hasClass('clip')) {
$word.parents('.cd-words-wrapper').animate({ 'width': $word.width() + 10 }, revealDuration, function() {
setTimeout(function() {
hideWord($word);
}, revealAnimationDelay);
});
}
}
function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');
if (!$letter.is(':last-child')) {
setTimeout(function() {
hideLetter($letter.next(), $word, $bool, $duration);
}, $duration);
} else if ($bool) {
setTimeout(function() {
hideWord(takeNext($word));
}, animationDelay);
}
if ($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
}
}
function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');
if (!$letter.is(':last-child')) {
setTimeout(function() {
showLetter($letter.next(), $word, $bool, $duration);
}, $duration);
} else {
if ($word.parents('.cd-headline').hasClass('type')) {
setTimeout(function() {
$word.parents('.cd-words-wrapper').addClass('waiting');
}, 200);
}
if (!$bool) {
setTimeout(function() {
hideWord($word);
}, animationDelay);
}
}
}
function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}
function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
});
</script>
</body>
</html>
{% schema %}
{
"name": "Slick Slider",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "My Custom Heading"
},
{
"type": "select",
"id": "Slick_Slider_color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
}
],
"presets": [
{
"name": "Slick Slider"
}
]
}
{% endschema %}
