├── README.md
├── css
├── reset.css
└── style.css
├── fix
├── SoundFix4allBrowser.md
└── indexwithsoundfix.html
├── images
├── background-equations.jpg
├── background-matrix.jpg
├── background-pepe.gif
├── background-sky.jpg
├── background-sky2.jpg
└── background-universe.jpg
├── index.html
└── sounds
├── mario-castle-theme.mp3
├── mario-owerworld-theme.mp3
├── mario-starman-theme.mp3
├── mario-underwater-theme.mp3
└── mario-underworld-theme.mp3
/README.md:
--------------------------------------------------------------------------------
1 | # mario
2 | An animated Mario made in HTML & CSS, and a little bit of JavaScript
3 |
4 | 
5 |
6 | ...Before the fork the animation was completely written in css and html.
7 | I just added a bit of javascript code to animate the background a little, I added some catchy bacgrounds, and the sounds that start in autoplay.
8 | The code works well with the latest generation of browsers (Opera, Chrome), Mozilla works well (apart from the audio that does not work) while IE can not manage the background in motion and give white screen ...
9 |
10 | I inserted six backgrounds and five songs that you can easily change as you please.
11 |
12 | The six backgrounds are:
13 |
14 | Sky:
15 |
16 | 
17 |
18 |
19 | Sky2:
20 |
21 | 
22 |
23 |
24 | Universe:
25 |
26 | 
27 |
28 |
29 |
30 | Matrix:
31 |
32 | 
33 |
34 |
35 | Equations:
36 |
37 | 
38 |
39 |
40 | Pepe Cash Meme WATCHES YOU!:
41 |
42 |
43 | (is a surprise, if you want to see it, download and try)
44 |
45 | 
46 |
47 |
48 |
49 | To change the background it is enough to replace the name of the image in the string highlighted in the image
50 |
51 | (find the images inside the images folder)
52 |
53 |
54 |
55 | 
56 |
57 |
58 |
59 |
60 | The 5 Sounds are:
61 |
62 | -OverWorld Theme
63 |
64 | -UnderWorld Theme
65 |
66 | -UnderWater Theme
67 |
68 | -Castel Theme
69 |
70 | -StarMan Theme
71 |
72 |
73 | (All from Super Mario Bros 1)
74 |
75 | You can find the playlist with animations and sound here:
76 |
77 | https://www.youtube.com/watch?v=58vCUBjnwDE&list=PL_L_96uzfo-zQ_24f9iUvhOWQM-Z3cS8W
78 |
79 | (or if you prefire by clicking on the gif below)
80 |
81 |
82 |
113 |
114 |
115 |
Animated Super Mario made in CSS3.
6 | VIDEO
12 |
13 |
14 |
15 |
16 |
23 | Animated Super Mario made in CSS3.
6 |
12 |
13 |
14 |
15 |
16 |
23 | 
114 |
115 | 
5 |
6 | The original code uses audio files contained in the sounds folder as a source, which works well on Opera, Chrome and Safari, while with Internet Explorer and Mozilla the audio does not start in autoplay, but I could not fix it with the html5 tag.
7 | I had tried to embed directly youtube videos and then hide them with the tag hidden = "true", but since the audio files I used are the originals, and therefore protected by copyright, they were blocked directly by youtube, thus causing the failure audio autoplay; (
8 | But I managed to find a nice remix with a creative commons license of Super Mario Bros, this time it obviously worked and the audio part in autoplay on all the browsers except for safari.
9 | But i really hate apple so I do not give a fuck ...
10 |
11 |
12 |
13 |
14 | Find the file indexwithsoundfix.html, and replace the index.html with this; you're done ...
15 |
16 |
17 | 
42 |
43 |
44 | 
24 |
25 |
26 |