diff --git a/Art/artursniegowski/img/blue-cloud.png b/Art/artursniegowski/img/blue-cloud.png new file mode 100644 index 000000000..98eefe5d4 Binary files /dev/null and b/Art/artursniegowski/img/blue-cloud.png differ diff --git a/Art/artursniegowski/index.html b/Art/artursniegowski/index.html new file mode 100644 index 000000000..71c349030 --- /dev/null +++ b/Art/artursniegowski/index.html @@ -0,0 +1,83 @@ + + + + + + + Moving Clouds Animation + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Art/artursniegowski/moving_clouds.gif b/Art/artursniegowski/moving_clouds.gif new file mode 100644 index 000000000..5d7c94442 Binary files /dev/null and b/Art/artursniegowski/moving_clouds.gif differ diff --git a/Art/artursniegowski/styles.css b/Art/artursniegowski/styles.css new file mode 100644 index 000000000..bb4dec393 --- /dev/null +++ b/Art/artursniegowski/styles.css @@ -0,0 +1,114 @@ +body { + margin: 0; + overflow: hidden; +} + +.sky { + width: 100vw; + height: 100vh; + position: relative; + background-color: #87CEEB; /* Sky Blue */ + animation: moveSky 10s linear infinite; +} + +.cloud { + /* 1,33 ratio */ + width: 100px; + height: 75px; + background-size:cover; + position: absolute; + /*image from www.textures4photoshop.com */ + background-image: url('img/blue-cloud.png'); + background-size: cover; + opacity: 0.5; +} + + +.cloud1 { top: 20%; left: 10%; width: 250px; height: 185px; animation: moveCloud 14s linear infinite; } +.cloud2 { top: 25%; left: 15%; width: 250px; height: 185px; animation: moveCloud 15s linear infinite; } +.cloud3 { top: 30%; left: 20%; width: 250px; height: 185px; animation: moveCloud 16s linear infinite; } +.cloud4 { top: 35%; left: 25%; width: 350px; height: 260px; animation: moveCloud 17s linear infinite; } +.cloud5 { top: 40%; left: 30%; width: 250px; height: 185px; animation: moveCloud 18s linear infinite; } +.cloud6 { top: 45%; left: 35%; width: 250px; height: 185px; animation: moveCloud 19s linear infinite; } +.cloud7 { top: 50%; left: 40%; width: 250px; height: 185px; animation: moveCloud 20s linear infinite; } +.cloud8 { top: 55%; left: 35%; width: 250px; height: 185px; animation: moveCloud 21s linear infinite; } +.cloud9 { top: 50%; left: 40%; width: 350px; height: 260px; animation: moveCloud 22s linear infinite; } +.cloud10 { top: 45%; left: 0%; width: 250px; height: 185px; animation: moveCloud 23s linear infinite; } +.cloud11 { top: 40%; left: 5%; width: 250px; height: 185px; animation: moveCloud 24s linear infinite; } +.cloud12 { top: 35%; left: 15%; width: 150px; height: 70px; animation: moveCloud 25s linear infinite; } +.cloud13 { top: 30%; left: 10%; width: 250px; height: 185px; animation: moveCloud 26s linear infinite; } +.cloud14 { top: 25%; left: 25%; width: 350px; height: 260px; animation: moveCloud 27s linear infinite; } +.cloud15 { top: 20%; left: 20%; width: 250px; height: 185px; animation: moveCloud 28s linear infinite; } +.cloud16 { top: 25%; left: 35%; width: 250px; height: 185px; animation: moveCloud 29s linear infinite; } +.cloud17 { top: 30%; left: 30%; width: 250px; height: 185px; animation: moveCloud 16s linear infinite; } +.cloud18 { top: 35%; left: 40%; width: 250px; height: 185px; animation: moveCloud 17s linear infinite; } +.cloud19 { top: 40%; left: 35%; width: 350px; height: 260px; animation: moveCloud 18s linear infinite; } +.cloud20 { top: 45%; left: -5%; width: 250px; height: 185px; animation: moveCloud 19s linear infinite; } +.cloud21 { top: 50%; left: 0%; width: 250px; height: 185px; animation: moveCloud 20s linear infinite; } +.cloud22 { top: 45%; left: 10%; width: 250px; height: 185px; animation: moveCloud 21s linear infinite; } +.cloud23 { top: 40%; left: 20%; width: 250px; height: 185px; animation: moveCloud 22s linear infinite; } +.cloud24 { top: 35%; left: 35%; width: 350px; height: 260px; animation: moveCloud 23s linear infinite; } +.cloud25 { top: 30%; left: -15%; width: 250px; height: 185px; animation: moveCloud 24s linear infinite; } +.cloud26 { top: 25%; left: -20%; width: 250px; height: 185px; animation: moveCloud 25s linear infinite; } +.cloud27 { top: 20%; left: 25%; width: 250px; height: 185px; animation: moveCloud 26s linear infinite; } +.cloud28 { top: 15%; left: 35%; width: 250px; height: 185px; animation: moveCloud 27s linear infinite; } +.cloud29 { top: 35%; left: 25%; width: 350px; height: 260px; animation: moveCloud 27s linear infinite; } +.cloud30 { top: 45%; left: 0%; width: 250px; height: 185px; animation: moveCloud 27s linear infinite; } +.cloud31 { top: 20%; left: 10%; width: 250px; height: 185px; animation: moveCloud 24s linear infinite; } +.cloud32 { top: 25%; left: -15%; width: 250px; height: 185px; animation: moveCloud 23s linear infinite; } +.cloud33 { top: 30%; left: -10%; width: 250px; height: 185px; animation: moveCloud 22s linear infinite; } +.cloud34 { top: 35%; left: -15%; width: 150px; height: 100px; animation: moveCloud 21s linear infinite; } +.cloud35 { top: 40%; left: -10%; width: 350px; height: 260px; animation: moveCloud 20s linear infinite; } +.cloud36 { top: 45%; left: -15%; width: 250px; height: 185px; animation: moveCloud 22s linear infinite; } +.cloud37 { top: 50%; left: -5%; width: 250px; height: 185px; animation: moveCloud 23s linear infinite; } +.cloud38 { top: 55%; left: -15%; width: 250px; height: 185px; animation: moveCloud 24s linear infinite; } +.cloud39 { top: 50%; left: -10%; width: 250px; height: 185px; animation: moveCloud 25s linear infinite; } +.cloud40 { top: 45%; left: -8%; width: 350px; height: 260px; animation: moveCloud 26s linear infinite; } +.cloud41 { top: 40%; left: -5%; width: 250px; height: 185px; animation: moveCloud 27s linear infinite; } +.cloud42 { top: 35%; left: -15%; width: 250px; height: 185px; animation: moveCloud 28s linear infinite; } +.cloud43 { top: 30%; left: -10%; width: 250px; height: 185px; animation: moveCloud 29s linear infinite; } +.cloud44 { top: 25%; left: -15%; width: 250px; height: 185px; animation: moveCloud 30s linear infinite; } +.cloud45 { top: 20%; left: -20%; width: 350px; height: 260px; animation: moveCloud 31s linear infinite; } +.cloud46 { top: 25%; left: -10%; width: 250px; height: 185px; animation: moveCloud 29s linear infinite; } +.cloud47 { top: 30%; left: -15%; width: 150px; height: 100px; animation: moveCloud 28s linear infinite; } +.cloud48 { top: 35%; left: -25%; width: 250px; height: 185px; animation: moveCloud 27s linear infinite; } +.cloud49 { top: 40%; left: -20%; width: 350px; height: 260px; animation: moveCloud 26s linear infinite; } +.cloud50 { top: 45%; left: -5%; width: 250px; height: 185px; animation: moveCloud 25s linear infinite; } +.cloud51 { top: 50%; left: 10%; width: 250px; height: 185px; animation: moveCloud 24s linear infinite; } +.cloud52 { top: 45%; left: -10%; width: 250px; height: 185px; animation: moveCloud 23s linear infinite; } +.cloud53 { top: 40%; left: -9%; width: 350px; height: 260px; animation: moveCloud 22s linear infinite; } +.cloud54 { top: 35%; left: -5%; width: 250px; height: 185px; animation: moveCloud 15s linear infinite; } +.cloud55 { top: 30%; left: -15%; width: 250px; height: 185px; animation: moveCloud 14s linear infinite; } +.cloud56 { top: 25%; left: -2%; width: 250px; height: 185px; animation: moveCloud 16s linear infinite; } +.cloud57 { top: 20%; left: -3%; width: 350px; height: 260px; animation: moveCloud 17s linear infinite; } +.cloud58 { top: 15%; left: -15%; width: 250px; height: 185px; animation: moveCloud 18s linear infinite; } +.cloud59 { top: 35%; left: -5%; width: 150px; height: 100px; animation: moveCloud 17s linear infinite; } +.cloud60 { top: 45%; left: 10%; width: 250px; height: 185px; animation: moveCloud 16s linear infinite; } +.cloud61 { top: 50%; left: 10%; width: 250px; height: 185px; animation: moveCloud 40s linear infinite; } +.cloud62 { top: 45%; left: -10%; width: 250px; height: 185px; animation: moveCloud 41s linear infinite; } +.cloud63 { top: 40%; left: -9%; width: 350px; height: 260px; animation: moveCloud 42s linear infinite; } +.cloud64 { top: 35%; left: -5%; width: 250px; height: 185px; animation: moveCloud 39s linear infinite; } +.cloud65 { top: 30%; left: -15%; width: 250px; height: 185px; animation: moveCloud 42s linear infinite; } +.cloud66 { top: 25%; left: -2%; width: 250px; height: 185px; animation: moveCloud 41s linear infinite; } +.cloud67 { top: 20%; left: -3%; width: 350px; height: 260px; animation: moveCloud 39s linear infinite; } +.cloud68 { top: 15%; left: -15%; width: 250px; height: 185px; animation: moveCloud 40s linear infinite; } +.cloud69 { top: 35%; left: -5%; width: 150px; height: 100px; animation: moveCloud 38s linear infinite; } +.cloud70 { top: 45%; left: 0%; width: 250px; height: 185px; animation: moveCloud 45s linear infinite; } + +@keyframes moveSky { + 0%, 100% { + background-color: #87CEEB; + } + 50% { + background-color: #6CA6CD; + } +} + +@keyframes moveCloud { + 0% { + transform: translateX(-50vw); + } + 100% { + transform: translateX(120vw); + } +} \ No newline at end of file diff --git a/include.js b/include.js index b5fb5364b..cfbf1d4e0 100644 --- a/include.js +++ b/include.js @@ -2880,7 +2880,15 @@ let cards = [ author: 'Jay', githubLink: 'https://github.com/moutro' }, - { artName: 'First Animation', + { + artName: 'Moving Clouds Animation', + pageLink: './Art/artursniegowski/index.html', + imageLink: './Art/artursniegowski/moving_clouds.gif', + author: 'Artur Sniegowski', + githubLink: 'https://github.com/artursniegowski' + }, + { + artName: 'First Animation', pageLink: './Art/Kalliran/index.html', imageLink: './Art/Kalliran/Animation-Nation.gif', author: 'Kalliran',