Moving Polygons
How do I make an moving polygons?
I love the Species in Pieces site – species-in-pieces.com – and made a little copycat. But it's not an animal, just polygons. But still, pretty fun.. What is a moving polygons? How do you make a moving polygons? This script and codes were developed by James Steinbach on 05 November 2022, Saturday.
Moving Polygons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving Polygons</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>The animation is webkit-only till the other browsers catch up. Inspired by <a href="http://www.species-in-pieces.com/" title="Species in Pieces">Species in Pieces</a>.</p>
<button class="toggle">Move It</button>
<div class="container"> <div class="poly"></div> <div class="poly"></div> <div class="poly"></div> <div class="poly"></div> <div class="poly"></div> <div class="poly"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Moving Polygons - Script Codes CSS Codes
p { text-align: center;
}
.container { background: #ccc; margin: 2em auto; width: 90%; height: 0; padding-top: 60%; position: relative;
}
button { display: block; width: 10em; border: 1px solid red; box-shadow: none; margin: 2em auto 0; background: none; text-transform: uppercase; padding: .6em 1em .5em;
}
.poly { background: rgba(255, 0, 0, 0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all .75s ease-in-out; transition: all .75s ease-in-out;
}
.poly:first-child { -webkit-clip-path: polygon(45% 25%, 40% 70%, 75% 30%); clip-path: polygon(45% 25%, 40% 70%, 75% 30%);
}
.poly:nth-child(2) { -webkit-clip-path: polygon(45% 25%, 40% 70%, 25% 30%); clip-path: polygon(45% 25%, 40% 70%, 25% 30%);
}
.poly:nth-child(3) { -webkit-clip-path: polygon(65% 85%, 40% 70%, 75% 30%); clip-path: polygon(65% 85%, 40% 70%, 75% 30%);
}
.poly:nth-child(4) { -webkit-clip-path: polygon(45% 25%, 60% 20%, 75% 30%); clip-path: polygon(45% 25%, 60% 20%, 75% 30%);
}
.poly:nth-child(5) { -webkit-clip-path: polygon(45% 25%, 60% 20%, 15% 5%); clip-path: polygon(45% 25%, 60% 20%, 15% 5%);
}
.poly:nth-child(6) { -webkit-clip-path: polygon(45% 25%, 25% 30%, 15% 5%); clip-path: polygon(45% 25%, 25% 30%, 15% 5%);
}
.poly:nth-child(1) { background-color: rgba(255, 0, 0, 0.75);
}
.poly:nth-child(2) { background-color: rgba(255, 0, 0, 0.7);
}
.poly:nth-child(3) { background-color: rgba(255, 0, 0, 0.65);
}
.poly:nth-child(4) { background-color: rgba(255, 0, 0, 0.6);
}
.poly:nth-child(5) { background-color: rgba(255, 0, 0, 0.55);
}
.poly:nth-child(6) { background-color: rgba(255, 0, 0, 0.5);
}
.moved .poly:first-child { -webkit-clip-path: polygon(35% 50%, 55% 65%, 90% 45%); clip-path: polygon(35% 50%, 55% 65%, 90% 45%);
}
.moved .poly:nth-child(2) { -webkit-clip-path: polygon(35% 50%, 55% 65%, 10% 60%); clip-path: polygon(35% 50%, 55% 65%, 10% 60%);
}
.moved .poly:nth-child(3) { -webkit-clip-path: polygon(65% 85%, 55% 65%, 90% 45%); clip-path: polygon(65% 85%, 55% 65%, 90% 45%);
}
.moved .poly:nth-child(4) { -webkit-clip-path: polygon(35% 50%, 40% 10%, 90% 45%); clip-path: polygon(35% 50%, 40% 10%, 90% 45%);
}
.moved .poly:nth-child(5) { -webkit-clip-path: polygon(35% 50%, 40% 10%, 15% 5%); clip-path: polygon(35% 50%, 40% 10%, 15% 5%);
}
.moved .poly:nth-child(6) { -webkit-clip-path: polygon(35% 50%, 10% 60%, 15% 5%); clip-path: polygon(35% 50%, 10% 60%, 15% 5%);
}
.moved .poly:nth-child(1) { background-color: rgba(0, 0, 255, 0.875);
}
.moved .poly:nth-child(2) { background-color: rgba(0, 0, 255, 0.75);
}
.moved .poly:nth-child(3) { background-color: rgba(0, 0, 255, 0.625);
}
.moved .poly:nth-child(4) { background-color: rgba(0, 0, 255, 0.5);
}
.moved .poly:nth-child(5) { background-color: rgba(0, 0, 255, 0.375);
}
.moved .poly:nth-child(6) { background-color: rgba(0, 0, 255, 0.25);
}
Moving Polygons - Script Codes JS Codes
$('.toggle').click(function(e) { e.preventDefault(); $('.container').toggleClass('moved');
})
Developer | James Steinbach |
Username | jdsteinbach |
Uploaded | November 05, 2022 |
Rating | 3 |
Size | 3,143 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sphere Spin | 4,204 Kb |
Animated Form Focus | 2,968 Kb |
Adding Shadow to SVG elements | 2,501 Kb |
FlexBox Gallery | 2,205 Kb |
Parallax-ish Sliding Content | 2,748 Kb |
Swinging Door Menu | 9,013 Kb |
Using a gradient for a border | 2,138 Kb |
Testing Newer Width Values | 2,449 Kb |
A Pen by James Steinbach | 2,612 Kb |
Sass Geometric Pattern Generator | 2,020 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Weather App | Kw7oe | 3,162 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!