Tzo Posted May 17, 2023 Share Posted May 17, 2023 Hello, So I added all the needed codes for my looping words and in the beginning it worked. The next day without changing anything, it stopped working and I can’t understand why. Can you please help me out? Here is my code set-up Code block code: <section class="sp-intro"> <h1 class="sp-headline slide"> <span>Discover your dream</span> <span class="sp-words-wrapper"> <b class="is-visible">place</b> <b>home</b> <b>investment</b> <b>apartment</b> <b>beach house</b> <b>office</b> <b>hotel investment</b> <b>gateaway</b> <b>skyline flat</b> </span> </h1> </section> Code injection Header code: .<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Footer code: jQuery(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($('.sp-headline.letters').find('b')); animateHeadline($('.sp-headline')); } function singleLetters($words) { $words.each(function(){ var word = $(this), letters = word.text().split(''), selected = word.hasClass('is-visible'); for (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('.sp-words-wrapper').addClass('is-loading') }, barWaiting); } else if (headline.hasClass('clip')){ var spanWrapper = headline.find('.sp-words-wrapper'), newWidth = spanWrapper.width() + 10 spanWrapper.css('width', newWidth); } else if (!headline.hasClass('type') ) { var words = headline.find('.sp-words-wrapper b'), width = 0; words.each(function(){ var wordWidth = $(this).width(); if (wordWidth > width) width = wordWidth; }); headline.find('.sp-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('.sp-headline').hasClass('type')) { var parentSpan = $word.parent('.sp-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('.sp-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('.sp-headline').hasClass('clip')) { $word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){ switchWord($word, nextWord); showWord(nextWord); }); } else if ($word.parents('.sp-headline').hasClass('loading-bar')){ $word.parents('.sp-words-wrapper').removeClass('is-loading'); switchWord($word, nextWord); setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay); setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting); } else { switchWord($word, nextWord); setTimeout(function(){ hideWord(nextWord) }, animationDelay); } } 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('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-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'); } }); CSS Code: .sp-intro { width: 100%; max-width: 100%; margin: 0 auto; } .sp-intro h1, .sp-intro b, .sp-intro i, .sp-intro p, .sp-intro span { line-height: 80px; font-size: 75px; font-weight: 500; font-style: initial; color: #111111; } .sp-words-wrapper { display: inline-block; position: relative; text-align: left; } .sp-words-wrapper b { display: inline-block; position: absolute; background: black; color: ivory!important; white-space: nowrap; left: 0; top: 0; width: auto !important; } .sp-words-wrapper b.is-visible { position: relative; } .no-js .sp-words-wrapper b { opacity: 0; } .no-js .sp-words-wrapper b.is-visible { opacity: 1; } .sp-headline.slide span { display: inline-block; padding: 0; } .sp-headline.slide .sp-words-wrapper { overflow: hidden; vertical-align: bottom; } .sp-headline.slide b { opacity: 0; top: .2em; } .sp-headline.slide b.is-visible { top: 0; opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s; } .sp-headline.slide b.is-hidden { -webkit-animation: slide-out 0.6s; -moz-animation: slide-out 0.6s; animation: slide-out 0.6s; } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-in { 0% { opacity: 0; -moz-transform: translateY(-100%); } 60% { opacity: 1; -moz-transform: translateY(20%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes slide-out { 0% { opacity: 1; -moz-transform: translateY(0); } 60% { opacity: 0; -moz-transform: translateY(120%); } 100% { opacity: 0; -moz-transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); -moz-transform: translateY(120%); -ms-transform: translateY(120%); -o-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @media (min-width : 668px) and (max-width : 1024px) { .sp-intro h4, .sp-intro b, .sp-intro i, .sp-intro p, .sp-intro span { line-height: 46px !important; font-size: 38px !important; font-weight: 400 !important; } } @media (max-width : 667px) { .sp-intro h4, .sp-intro b, .sp-intro i, .sp-intro span, .sp-intro p { line-height: 36px !important; font-size: 28px !important; font-weight: 400 !important; } } .sp-intro b { font-weight: 900; padding-bottom: 15px; } //HEADER BACKGROUND// .header-nav a:hover{ background: black; color: ivory!important} FullSizeRender.MOV Link to comment
tuanphan Posted May 20, 2023 Share Posted May 20, 2023 Can you share link to page where you added the code? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment