-1

I try go get my head around how this was done. All I know it uses jquery

http://www.marieforleo.com/

See the logo/text in the left top corner... when you mouseover it, it shows a random texts with a transition and defaults back to the site name on mouse out.

How was this done?

Thanks a lot.

4
  • could be done with javascript (jquery, velocity, doesn't matter) or plain css. try to inspect that logo in chrome. Ok maybe not css (because text is always different).
    – AlFra
    May 13, 2016 at 10:54
  • 1
    it's probably just an array of sentences which on mouseover, one will be selected randomly and placed as the text then a slide out animation will happen - or in this case they seem to append a letter of the esntence at at time
    – Pete
    May 13, 2016 at 11:31
  • you should probably still recognize my answer. I've put some effort in it you know :)
    – AlFra
    May 14, 2016 at 11:23
  • Sorry AIFra, I really appreciate that you took the time to help me. I was away a day and very busy the day before also I just saw the message about your answer 10 minutes ago and came here directly. Thanks a lot and sorry again!! May 15, 2016 at 8:08

1 Answer 1

0

I hope this helps you! It's not exactly the same, but still... You can still improve some functionality and you can work on code re-usability.

(function($) {

  var logo = $("#logo"),
    originalText = logo.html(),
    altLogoTextArray = ["make it count.", "make peace.", "make art not war.", "make something out of yourself."],
    chosenText,
    timeOut = null;

  function animateText(text, startFrom, length, delay) {
    var strlen = text.length;
    if (startFrom + length > strlen) {
      return;
    }
    timeOut = window.setTimeout(function() {
      logo.html(text.substr(0, startFrom) + text.substr(startFrom, length));
      //testText.html(startFrom + length);
      animateText(text, startFrom, length + 1, delay);
    }, delay);
  }

  function getRandomTextFromArray(arr) {
    var arrLength = arr.length,
      randInt = Math.floor(Math.random() * (arrLength - 0)) + 0;
    return arr[randInt];
  }

  logo.on('mouseenter mouseleave', function(e) {
    window.clearTimeout(timeOut);
    if (e.type == "mouseenter") {
      chosenText = getRandomTextFromArray(altLogoTextArray);
      animateText(chosenText, 3, 0, 20);
    } else if (e.type == "mouseleave") {
      animateText(originalText, 3, 0, 20);
    }
  });

})(window.jQuery);
#logo {
  font-size: 30px;
  min-width: 500px;
  display: inline-block;
  zoom: 1;
  cursor: pointer;
}

#logo:after {
  content:"";
  display:block;
  height:1px;
  width:22px;
  background:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="logo">marie forleo.</span>

1
  • 1
    Hello AIFra, thanks a lot for your answer and sorry for not coming back earlier I was away for a day!! I'll try your solution and tell you how it worked! Thanks again! May 15, 2016 at 8:04

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.