Jump to content

Recommended Posts

Site URL: https://kccbd.net

Hey there! I had just attempted to apply a piece of code so that a header of my website will have an animation where it will type a word, highlight, delete, and type another word as a way to draw the viewers eye and emphasize the purpose of our company... if that makes any sense?

For example:

We are a team of makers.

We are a team of designers.

We are a team of creativists.

(The word would change as if someone were typing it)

The following code is what I used, however, the animation seems to not be functioning for some reason. I was wondering if anyone would be able to find an issue within the coding itself that is halting the problem. Thank you!

<style>
.sp-intro {
text-align: left;
}
.sp-headline {
  margin: 0 !important;
}
.sp-intro i, .sp-intro b {
  font-weight: inherit !important;
  font-style: inherit !important;
}
.sp-intro {
line-height: ;
font-size: ;
color: ;
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
width: auto !important;
}
.sp-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.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.type .sp-words-wrapper {
vertical-align: top;
overflow: hidden;
}
.sp-headline.type .sp-words-wrapper.waiting::after {
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 100%;
width: 1px;
background-color: #111;
-webkit-animation: sp-pulse 1s infinite;
-moz-animation: sp-pulse 1s infinite;
animation: sp-pulse 1s infinite;
}
.sp-headline.type .sp-words-wrapper.selected {
background-color: #ccc;
}
.sp-headline.type .sp-words-wrapper.selected::after {
visibility: hidden;
}
.sp-headline.type .sp-words-wrapper.selected b {
color: #0d0d0d;
}
.sp-headline.type b {
visibility: hidden;
}
.sp-headline.type b.is-visible {
visibility: visible;
}
.sp-headline.type i {
position: absolute;
visibility: hidden;
}
.sp-headline.type i.in {
position: relative;
visibility: visible;
}

@-webkit-keyframes sp-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1) !important;
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9) !important;
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0) !important;
opacity: 0;
}
}
@-moz-keyframes sp-pulse {
0% {
-moz-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-moz-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-moz-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes sp-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}


@media (min-width : 668px) and (max-width : 1024px) {
.sp-intro {
line-height:  !important;
font-size:  !important;
}
}

@media (max-width : 667px) {
.sp-intro {
line-height:  !important;
font-size:  !important;
}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){

var animationDelay = 2500,
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, 
lettersDelay = 50,
typeLettersDelay = 100,
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 showWord($word, $duration) {
if($word.parents('.sp-headline').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-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('.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');
}
});
</script>
Link to comment
  • Replies 2
  • Views 705
  • Created
  • Last Reply

Top Posters In This Topic

The code is located on the home page. As of now, only the word "make" has the animation applied, but the others don't seem to work. The goal is make some text permanent on the page which includes "Hemp-Infused Products That" and the animated elements following it. 

For example:

Hemp-Infused Products That Make A Difference 

Hemp-Infused Products That Heal The Soul

etc. etc.

The link to the website is here: https://kccbd.net

Thank you!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.