marquee/moire.js at master · tmp-demo/marquee · 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
function moire(time,callback){
    //get the dom element in which we want to draw
  var container = document.getElementById("moire");
  container.classList.toggle("hidden");

  //effect last for 10 seconds
  setTimeout(function(){
    container.classList.toggle("hidden");
    callback();
  }, time);


  var fix=document.createElement("div");
  fix.className = "fix";
  var template = document.createElement("div");
  template.className = "moiree-line";

  for (var i = 0; i <  200 ; i++){
    var line = template.cloneNode();
    line.style.width = i*20+"px";
    line.style.height = i*20+"px";
    line.style.borderRadius = "100000px";
    line.style.top = (1080/2 - i*20/2)+"px";
    line.style.left = (1920/2 - i*20/2)+"px";

    fix.appendChild(line);
  }

  container.appendChild(fix);

  var move = fix.cloneNode(true);
  move.className="move";

  var m1=document.createElement("marquee");
  m1.setAttribute("direction","left");
  m1.setAttribute("behavior","alternate");
  m1.setAttribute("truespeed","");
  m1.setAttribute("scrollamount",2);
  m1.setAttribute("scrolldelay","30");
  m1.className ="moire-horiz";
  allthemarquee.lvlup();

  var m2=document.createElement("marquee");
  m2.setAttribute("direction","down");
  m2.setAttribute("behavior","alternate");
  m2.setAttribute("truespeed","");
  m2.setAttribute("scrollamount",2);
  m2.setAttribute("scrolldelay","30");
  m2.className ="moire-vert";
  allthemarquee.lvlup();


  m2.appendChild(move);
  m1.appendChild(m2);

  container.appendChild(m1);


}