Merge pull request #383 from NehaaAcharya/feature/infinite-scrolling

Implemented infinite scrolling on example images in index.html

Author: multiverseweb

index.html

@@ -163,7 +163,7 @@
     <div class="section" id="charts">
         <p class="heading reveal">Here are some examples of what you can do with Dataverse</p>
         <div class="examples reveal" id="examples">
-
+            
             <img src="website/web_images/volcano.gif" alt="">
             <img src="website/web_images/live.gif" alt="">
             <img src="https://i0.wp.com/learnbyinsight.com/wp-content/uploads/2020/09/sub-plot.png?resize=600%2C398&ssl=1"

website/styles/style.css

@@ -1209,6 +1209,40 @@ input {
     padding: 10px;
     border: 1px solid rgba(128, 128, 128, 0.352);
 }
+/* Infinite scroll */
+#examples, #examples2 {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    width: 100%;
+}
+
+.examples img {
+    margin-right: 20px; 
+    width: 200px; 
+}
+
+#examples:not(:hover) img,#examples2:not(:hover) img{
+    animation: scrollImages 10s linear infinite;
+}
+
+#examples:hover img, #examples2:hover img {
+    animation-play-state: paused;
+}
+
+
+#examples img:hover, #examples2 img:hover {
+    animation-play-state: paused;
+}
+
+@keyframes scrollImages {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
 /*===========================RESPONSIVE===================================*/
 @media screen and (max-width: 660px) {
     .navbarButton {