Merge pull request #81 from palladius/carousel

Carousel for speakers

Author: emilianodellacasa

rubycon.it/_data/speakers.yml

@@ -22,3 +22,8 @@
   role: Full-Stack Ruby On Rails Developer
   description: "Julia is from Barcelona and has been working with Rails for almost 15 years."
   labels: [ruby, ruby on rails]
+- avatar: '/assets/images/logo/0_0.jpeg'
+  full_name: Julius Caesar
+  role: Senior Ruby developer @Gallia 3P
+  description: cooming soon.
+  labels: [ruby, ruby on rails]

rubycon.it/_includes/speakers.html

@@ -1,33 +1,89 @@
 {% capture speakers_content %}
-<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-    {% for speaker in site.data.speakers %}
-    <div class="my-card rounded-lg overflow-hidden shadow-md transition duration-300">
-        <div class="relative" data-aos="fade-zoom">
-            <img src="{{ speaker.avatar | relative_url }}" alt="{{ speaker.full_name }}"
-                class="w-full h-64 object-cover">
-            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
-            <div class="absolute bottom-4 left-4">
-                <h3 class="text-white text-2xl font-bold">{{ speaker.full_name }}</h3>
-                <p class="text-red-200">{{ speaker.role }}</p>
-            </div>
-        </div>
-        <div class="p-6" data-aos="fade-zoom">
-            <div class="text-gray-600 mb-4">{{ speaker.description | markdownify }}</div>
-            <div class="flex space-x-2">
-                {% for label in speaker.labels %}
-                <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">{{ label }}</span>
-                {% endfor %}
+<div id="speakers-wrapper" class="overflow-hidden relative">
+        <div class="flex speakers-track">
+            {% for speaker in site.data.speakers %}
+            <div class="my-card mx-3 rounded-lg overflow-hidden shadow-md transition duration-300">
+                <div class="relative">
+                    <img src="{{ speaker.avatar | relative_url }}" alt="{{ speaker.full_name }}" class="w-full h-64 object-cover">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                    <div class="absolute bottom-4 left-4">
+                        <h3 class="text-white text-2xl font-bold">{{ speaker.full_name }}</h3>
+                        <p class="text-red-200">{{ speaker.role }}</p>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="text-gray-600 mb-4">{{ speaker.description | markdownify }}</div>
+                    <div class="flex space-x-2">
+                        {% for label in speaker.labels %}
+                            <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">{{ label }}</span>
+                        {% endfor %}
+                    </div>
+                </div>
             </div>
+            {% endfor %}
         </div>
     </div>
-    {% endfor %}
 </div>
 {% endcapture %}
 
 {% include section.html
-id="speakers"
-title="II. &nbsp;Featured speakers"
-description="We are humbled by the huge response to our CFP: over 40 submissions! We are currently evaluating them and
-will announce the speakers soon."
-content=speakers_content
-%}
+    id="speakers"
+    title="II. &nbsp;Featured speakers"
+    description="We are humbled by the huge response to our CFP: over 40 submissions! We are currently evaluating them and
+    will announce the speakers soon."
+    content=speakers_content
+%}
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        gsap.registerPlugin(Draggable);
+
+        const track = document.querySelector('.speakers-track');
+        track.innerHTML += track.innerHTML; //temporary cause few speakers
+
+        const contentWidth = track.scrollWidth / 2;
+
+        let x = 0;
+        const speed = 0.8;
+        let isPaused = false;
+
+        function animate() {
+            if (!isPaused) {
+            x -= speed;
+            }
+
+            // wrap infinito
+            if (x <= -contentWidth) x += contentWidth;
+            if (x >= 0) x -= contentWidth;
+
+            gsap.set(track, { x });
+
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+
+        // DRAG (mouse + touch)
+        Draggable.create(track, {
+            type: "x",
+            allowNativeTouchScrolling: false,
+
+            onPress() {
+            isPaused = true;
+            },
+
+            onDrag() {
+            x += this.deltaX;
+            },
+
+            onRelease() {
+            isPaused = false;
+            }
+        });
+
+        // DESKTOP hover
+        track.addEventListener("pointerenter", () => isPaused = true);
+        track.addEventListener("pointerleave", () => isPaused = false);
+    })
+</script>
+

rubycon.it/_layouts/default.html

@@ -31,6 +31,8 @@
 
     {% include footer.html %}
 
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Draggable.min.js"></script>
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
         AOS.init({duration: 500})

rubycon.it/assets/css/style.scss

@@ -46,9 +46,40 @@ header,
 section:nth-of-type(even):not(#newsletter) {
   color: white;
 }
+#speakers-wrapper{
+    mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    #500011 7%,
+    #500011 92%,
+    transparent 100%
+  );
+
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    #500011 7%,
+    #500011 92%,
+    transparent 100%
+  );
+}
+.speakers-track {
+  will-change: transform;
+  cursor: grab;
+}
+
+.speakers-track:active {
+  cursor: grabbing;
+}
+
+.speakers-track > * {
+  flex-shrink: 0;
+}
 
 .my-card {
   background-color: variables.$background-secondary;
+  flex-shrink: 0;
+  width: 350px;
 }
 
 .my-card:hover {
@@ -250,4 +281,9 @@ section:nth-of-type(even):not(#newsletter) {
   color: inherit;
   font-size: 1rem;
   padding: 0;
+}
+@media screen and (max-width: 600px) {
+  .my-card{
+    width: 300px;
+  }
 }