Inspirational Quotes

index.jade

.caption 
  .text Learn from yesterday, live for today, hope for tomorrow.
  .author Albert Einstein

Inspirational-Quotes.markdown

Inspirational Quotes

With $.lettering() and GSAP animation

Forked from Oscar Haggerty's Pen Inspirational Quotes.

A Pen by Sanket Patel on CodePen.

License.

script.coffee

caption = $ '.caption'
text = $ '.text'
author = $ '.author'

$ ->
  caption.css
    opacity: 1
  
  readQuote = ->
    unread = quotes.filter (q)->
      !q.read
    
    if !unread.length
      quotes.forEach (q)->
        q.read = false
      unread = quotes
    
    quote = unread.sample(1).first()
    
    quote.read = true
    
    text.html quote.text
    author.html quote.author

    text.lettering()
    letters = text.children()

    tl = new TimelineMax()

    tl.staggerTo letters, 2,
      opacity: 1
    , .1
    .to author, 1,
      opacity: .7
    .to [letters, author], 1,
      opacity: 0
      onComplete: ->
        setTimeout readQuote, 2000
    , '+= 4'
      
  readQuote()

# http://www.forbes.com/sites/kevinkruse/2013/05/28/inspirational-quotes/
quotes = _ [
  {
  	text: 'Whatever the mind of man can conceive and believe, it can achieve.'
  	author: 'Napoleon Hill'
  }
  {
  	text: 'Strive not to be a success, but rather to be of value.'
  	author: 'Albert Einstein'
  }
  {
  	text: 'I attribute my success to this: I never gave or took any excuse.'
  	author: 'Florence Nightingale'
  }
  {
  	text: 'The most difficult thing is the decision to act, the rest is merely tenacity.'
  	author: 'Amelia Earhart'
  }
  {
  	text: 'Every strike brings me closer to the next home run.'
  	author: 'Babe Ruth'
  }
  {
  	text: 'Definiteness of purpose is the starting point of all achievement.'
  	author: 'W. Clement Stone'
  }
  {
  	text: 'We become what we think about.'
  	author: 'Earl Nightingale'
  }
  {
  	text: 'Life is 10% what happens to me and 90% of how I react to it.'
  	author: 'Charles Swindoll'
  }
  {
  	text: 'The most common way people give up their power is by thinking they don’t have any.'
  	author: 'Alice Walker'
  }
  {
  	text: 'The best time to plant a tree was 20 years ago. The second best time is now.'
  	author: 'Chinese Proverb'
  }
  {
  	text: 'An unexamined life is not worth living.'
  	author: 'Socrates'
  }
  {
  	text: 'Your time is limited, so don’t waste it living someone else’s life.'
  	author: 'Steve Jobs'
  }
  {
  	text: 'I am not a product of my circumstances. I am a product of my decisions.'
  	author: 'Stephen Covey'
  }
  {
  	text: 'Every child is an artist.  The problem is how to remain an artist once he grows up.'
  	author: 'Pablo Picasso'
  }
  {
  	text: 'Learn from yesterday, live for today, hope for tomorrow.'
  	author: 'Albert Einstein'
  }
  {
  	text: 'Whatever you can do, or dream you can, begin it.  Boldness has genius, power and magic in it.'
  	author: 'Johann Wolfgang von Goethe'
  }
  {
  	text: 'Life shrinks or expands in proportion to one’s courage.'
  	author: 'Anais Nin'
  }
  {
  	text: 'If you hear a voice within you say “you cannot paint,” then by all means paint and that voice will be silenced.'
  	author: 'Vincent Van Gogh'
  }
  {
  	text: 'Go confidently in the direction of your dreams.  Live the life you have imagined.'
  	author: 'Henry David Thoreau'
  }
  {
  	text: 'Few things can help an individual more than to place responsibility on him, and to let him know that you trust him.'
  	author: 'Booker T. Washington'
  }
  {
  	text: 'Certain things catch your eye, but pursue only those that capture the heart.'
  	author: 'Ancient Indian Proverb'
  }
  {
  	text: 'Everything you’ve ever wanted is on the other side of fear.'
  	author: 'George Addair'
  }
  {
  	text: 'Teach thy tongue to say, “I do not know,” and thous shalt progress.'
  	author: 'Maimonides'
  }
  {
  	text: 'Start where you are. Use what you have.  Do what you can.'
  	author: 'Arthur Ashe'
  }
  {
  	text: 'When one door of happiness closes, another opens, but often we look so long at the closed door that we do not see the one that has been opened for us.'
  	author: 'Helen Keller'
  }
  {
  	text: 'How wonderful it is that nobody need wait a single moment before starting to improve the world.'
  	author: 'Anne Frank'
  }
  {
  	text: 'Happiness is not something readymade.  It comes from your own actions.'
  	author: 'Dalai Lama'
  }
  {
  	text: 'If you’re offered a seat on a rocket ship, don’t ask what seat! Just get on.'
  	author: 'Sheryl Sandberg'
  }
  {
  	text: 'First, have a definite, clear practical ideal; a goal, an objective. Second, have the necessary means to achieve your ends; wisdom, money, materials, and methods. Third, adjust all your means to that end.'
  	author: 'Aristotle'
  }
  {
  	text: 'If the wind will not serve, take to the oars.'
  	author: 'Latin Proverb'
  }
  {
  	text: 'Challenges are what make life interesting and overcoming them is what makes life meaningful.'
  	author: 'Joshua J. Marine'
  }
  {
  	text: 'I have been impressed with the urgency of doing. Knowing is not enough; we must apply. Being willing is not enough; we must do.'
  	author: 'Leonardo da Vinci'
  }
  {
  	text: 'Limitations live only in our minds.  But if we use our imaginations, our possibilities become limitless.'
  	author: 'Jamie Paolinetti'
  }
  {
  	text: 'You take your life in your own hands, and what happens? A terrible thing, no one to blame.'
  	author: 'Erica Jong'
  }
  {
  	text: 'I didn’t fail the test. I just found 100 ways to do it wrong.'
  	author: 'Benjamin Franklin'
  }
  {
  	text: 'In order to succeed, your desire for success should be greater than your fear of failure.'
  	author: 'Bill Cosby'
  }
  {
  	text: 'There are no traffic jams along the extra mile.'
  	author: 'Roger Staubach'
  }
  {
  	text: 'It is never too late to be what you might have been.'
  	author: 'George Eliot'
  }
  {
  	text: 'You become what you believe.'
  	author: 'Oprah Winfrey'
  }
  {
  	text: 'A truly rich man is one whose children run into his arms when his hands are empty.'
  	author: 'Unknown'
  }
  {
  	text: 'The battles that count aren’t the ones for gold medals. The struggles within yourself–the invisible battles inside all of us–that’s where it’s at.'
  	author: 'Jesse Owens'
  }
  {
  	text: 'I have learned over the years that when one’s mind is made up, this diminishes fear. '
  	author: 'Rosa Parks'
  }
  {
  	text: 'It does not matter how slowly you go as long as you do not stop.'
  	author: 'Confucius'
  }
  {
  	text: 'If you look at what you have in life, you’ll always have more. If you look at what you don’t have in life, you’ll never have enough.'
  	author: 'Oprah Winfrey'
  }
  {
  	text: 'Remember that not getting what you want is sometimes a wonderful stroke of luck.'
  	author: 'Dalai Lama'
  }
  {
  	text: 'You can’t use up creativity.  The more you use, the more you have'
  	author: 'Maya Angelou'
  }
  {
  	text: 'Dream big and dare to fail.'
  	author: 'Norman Vaughan'
  }
  {
  	text: 'If you do what you’ve always done, you’ll get what you’ve always gotten.'
  	author: 'Tony Robbins'
  }
  {
  	text: 'Dreaming, after all, is a form of planning.'
  	author: 'Gloria Steinem'
  }
  {
  	text: 'It’s your place in the world; it’s your life. Go on and do all you can with it, and make it the life you want to live.'
  	author: 'Mae Jemison'
  }
  {
  	text: 'You may be disappointed if you fail, but you are doomed if you don’t try.'
  	author: 'Beverly Sills'
  }
  {
  	text: 'Remember no one can make you feel inferior without your consent.'
  	author: 'Eleanor Roosevelt'
  }
  {
  	text: 'When everything seems to be going against you, remember that the airplane takes off against the wind, not with it.'
  	author: 'Henry Ford'
  }
  {
  	text: 'Either write something worth reading or do something worth writing.'
  	author: 'Benjamin Franklin'
  }
  {
  	text: 'The only way to do great work is to love what you do.'
  	author: 'Steve Jobs'
  }
  {
  	text: 'If you can dream it, you can achieve it.'
  	author: 'Zig Ziglar'
  }
]

style.scss

@import "compass/css3";
body, html {
  background-color: #222;
  height: 100%;
  color: white;
  text-align: center;
}

.caption {
  display: inline-block;
  margin-top: 1em;
  
  width: 60%;
  text-align: center;
  
  font-size: 5em;
  opacity: 0;
  
  text-shadow: 0 0 100px rgba(255,255,255,0.8);
  
  [class^='char'] {
    opacity: 0;
  }
  
  .author {
    float: right;
    font-size: 0.6em;
    font-style: italic;
    opacity: 0;
  }
}