recruitDesignRepo/script.js at master · webster-781/recruitDesignRepo · 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
document.addEventListener('DOMContentLoaded',()=>{
    /* Initial Animation*/
    x = screen.availWidth*(1);
    y = screen.availHeight*(0.9);
    dur = 500;
    time = 0;
    const svg = d3.select("#svg");
    svg.attr("preserveAspectRatio", "xMinYMin meet")
       .attr("viewBox", `0 0 ${x} ${y}`)
       .classed("svg-content", true);
    rad = y/10;

       const ulc = svg.append('circle')
                      .attr('cx', x/2)
                      .attr('cy', y/2)
                      .attr('r', rad)
                      .style('fill','yellow');

       ulc.transition()
          .delay(time)
          .duration(dur)
          .attr('cx',rad)
          .attr('cy',rad);
          time +=dur;

       const urc = svg.append('circle')
                      .attr('cx', x/2)
                      .attr('cy', y/2)
                      .attr('r', rad)
                      .style('fill','red');
       urc.transition()
          .delay(time)
          .duration(dur)
          .attr('cx',x-rad)
          .attr('cy',rad);
          time +=dur;

        const drc = svg.append('circle')
                       .attr('cx', x/2)
                       .attr('cy', y/2)
                       .attr('r', rad)
                       .style('fill','blue');
        drc.transition()
           .delay(time)
           .duration(dur)
           .attr('cx',x-rad)
           .attr('cy',y-rad);
        time +=dur;


       const dlc = svg.append('circle')
                   .attr('cx', x/2)
                   .attr('cy', y/2)
                   .attr('r', rad)
                   .style('fill','green') ;
        dlc.transition()
           .duration(dur)
           .delay(time)
           .attr('cx',rad)
           .attr('cy',y-rad);
       time +=dur;


    imgw = x*(0.0333);
    imgh = y*0.2;
    imgx = x*(0.1);
    imgy = y*(0.1);
    i = 0;
    img_dur = 100;

    loc = window.location.pathname;
    dir = loc.substring(0, loc.lastIndexOf('/'));
    console.log(dir);//dir is current directory location

    texts = ['t','h','e','i','n','t','e','r','n','e','t','w','e','d','e','s','e','r','v','e'];// slogan

    // loop for the animation of texts
    for (text in texts){
        console.log(i);
        if(i==3 || i==11 || i==13)
            imgx += imgw;
        imgx +=imgw;
        time += img_dur;
         image = svg.append('image')
                    .attr('xlink:href', `file://${dir}/images/alpha/alpha-${texts[i]}.jpg`)
                    .attr("x", `${imgx}`)
                    .attr("y", `${imgy}`)
                    .attr("width", `${imgw}`)
                    .attr("height", `${imgh}`)
                    .style("opacity", 0.0);
                                    //image attributes
        image.transition()
             .delay(time)
             .duration(img_dur)
             .style("opacity", 1.0);
                                    //image transition up
        image.transition()
             .delay(time + img_dur*(21-i)+ 1500)
             .style("opacity",0.0)
             .duration(10)                       //image transition back out
        i = i+1;
    }

    function load_page(name){
        window.location = `${name}.html`;
    }

    setTimeout(function(){load_page("home");},5000);
    console.log(time);
    });