[issue-05] create Spinning Hero

src/stories/components/SpinningImages/SpinningImages.js

@@ -0,0 +1,28 @@
+import './styles.scss';
+import Artwork1 from '../../../images/artwork-1.svg';
+import Artwork2 from '../../../images/artwork-2.svg';
+import React from 'react';
+
+/**
+ * Component for button element.
+ *
+ * @component
+ * @return {object} (
+ *   <SpinningImages />
+ * )
+ */
+export const SpinningImages = () => {
+  const imageArray = [
+    Artwork1,
+    Artwork2,
+  ];
+
+  return (
+    <div className="spinning-images">
+      { imageArray.map((image, i) =>
+        <img className="spinninng-images__image"
+          key={i} src={image} alt="Decorative Artwork" />)
+      }
+    </div>
+  );
+};

src/stories/components/SpinningImages/SpinningImages.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SpinningImages } from './SpinningImages';
+
+/**
+ * Example Component: SpinningImages
+ */
+export default {
+  title: 'Example/SpinningImages',
+  component: SpinningImages,
+};
+
+const Template = (args) => <SpinningImages {...args} />;
+
+// Default spinning featured image
+export const Default = Template.bind({});

src/stories/components/SpinningImages/styles.scss

@@ -0,0 +1,48 @@
+@import '../../../scss/variables.scss';
+
+// @file
+// Spinning Images
+
+.spinning-images {
+  animation: rotation 10s infinite cubic-bezier(0.25, 0.75, 0.5, 1.25);
+  transform-origin: bottom center;
+  position: absolute;
+
+  @include bp-desktop {
+    height: rem(400px);
+    width: rem(600px);
+  }
+}
+
+.spinninng-images__image {
+  left: 0;
+  position: absolute;
+
+  &:first-child {
+    bottom: 0;
+  }
+
+  &:last-child {
+    // margin-top: -2px;
+    top: 100%;
+    transform: rotate(-180deg);
+  }
+}
+
+@keyframes rotation {
+  25% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(-180deg);
+  }
+
+  75% {
+    transform: rotate(-180deg);
+  }
+
+  100% {
+    transform: rotate(-359deg);
+  }
+}