Adding href links inside <span class = | AND Is it possible to do that?

user_16157986 0
Viewed 82

I have a line of code like this and I want to include the href element or anything applicable link element into each of the words ( achievable, lovely, fancy, beautiful, etc.. ) without changing the any styles and spacing of the words.

Ex: link: amazon.com

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
        cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
        nw[i].className = 'letter in';
  }, 340+(i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);

// // I DO NOT OWN THIS. I TAKE THIS COMPLETELY FROM SOMEONE AS A PRACTICE. PLEASE THE OWNER, IF YOU WANT TO TAKE DOWN THIS, CONTACT ME AND I WILL TAKE IT DOWN IMMEDIATELY. THANK YOU VERY MUCH //
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 50px;
}

.text {
  position: absolute;
  width: 450px;
  left:45%;
  margin-left: -225px;
  height: 40px;
  top: 25%;
  margin-top: -20px;
  color: antiquewhite;
 
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 400px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #007bf7;
}

.pomegranate {
  color: #c0392b;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>by Nguyên Phùng</title>
  <link rel="stylesheet" href="./style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head>
</head>
<style>
body {
  background-image: url("Dark 5K.jpg");
  background-position: center;
}
button{
  border: none;
  border-radius: 15px;
  box-shadow: 0 0 8px rgb(207, 207, 207);
}
</style>
</head>
<body>

<!-- partial:index.partial.html -->
<div class="text">
  <p>Your dreams are</p>
  <p>
    <span class="word wisteria">achievable</span></a>
    <span class="word belize">lovely.</span></a>
    <span class="word pomegranate">fancy.</span>
    <span class="word green">beautiful.</span>
    <span class="word midnight">realistic.</span>
    <span class="word midnight">strong.</span>

  </p>
</div>
  <script  src="./script.js"></script>
 </body>
 </html>

css html javascript
2 Answers

Try Considering This One:

Probably Might Help You.

   <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>by Nguyên Phùng</title>
  <link rel="stylesheet" href="./style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head>
</head>
<style>
body {
  background-image: url("Dark 5K.jpg");
  background-position: center;
}
button{
  border: none;
  border-radius: 15px;
  box-shadow: 0 0 8px rgb(207, 207, 207);
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 50px;
}

.text {
  position: absolute;
  width: 450px;
  left:45%;
  margin-left: -225px;
  height: 40px;
  top: 25%;
  margin-top: -20px;
  color: antiquewhite;
 
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 400px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #007bf7;
}

.pomegranate {
  color: #c0392b;
}
</style>
</head>
<body>

<!-- partial:index.partial.html -->
<div class="text">
  <p>Your dreams are</p>
  <p>
    <a href="https://www.amazon.in"><span class="word wisteria">achievable</span></a>
    <a href="https://www.amazon.in"><span class="word belize">lovely.</span></a>
    <a href="https://www.amazon.in"><span class="word pomegranate">fancy.</span></a>
    <a href="https://www.amazon.in"><span class="word green">beautiful.</span></a>
    <a href="https://www.amazon.in"><span class="word midnight">realistic.</span></a>
    <a href="https://www.amazon.in"><span class="word midnight">strong.</span></a>

  </p>
</div>
  <script  src="./script.js"></script>
 </body>
 <script>
  var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
        cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
        nw[i].className = 'letter in';
  }, 340+(i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);
</script>
 </html>

user_138584440

You can't just convert each of the spans around the words into a elements given the way the HTML is structured as it will always be the last word ('strong.' in this case) whose href will be picked up.

Instead, and so as to alter the rest of the code as little as possible, this snippet puts the whole set of words into an anchor element. Its href is updated when a new word is selected with the href for that word. The standard HTML way of adding data related to an element is to use the data- attribute and in this case we call it data-href. On selecting a new word the href for it is found and copied into the href for the anchor tag.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>by Nguyên Phùng</title>
  <link rel="stylesheet" href="./style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
</head>
<style>
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
  body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 50px;
  }
  
  .text {
    position: absolute;
    width: 450px;
    left: 45%;
    margin-left: -225px;
    height: 40px;
    top: 25%;
    margin-top: -20px;
    color: antiquewhite;
  }
  
  p {
    display: inline-block;
    vertical-align: top;
    margin: 0;
  }
  
  .word {
    position: absolute;
    width: 400px;
    opacity: 0;
  }
  
  .letter {
    display: inline-block;
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
  }
  
  .letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  .letter.behind {
    transform: rotateX(-90deg);
  }
  
  .letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .wisteria {
    color: #8e44ad;
  }
  
  .belize {
    color: #2980b9;
  }
  
  .pomegranate {
    color: #c0392b;
  }
  
  .green {
    color: #16a085;
  }
  
  .midnight {
    color: #007bf7;
  }
  
  .pomegranate {
    color: #c0392b;
  }
  
  body {
    background-image: url("Dark 5K.jpg");
    background-position: center;
  }
  
  button {
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 8px rgb(207, 207, 207);
  }
</style>
</head>

<body>

  <!-- partial:index.partial.html -->
  <div class="text">
    <p>Your dreams are</p>
    <p>
      <a id="gotohref" href="">
        <span class="word wisteria" data-href="https://google.com">achievable</span>
        <span class="word belize" data-href="https://microsoft.com">lovely.</span>
        <span class="word pomegranate" data-href="https://apple.com">fancy.</span>
        <span class="word green" data-href="https://twitter.com">beautiful.</span>
        <span class="word midnight" data-href="https://facebook.com">realistic.</span>
        <span class="word midnight" data-href="https://stackoverflow.com">strong.</span>
      </a>
    </p>
  </div>
  <script>
    const gotohref = document.getElementById('gotohref');
    const spans = gotohref.children;
    var words = document.getElementsByClassName('word');
    var wordArray = [];
    var currentWord = 0;

    words[currentWord].style.opacity = 1;
    for (var i = 0; i < words.length; i++) {
      splitLetters(words[i]);
    }

    function changeWord() {
      var cw = wordArray[currentWord];
      var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
      for (var i = 0; i < cw.length; i++) {
        animateLetterOut(cw, i);
      }

      for (var i = 0; i < nw.length; i++) {
        nw[i].className = 'letter behind';
        nw[0].parentElement.style.opacity = 1;
        animateLetterIn(nw, i);
      }

      currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;

      //now make the href in the anchor element equal to the one for the current word
      gotohref.href = spans[currentWord].getAttribute('data-href');

    }

    function animateLetterOut(cw, i) {
      setTimeout(function() {
        cw[i].className = 'letter out';
      }, i * 80);
    }

    function animateLetterIn(nw, i) {
      setTimeout(function() {
        nw[i].className = 'letter in';
      }, 340 + (i * 80));
    }

    function splitLetters(word) {
      var content = word.innerHTML;
      word.innerHTML = '';
      var letters = [];
      for (var i = 0; i < content.length; i++) {
        var letter = document.createElement('span');
        letter.className = 'letter';
        letter.innerHTML = content.charAt(i);
        word.appendChild(letter);
        letters.push(letter);
      }

      wordArray.push(letters);
    }

    changeWord();
    setInterval(changeWord, 4000);

    // // I DO NOT OWN THIS. I TAKE THIS COMPLETELY FROM SOMEONE AS A PRACTICE. PLEASE THE OWNER, IF YOU WANT TO TAKE DOWN THIS, CONTACT ME AND I WILL TAKE IT DOWN IMMEDIATELY. THANK YOU VERY MUCH //
  </script>
</body>

</html>

user_108674540
Related