rad-header/scripts.js at master · devJoshLopez/rad-header · 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
113
114
115
116
117
118
$(document).ready(() => {
    window.onresize = function() {
        document.body.height = window.innerHeight;

        $(".twin-section").css({
            height: window.innerHeight
          });
    }
    window.onresize(); // called to initially set the height.


    $(".twin-section").css({
        height: window.innerHeight
      });

    var svgKeyframeTimelineTwin1 = new TimelineMax({ repeat: -1 });
    var svgKeyframeCountTwin1 = $(".twin._1 .desktop svg g.keyframe").length;

    var svgKeyframeTimelineTwin2 = new TimelineMax({ repeat: -1 });
    var svgKeyframeCountTwin2 = $(".twin._2 .desktop svg g.keyframe").length;

    for (i = 0; i < svgKeyframeCountTwin1; i++) {
        svgKeyframeTimelineTwin1
            .to(".twin._1 svg g.keyframe._" + [i], 0, { autoAlpha: 1 })
            .to(".twin._1 svg g.keyframe._" + [i], 0, { autoAlpha: 0 }, "+=0.15");
    }

    for (i = 0; i < svgKeyframeCountTwin2; i++) {
        svgKeyframeTimelineTwin2
            .to(".twin._2 svg g.keyframe._" + [i], 0, { autoAlpha: 1 })
            .to(".twin._2 svg g.keyframe._" + [i], 0, { autoAlpha: 0 }, "+=0.15");
    }

    svgKeyframeTimelineTwin1.play();
    svgKeyframeTimelineTwin2.play();


    TweenMax.to(".rad-path", 0, { autoAlpha: 0 });
    TweenMax.to(".rad-path", 1, { autoAlpha: 1, ease: Power2.easeInOut, delay: 1 });


    var headerTitles = new Array(
        "We design brands with our creative vision"
        // "Brand’s Hate Us For This One Simple Trick",
        // "Our Beziers Bring All The Boys To The Yard",
        // "Life’s Like a Box of Color Swatches",
        // "Kerning? Yea we do that."
    ),
        headerTitle = $('.header-title'),
        randno = headerTitles[Math.floor(Math.random() * headerTitles.length)];

    headerTitle.text(randno);
    TweenMax.to(headerTitle, 0, { autoAlpha: 0 });
    TweenMax.to(headerTitle, 1, { autoAlpha: 1, ease: Power2.easeInOut, delay: 2 });


    var margin = {top: 0, right: 0, bottom: 0, left: 0},
     width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var npoints = 100;
var ptdata = [];


var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d, i) { return d[0]; })
    .y(function(d, i) { return d[1]; });

    var svg = d3.select("body .twin-section").append("svg")
    .attr("class", "mousetrap")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,0)");

var svgagain = d3.select("body .twin-section").select("svg.mousetrap")
    .on("mousemove", function() { var pt = d3.mouse(this); tick(pt); });


var path = svg.append("g")
  .append("path")
    .data([ptdata])
    .attr("class", "line")
    .attr("d", line);

function tick(pt) {

  // push a new data point onto the back
  ptdata.push(pt);

  // Redraw the path:
  path
      .attr("d", function(d) { return line(d);})


  // If more than 100 points, drop the old data pt off the front
  if (ptdata.length > npoints) {
	  ptdata.shift();
  }
}

});