-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
104 lines (101 loc) · 20.1 KB
/
index.html
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
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="matrix, movie, effect, fx, digital, rain, html, html5, css, css3">
<meta name="description" content="Matrix effect (digital rain) based on Matrix movie.">
<meta name="author" content="Raphael D. Pinheiro">
<meta name="revisit-after" content="60 days">
<!-- social media meta tags -->
<meta property="og:title" content="Matrix Digital Rain">
<meta property="og:image" content="img/socialthumb.png">
<meta property="og:description" content="Matrix digital rain effect. An HTML5 & CSS3 experiment">
<!-- social media meta tags for twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@raphaklaus" />
<meta name="twitter:title" content="Matrix effect using CSS3" />
<meta name="twitter:description" content="Matrix digital rain effect. An HTML5 & CSS3 experiment" />
<meta name="twitter:image" content="http://raphaklaus.github.io/matrix-fx/img/socialthumb.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/build/style.css">
<title>Matrix Digital Rain Effect by Raphael D. Pinheiro</title>
</head>
<body>
<h2 class="col1">
<span class="char1">ﾕ</span><span class="char2">ﾖ</span><span class="char3">ﾖ</span><span class="char4">ﾗ</span><span class="char5">ﾛ</span><span class="char6">ﾜ</span><span class="char7">ﾝ</span><span class="char8">ﾗ</span><span class="char9">ﾘ</span><span class="char10">ﾕ</span><span class="char11">ﾖ</span><span class="char12">ﾖ</span><span class="char13">ﾗ</span><span class="char14">ﾛ</span><span class="char15">ﾜ</span><span class="char16">ﾝ</span><span class="char17">ﾗ</span><span class="char18">ﾝ</span><span class="char19">ﾜ</span><span class="char20">ﾙ</span><span class="char21">ﾚ</span><span class="char22">ﾖ</span><span class="char23">ﾗ</span><span class="char24">ﾜ</span><span class="char25">ﾕ</span><span class="char26">ﾖ</span><span class="char27">ﾗ</span><span class="char28">ﾛ</span><span class="char29">ﾝ</span><span class="char30">ﾜ</span><span class="char31">ﾙ</span><span class="char32">ﾚ</span><span class="char33">ﾝ</span>
</h2>
<h3 class="col2">
<span class="char1">ﾖ</span><span class="char2">ﾝ</span><span class="char3">ﾕ</span><span class="char4">ﾜ</span><span class="char5">ﾙ</span><span class="char6">ﾝ</span><span class="char7">ﾖ</span><span class="char8">ﾘ</span><span class="char9">ﾝ</span><span class="char10">ﾜ</span><span class="char11">ﾙ</span><span class="char12">ﾝ</span><span class="char13">ﾖ</span><span class="char14">ﾕ</span><span class="char15">ﾙ</span><span class="char16">ﾗ</span><span class="char17">ﾖ</span><span class="char18">ﾚ</span><span class="char19">ﾜ</span><span class="char20">ﾜ</span><span class="char21">ﾕ</span><span class="char22">ﾗ</span><span class="char23">ﾝ</span><span class="char24">ﾗ</span><span class="char25">ﾙ</span><span class="char26">ﾖ</span><span class="char27">ﾖ</span><span class="char28">ﾙ</span><span class="char29">ﾖ</span><span class="char30">ﾜ</span><span class="char31">ﾖ</span><span class="char32">ﾜ</span><span class="char33">ﾕ</span>
</h3>
<h3 class="col3">
<span class="char1">ﾘ</span><span class="char2">ﾜ</span><span class="char3">ﾝ</span><span class="char4">ﾗ</span><span class="char5">ﾚ</span><span class="char6">ﾘ</span><span class="char7">ﾕ</span><span class="char8">ﾗ</span><span class="char9">ﾘ</span><span class="char10">ﾖ</span><span class="char11">ﾙ</span><span class="char12">ﾗ</span><span class="char13">ﾝ</span><span class="char14">ﾗ</span><span class="char15">ﾜ</span><span class="char16">ﾖ</span><span class="char17">ﾕ</span><span class="char18">ﾗ</span><span class="char19">ﾖ</span><span class="char20">ﾙ</span><span class="char21">ﾚ</span><span class="char22">ﾖ</span><span class="char23">ﾝ</span><span class="char24">ﾝ</span><span class="char25">ﾕ</span><span class="char26">ﾘ</span><span class="char27">ﾘ</span><span class="char28">ﾚ</span><span class="char29">ﾗ</span><span class="char30">ﾘ</span><span class="char31">ﾜ</span><span class="char32">ﾕ</span><span class="char33">ﾖ</span>
</h3>
<h2 class="col4">
<span class="char1">ﾖ</span><span class="char2">ﾗ</span><span class="char3">ﾜ</span><span class="char4">ﾛ</span><span class="char5">ﾝ</span><span class="char6">ﾜ</span><span class="char7">ﾗ</span><span class="char8">ﾙ</span><span class="char9">ﾚ</span><span class="char10">ﾝ</span><span class="char11">ﾗ</span><span class="char12">ﾘ</span><span class="char13">ﾕ</span><span class="char14">ﾙ</span><span class="char15">ﾖ</span><span class="char16">ﾘ</span><span class="char17">ﾗ</span><span class="char18">ﾛ</span><span class="char19">ﾜ</span><span class="char20">ﾝ</span><span class="char21">ﾗ</span><span class="char22">ﾛ</span><span class="char23">ﾝ</span><span class="char24">ﾛ</span><span class="char25">ﾙ</span><span class="char26">ﾜ</span><span class="char27">ﾝ</span><span class="char28">ﾕ</span><span class="char29">ﾗ</span><span class="char30">ﾖ</span><span class="char31">ﾛ</span><span class="char32">ﾜ</span><span class="char33">ﾝ</span>
</h2>
<h3 class="col5">
<span class="char1">ﾖ</span><span class="char2">ﾝ</span><span class="char3">ﾘ</span><span class="char4">ﾜ</span><span class="char5">ﾝ</span><span class="char6">ﾘ</span><span class="char7">ﾚ</span><span class="char8">ﾖ</span><span class="char9">ﾙ</span><span class="char10">ﾘ</span><span class="char11">ﾚ</span><span class="char12">ﾙ</span><span class="char13">ﾘ</span><span class="char14">ﾜ</span><span class="char15">ﾝ</span><span class="char16">ﾕ</span><span class="char17">ﾚ</span><span class="char18">ﾘ</span><span class="char19">ﾗ</span><span class="char20">ﾘ</span><span class="char21">ﾗ</span><span class="char22">ﾚ</span><span class="char23">ﾕ</span><span class="char24">ﾘ</span><span class="char25">ﾙ</span><span class="char26">ﾝ</span><span class="char27">ﾚ</span><span class="char28">ﾘ</span><span class="char29">ﾚ</span><span class="char30">ﾘ</span><span class="char31">ﾙ</span><span class="char32">ﾝ</span><span class="char33">ﾕ</span>
</h3>
<h3 class="col6">
<span class="char1">ﾜ</span><span class="char2">ﾝ</span><span class="char3">ﾗ</span><span class="char4">ﾕ</span><span class="char5">ﾖ</span><span class="char6">ﾗ</span><span class="char7">ﾛ</span><span class="char8">ﾜ</span><span class="char9">ﾙ</span><span class="char10">ﾗ</span><span class="char11">ﾚ</span><span class="char12">ﾘ</span><span class="char13">ﾕ</span><span class="char14">ﾖ</span><span class="char15">ﾖ</span><span class="char16">ﾗ</span><span class="char17">ﾛ</span><span class="char18">ﾜ</span><span class="char19">ﾝ</span><span class="char20">ﾖ</span><span class="char21">ﾗ</span><span class="char22">ﾛ</span><span class="char23">ﾝ</span><span class="char24">ﾛ</span><span class="char25">ﾝ</span><span class="char26">ﾜ</span><span class="char27">ﾙ</span><span class="char28">ﾚ</span><span class="char29">ﾖ</span><span class="char30">ﾗ</span><span class="char31">ﾜ</span><span class="char32">ﾝ</span><span class="char33">ﾕ</span>
</h3>
<h3 class="col7">
<span class="char1">ﾜ</span><span class="char2">ﾝ</span><span class="char3">ﾛ</span><span class="char4">ﾗ</span><span class="char5">ﾘ</span><span class="char6">ﾖ</span><span class="char7">ﾛ</span><span class="char8">ﾖ</span><span class="char9">ﾝ</span><span class="char10">ﾜ</span><span class="char11">ﾖ</span><span class="char12">ﾖ</span><span class="char13">ﾜ</span><span class="char14">ﾖ</span><span class="char15">ﾝ</span><span class="char16">ﾕ</span><span class="char17">ﾛ</span><span class="char18">ﾖ</span><span class="char19">ﾜ</span><span class="char20">ﾜ</span><span class="char21">ﾖ</span><span class="char22">ﾛ</span><span class="char23">ﾚ</span><span class="char24">ﾗ</span><span class="char25">ﾗ</span><span class="char26">ﾜ</span><span class="char27">ﾕ</span><span class="char28">ﾙ</span><span class="char29">ﾝ</span><span class="char30">ﾛ</span><span class="char31">ﾕ</span><span class="char32">ﾛ</span><span class="char33">ﾝ</span>
</h3>
<h3 class="col8">
<span class="char1">ﾕ</span><span class="char2">ﾖ</span><span class="char3">ﾖ</span><span class="char4">ﾗ</span><span class="char5">ﾛ</span><span class="char6">ﾜ</span><span class="char7">ﾝ</span><span class="char8">ﾝ</span><span class="char9">ﾗ</span><span class="char10">ﾘ</span><span class="char11">ﾕ</span><span class="char12">ﾖ</span><span class="char13">ﾖ</span><span class="char14">ﾗ</span><span class="char15">ﾛ</span><span class="char16">ﾜ</span><span class="char17">ﾝ</span><span class="char18">ﾝ</span><span class="char19">ﾗ</span><span class="char20">ﾛ</span><span class="char21">ﾝ</span><span class="char22">ﾜ</span><span class="char23">ﾙ</span><span class="char24">ﾚ</span><span class="char25">ﾖ</span><span class="char26">ﾗ</span><span class="char27">ﾜ</span><span class="char28">ﾝ</span><span class="char29">ﾕ</span><span class="char30">ﾖ</span><span class="char31">ﾗ</span><span class="char32">ﾛ</span><span class="char33">ﾝ</span>
</h3>
<h4 class="col9">
<span class="char1">ﾖ</span><span class="char2">ﾙ</span><span class="char3">ﾚ</span><span class="char4">ﾝ</span><span class="char5">ﾗ</span><span class="char6">ﾜ</span><span class="char7">ﾙ</span><span class="char8">ﾜ</span><span class="char9">ﾘ</span><span class="char10">ﾝ</span><span class="char11">ﾖ</span><span class="char12">ﾜ</span><span class="char13">ﾕ</span><span class="char14">ﾚ</span><span class="char15">ﾘ</span><span class="char16">ﾗ</span><span class="char17">ﾚ</span><span class="char18">ﾖ</span><span class="char19">ﾖ</span><span class="char20">ﾝ</span><span class="char21">ﾗ</span><span class="char22">ﾘ</span><span class="char23">ﾕ</span><span class="char24">ﾜ</span><span class="char25">ﾗ</span><span class="char26">ﾝ</span><span class="char27">ﾝ</span><span class="char28">ﾜ</span><span class="char29">ﾘ</span><span class="char30">ﾚ</span><span class="char31">ﾗ</span><span class="char32">ﾝ</span><span class="char33">ﾘ</span>
</h4>
<h3 class="col10">
<span class="char1">ﾝ</span><span class="char2">ﾚ</span><span class="char3">ﾘ</span><span class="char4">ﾕ</span><span class="char5">ﾝ</span><span class="char6">ﾙ</span><span class="char7">ﾜ</span><span class="char8">ﾝ</span><span class="char9">ﾗ</span><span class="char10">ﾜ</span><span class="char11">ﾝ</span><span class="char12">ﾗ</span><span class="char13">ﾚ</span><span class="char14">ﾗ</span><span class="char15">ﾜ</span><span class="char16">ﾖ</span><span class="char17">ﾝ</span><span class="char18">ﾖ</span><span class="char19">ﾗ</span><span class="char20">ﾘ</span><span class="char21">ﾙ</span><span class="char22">ﾗ</span><span class="char23">ﾚ</span><span class="char24">ﾘ</span><span class="char25">ﾘ</span><span class="char26">ﾕ</span><span class="char27">ﾝ</span><span class="char28">ﾗ</span><span class="char29">ﾜ</span><span class="char30">ﾚ</span><span class="char31">ﾝ</span><span class="char32">ﾜ</span><span class="char33">ﾗ</span>
</h3>
<h3 class="col11">
<span class="char1">ﾚ</span><span class="char2">ﾗ</span><span class="char3">ﾕ</span><span class="char4">ﾕ</span><span class="char5">ﾗ</span><span class="char6">ﾙ</span><span class="char7">ﾝ</span><span class="char8">ﾕ</span><span class="char9">ﾗ</span><span class="char10">ﾝ</span><span class="char11">ﾜ</span><span class="char12">ﾗ</span><span class="char13">ﾜ</span><span class="char14">ﾙ</span><span class="char15">ﾝ</span><span class="char16">ﾘ</span><span class="char17">ﾝ</span><span class="char18">ﾝ</span><span class="char19">ﾚ</span><span class="char20">ﾕ</span><span class="char21">ﾕ</span><span class="char22">ﾚ</span><span class="char23">ﾘ</span><span class="char24">ﾗ</span><span class="char25">ﾜ</span><span class="char26">ﾖ</span><span class="char27">ﾚ</span><span class="char28">ﾝ</span><span class="char29">ﾝ</span><span class="char30">ﾕ</span><span class="char31">ﾝ</span><span class="char32">ﾖ</span><span class="char33">ﾚ</span>
</h3>
<h3 class="col12">
<span class="char1">ﾕ</span><span class="char2">ﾖ</span><span class="char3">ﾖ</span><span class="char4">ﾗ</span><span class="char5">ﾛ</span><span class="char6">ﾜ</span><span class="char7">ﾝ</span><span class="char8">ﾗ</span><span class="char9">ﾘ</span><span class="char10">ﾕ</span><span class="char11">ﾖ</span><span class="char12">ﾖ</span><span class="char13">ﾗ</span><span class="char14">ﾛ</span><span class="char15">ﾜ</span><span class="char16">ﾝ</span><span class="char17">ﾗ</span><span class="char18">ﾝ</span><span class="char19">ﾜ</span><span class="char20">ﾙ</span><span class="char21">ﾚ</span><span class="char22">ﾖ</span><span class="char23">ﾗ</span><span class="char24">ﾜ</span><span class="char25">ﾕ</span><span class="char26">ﾖ</span><span class="char27">ﾗ</span><span class="char28">ﾛ</span><span class="char29">ﾝ</span><span class="char30">ﾜ</span><span class="char31">ﾙ</span><span class="char32">ﾚ</span><span class="char33">ﾖ</span>
</h3>
<h3 class="col13">
<span class="char1">ﾕ</span><span class="char2">ﾖ</span><span class="char3">ﾖ</span><span class="char4">ﾗ</span><span class="char5">ﾛ</span><span class="char6">ﾜ</span><span class="char7">ﾝ</span><span class="char8">ﾝ</span><span class="char9">ﾗ</span><span class="char10">ﾘ</span><span class="char11">ﾕ</span><span class="char12">ﾖ</span><span class="char13">ﾖ</span><span class="char14">ﾗ</span><span class="char15">ﾛ</span><span class="char16">ﾜ</span><span class="char17">ﾝ</span><span class="char18">ﾝ</span><span class="char19">ﾗ</span><span class="char20">ﾛ</span><span class="char21">ﾝ</span><span class="char22">ﾜ</span><span class="char23">ﾙ</span><span class="char24">ﾚ</span><span class="char25">ﾖ</span><span class="char26">ﾗ</span><span class="char27">ﾜ</span><span class="char28">ﾝ</span><span class="char29">ﾕ</span><span class="char30">ﾖ</span><span class="char31">ﾗ</span><span class="char32">ﾛ</span><span class="char33">ﾝ</span>
</h3>
<h3 class="col14">
<span class="char1">ﾜ</span><span class="char2">ﾗ</span><span class="char3">ﾜ</span><span class="char4">ﾘ</span><span class="char5">ﾝ</span><span class="char6">ﾝ</span><span class="char7">ﾕ</span><span class="char8">ﾝ</span><span class="char9">ﾝ</span><span class="char10">ﾘ</span><span class="char11">ﾝ</span><span class="char12">ﾖ</span><span class="char13">ﾖ</span><span class="char14">ﾘ</span><span class="char15">ﾗ</span><span class="char16">ﾝ</span><span class="char17">ﾗ</span><span class="char18">ﾚ</span><span class="char19">ﾝ</span><span class="char20">ﾗ</span><span class="char21">ﾚ</span><span class="char22">ﾝ</span><span class="char23">ﾜ</span><span class="char24">ﾝ</span><span class="char25">ﾚ</span><span class="char26">ﾗ</span><span class="char27">ﾜ</span><span class="char28">ﾖ</span><span class="char29">ﾝ</span><span class="char30">ﾙ</span><span class="char31">ﾝ</span><span class="char32">ﾝ</span><span class="char33">ﾗ</span>
</h3>
<h2 class="col15">
<span class="char1">ﾖ</span><span class="char2">ﾗ</span><span class="char3">ﾜ</span><span class="char4">ﾛ</span><span class="char5">ﾝ</span><span class="char6">ﾜ</span><span class="char7">ﾗ</span><span class="char8">ﾙ</span><span class="char9">ﾚ</span><span class="char10">ﾝ</span><span class="char11">ﾗ</span><span class="char12">ﾘ</span><span class="char13">ﾕ</span><span class="char14">ﾙ</span><span class="char15">ﾖ</span><span class="char16">ﾘ</span><span class="char17">ﾗ</span><span class="char18">ﾛ</span><span class="char19">ﾜ</span><span class="char20">ﾝ</span><span class="char21">ﾗ</span><span class="char22">ﾛ</span><span class="char23">ﾝ</span><span class="char24">ﾛ</span><span class="char25">ﾙ</span><span class="char26">ﾜ</span><span class="char27">ﾝ</span><span class="char28">ﾕ</span><span class="char29">ﾗ</span><span class="char30">ﾖ</span><span class="char31">ﾛ</span><span class="char32">ﾜ</span><span class="char33">ﾖ</span>
</h2>
<h4 class="col16">
<span class="char1">ﾖ</span><span class="char2">ﾗ</span><span class="char3">ﾜ</span><span class="char4">ﾗ</span><span class="char5">ﾛ</span><span class="char6">ﾝ</span><span class="char7">ﾜ</span><span class="char8">ﾙ</span><span class="char9">ﾚ</span><span class="char10">ﾝ</span><span class="char11">ﾝ</span><span class="char12">ﾗ</span><span class="char13">ﾘ</span><span class="char14">ﾕ</span><span class="char15">ﾖ</span><span class="char16">ﾖ</span><span class="char17">ﾗ</span><span class="char18">ﾛ</span><span class="char19">ﾜ</span><span class="char20">ﾝ</span><span class="char21">ﾝ</span><span class="char22">ﾗ</span><span class="char23">ﾛ</span><span class="char24">ﾝ</span><span class="char25">ﾛ</span><span class="char26">ﾜ</span><span class="char27">ﾝ</span><span class="char28">ﾝ</span><span class="char29">ﾕ</span><span class="char30">ﾖ</span><span class="char31">ﾕ</span><span class="char32">ﾖ</span><span class="char33">ﾖ</span>
</h4>
<a href="https://github.com/raphaklaus/matrix-fx" target="_blank" class="github-corner">
<svg version="1.1" style="fill:black; color:#15A015; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"x="0px" y="0px"
width="80px" height="80px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path d="M0,0l36.8,36.8h4.8l3.84,8.64L80,80V0H0z"/>
<path style="fill:#15A015;" d="M41.057,34.88c-4.641-2.976-2.977-6.208-2.977-6.208c0.96-2.208,0.48-3.52,0.48-3.52
c-0.416-2.112,0.928-0.736,0.928-0.736c1.249,1.472,0.672,3.52,0.672,3.52c-0.832,3.296,1.632,4.672,2.848,5.088"/>
<path class="octo-body" style="fill:#15A015;" d="M36.8,36.8c-0.032,0.032,1.184,0.48,1.536,0.128l4.448-4.416c1.024-0.768,1.983-1.024,2.72-0.96
c-2.688-3.392-4.704-7.744,0.512-12.992c1.504-1.472,3.264-2.176,5.088-2.24c0.192-0.512,1.121-2.368,3.744-3.488
c0,0,1.504,0.768,2.368,5.152c1.376,0.768,2.688,1.792,3.872,2.944c1.152,1.152,2.176,2.496,2.944,3.904
c4.384,0.832,5.184,2.336,5.184,2.336c-1.151,2.624-3.008,3.552-3.487,3.744c-0.097,1.856-0.769,3.584-2.272,5.088
c-5.248,5.248-9.601,3.2-12.992,0.512c0.063,0.896-0.319,2.176-1.601,3.456L45.12,43.68c-0.384,0.385,0.192,1.729,0.256,1.696
L36.8,36.8z"/>
<path style="transform-origin: 130px 106px;" class="octo-glasses" d="M60.053,29.646c-1.499-1.55-3.418-2.128-4.285-1.289c-0.87,0.84-0.36,2.776,1.138,4.329c1.497,1.55,3.416,2.127,4.285,1.289
C62.061,33.136,61.549,31.198,60.053,29.646z M57.478,28.397l-3.224-3.403l-0.113,0.108l3.224,3.402L57.478,28.397z M53.138,22.456
c-1.499-1.55-3.418-2.128-4.285-1.289c-0.87,0.84-0.36,2.776,1.138,4.329c1.497,1.55,3.416,2.127,4.285,1.289
C55.146,25.946,54.634,24.009,53.138,22.456z"/>
</svg>
</a>
<style>
.octo-glasses{animation:octocat-wave 860ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(5deg)}40%,80%{transform:rotate(5deg)}}@media (max-width:500px){.octo-glasses{animation:none}.github-corner .octo-glasses{animation:octocat-wave 860ms ease-in-out}}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73717092-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>