Export the workshop item into a separate file and add some nice parallax scrolling

Resources.qrc

@@ -57,5 +57,6 @@
         <file>assets/icons/icon_hand_left.svg</file>
         <file>assets/icons/icon_hand_right.svg</file>
         <file>assets/images/hand_give.png</file>
+        <file>qml/Components/WorkshopItem.qml</file>
     </qresource>
 </RCC>

qml/Components/Workshop.qml

@@ -1,8 +1,8 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
 
 CustomPage {
+    id: workshop
     pageName: ""
 
     Component.onCompleted: {
@@ -13,7 +13,6 @@ CustomPage {
         anchors.fill: parent
         flickableDirection: Flickable.VerticalFlick
 
-
         GridView {
             id: gridView
             cacheBuffer: 1000
@@ -22,7 +21,6 @@ CustomPage {
             cellWidth: 330
             cellHeight: 200
 
-
             boundsBehavior: Flickable.StopAtBounds
             //boundsBehavior: Flickable.OvershootBounds
             header: Item {
@@ -50,7 +48,25 @@ CustomPage {
                     }
                     Image {
                         id: bannerImg
-                        anchors.fill: parent
+                        anchors {
+
+                            right: parent.right
+                            left: parent.left
+                            bottom: parent.bottom
+                        }
+                        height: {
+                            // Calculate parallax scrolling
+                            // f(x) = (x * -1)
+                            if(gridView.contentY <= 0){
+                                return (gridView.contentY * -1)
+                            }
+                            return 500
+                        }
+
+                        onHeightChanged: {
+                            print(bannerImg.height, gridView.contentY)
+                        }
+
                         asynchronous: true
                         fillMode: Image.PreserveAspectCrop
                     }
@@ -76,27 +92,9 @@ CustomPage {
 
             model: workshopListModel
 
-            delegate: Rectangle {
-                color: "steelblue"
-                id: delegate
-                width: 180
-                height: 100
-                focus: true
-
-                Image {
-                    id: img
-                    anchors.fill: parent
-                    asynchronous: true
-                    cache: true
-                    source: workshopPreview
-                    smooth: false
-                }
-                Text {
-                    id: namea
-                    anchors.fill: parent
-                    text: workshopTitle
-                    color: "white"
-                }
+            delegate: WorkshopItem {
+                imgUrl: workshopPreview
+                name: workshopTitle
             }
 
             add: Transition {

qml/Components/WorkshopItem.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.7
+
+Rectangle {
+    id:workshopItem
+    color: "steelblue"
+
+    width: 188
+    height: 106
+    clip:true
+    radius: 4
+
+    property url imgUrl
+    property string name
+
+    Image {
+        id: img
+        anchors.fill: parent
+        asynchronous: true
+        clip:true
+        cache: true
+        source: workshopItem.imgUrl
+        smooth: false
+    }
+    Text {
+        id: namea
+        anchors.centerIn: parent
+        text: workshopItem.name
+        color: "white"
+    }
+}