scrollo-typer/demo.html at master · SpotOn/scrollo-typer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<meta charset="utf-8">
<title>Animatic Demo</title>

<link rel=stylesheet href=css/normalize.css>
<link rel=stylesheet href=css/demo.css>

<div id=thoughts-pin class=pin>
  <div id=thoughts>
    <div id=placeholder>&nbsp; What's on your mind?</div>

    <div id=hight-school>I spent the weekend with my friends from High School</div>

    <div id=shit-together>Why does everyone else seem to have<br>their shit together besides me?</div>

    <div id=hot>It was weird to see Rachel again...<br>but she looked hot. Maybe I should ask her out…</div>
  </div>
</div>


<script type=text/javascript src=js/greensock/TweenMax.min.js></script>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script>window.jQuery || document.write('<script src=js/jquery-1.7.2.min.js><\/script>')</script>
<script src=js/jquery.typing-tween.js></script>
<script src=js/jquery.skrollex.js></script>

<script>
  $('#thoughts-pin').skrollex({
    animation: [
      {
        tween   : TweenMax.to($('#placeholder'), .1, {css: {opacity: 0}}),
        duration: 1
      },
      {
        tween        : $('#hight-school').typingTween({
          duration: 2,
          add     : 'char'
        }),
        duration     : 600,
        onStateChange: function (fromState, toState) {
          var
              block = $('#hight-school');

          if (toState === 'IN_PROGRESS') {
            block.removeClass('crossed');
          }
          else {
            block.addClass('crossed');
          }
        }
      },
      {
        tween   : TweenMax.to($('#hight-school'), .2, {css: {fontSize: 16, lineHeight: 20, top: 20}}),
        offset  : 600,
        duration: 200
      },
      {
        tween        : $('#shit-together').typingTween({
          duration: 1,
          add     : 'char'
        }),
        offset       : 800,
        duration     : 600,
        onStateChange: function (fromState, toState) {
          var
              block = $('#shit-together');

          if (toState === 'IN_PROGRESS') {
            block.removeClass('crossed');
          }
          else {
            block.addClass('crossed');
          }
        }
      },
      {
        tween   : TweenMax.to($('#shit-together'), .2, {css: {fontSize: 16, lineHeight: 20, top: 50}}),
        offset  : 1400,
        duration: 200
      },
      {
        tween        : $('#hot').typingTween({
          duration: 1,
          add     : 'char'
        }),
        offset       : 1600,
        duration     : 600,
        onStateChange: function (fromState, toState) {
          var
              block = $('#hot');

          if (toState === 'IN_PROGRESS') {
            block.removeClass('crossed');
          }
          else {
            block.addClass('crossed');
          }
        }
      },
      {
        tween   : TweenMax.to($('#hot'), .2, {css: {fontSize: 16, lineHeight: 20, top: 100}}),
        offset  : 2200,
        duration: 200
      }
    ],
    pin      : {
      duration: 1000 + 2400
    }
  }).height(1000 + 2400);

  $('#shit-together, #hot').addClass('crossed');
</script>