Skip to content

Commit

Permalink
Artur Sniegowski - added animation (#2433)
Browse files Browse the repository at this point in the history 
Co-authored-by: artur.sniegowski <username@users.noreply.github.com>
Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
  • Loading branch information
@artursniegowski @LaurelineP
3 people committed Jan 30, 2024
1 parent ead6676 commit 64aa357
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 1 deletion.
Binary file added Art/artursniegowski/img/blue-cloud.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions Art/artursniegowski/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Moving Clouds Animation</title>
</head>
<body>
<div class="sky">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
<div class="cloud cloud4"></div>
<div class="cloud cloud5"></div>
<div class="cloud cloud6"></div>
<div class="cloud cloud7"></div>
<div class="cloud cloud8"></div>
<div class="cloud cloud9"></div>
<div class="cloud cloud10"></div>
<div class="cloud cloud11"></div>
<div class="cloud cloud12"></div>
<div class="cloud cloud13"></div>
<div class="cloud cloud14"></div>
<div class="cloud cloud15"></div>
<div class="cloud cloud16"></div>
<div class="cloud cloud17"></div>
<div class="cloud cloud18"></div>
<div class="cloud cloud19"></div>
<div class="cloud cloud20"></div>
<div class="cloud cloud21"></div>
<div class="cloud cloud22"></div>
<div class="cloud cloud23"></div>
<div class="cloud cloud24"></div>
<div class="cloud cloud25"></div>
<div class="cloud cloud26"></div>
<div class="cloud cloud27"></div>
<div class="cloud cloud28"></div>
<div class="cloud cloud29"></div>
<div class="cloud cloud30"></div>
<div class="cloud cloud31"></div>
<div class="cloud cloud32"></div>
<div class="cloud cloud33"></div>
<div class="cloud cloud34"></div>
<div class="cloud cloud35"></div>
<div class="cloud cloud36"></div>
<div class="cloud cloud37"></div>
<div class="cloud cloud38"></div>
<div class="cloud cloud39"></div>
<div class="cloud cloud40"></div>
<div class="cloud cloud41"></div>
<div class="cloud cloud42"></div>
<div class="cloud cloud43"></div>
<div class="cloud cloud44"></div>
<div class="cloud cloud45"></div>
<div class="cloud cloud46"></div>
<div class="cloud cloud47"></div>
<div class="cloud cloud48"></div>
<div class="cloud cloud49"></div>
<div class="cloud cloud50"></div>
<div class="cloud cloud51"></div>
<div class="cloud cloud52"></div>
<div class="cloud cloud53"></div>
<div class="cloud cloud54"></div>
<div class="cloud cloud55"></div>
<div class="cloud cloud56"></div>
<div class="cloud cloud57"></div>
<div class="cloud cloud58"></div>
<div class="cloud cloud59"></div>
<div class="cloud cloud60"></div>
<div class="cloud cloud61"></div>
<div class="cloud cloud62"></div>
<div class="cloud cloud63"></div>
<div class="cloud cloud64"></div>
<div class="cloud cloud65"></div>
<div class="cloud cloud66"></div>
<div class="cloud cloud67"></div>
<div class="cloud cloud68"></div>
<div class="cloud cloud69"></div>
<div class="cloud cloud70"></div>
</div>
</body>
</html>
Binary file added Art/artursniegowski/moving_clouds.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions Art/artursniegowski/styles.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
10 changes: 9 additions & 1 deletion include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit 64aa357

Please sign in to comment.