Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Artur Sniegowski - added animation #2433

Merged
merged 2 commits into from
Jan 30, 2024
Merged

Artur Sniegowski - added animation #2433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a20d69
Artur Sniegowski - added animation
Nov 20, 2023
ba9bfe0
Merge branch 'master' into artursniegowski-adding-animation
LaurelineP Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Art/artursniegowski/img/blue-cloud.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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