progress on sliders' parallax - todo changes

explore/src/app/home/home.component.html

@@ -143,7 +143,7 @@
 	</div>
 
 	<ng-template #scrolling_text let-position_class="position_class">
-    <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
+    <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 15%; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
       <h3 class="uk-h2">
         <span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
       </h3>
@@ -159,7 +159,7 @@
 				<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/deposit/learn-how">Start Deposit</a>
 			</div>
     </div>
-    <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%">
+    <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%">
       <h3 class="uk-h2">
         <span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
       </h3>
@@ -169,7 +169,6 @@
 				that reaches out to many external sources via APIs, and
 				claim them to your Grant or ORCID. Use the service to provide
 				meaningful links between publications-datasets-software.
-				
 			</p>
 			<div class="uk-margin-medium-top">
 				<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/claim">Start Linking</a>
@@ -182,21 +181,32 @@
       <div class="uk-width-1-1">
         <h2 class="uk-h1 uk-margin-large-top">Share your research<span class="uk-text-primary">.</span></h2>
       </div>
-      <div id="js-sticky-parallax-images-all" style="min-height: 200vh">
+      <div id="js-sticky-parallax-images-all" style="min-height: 400vh">
         <div class="uk-visible@m uk-height-viewport explore-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
-          <div class="uk-grid" uk-grid>
+          <div class="uk-grid" uk-grid style="height: 100vh;">
-            <div class="uk-width-expand uk-first-column">
+            <div class="uk-width-expand uk-first-column uk-position-relative uk-height-1-1">
               <div class="explore-dark-logo-background">
                 <div uk-parallax="target: #js-sticky-parallax-images-all;">
-                  <img class="uk-position-center-left" src="assets/explore-assets/home/landscape.png" alt="ipad" loading="lazy"
+									<img class="uk-position-center" src="assets/explore-assets/home/tablet.png" alt="ipad" loading="lazy"
-										uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
+										style="width: 75%;">
-										style="width: 40%;">
+									<img class="uk-position-center" src="assets/explore-assets/home/1.png" alt="ipad" loading="lazy"
+										uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0"
+										style="width: 68%;">
+									<img class="uk-position-center" src="assets/explore-assets/home/2.png" alt="ipad" loading="lazy"
+										uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 20%,1 99%,0; easing:0"
+										style="width: 68%;">
+									<img class="uk-position-center" src="assets/explore-assets/home/4.png" alt="ipad" loading="lazy"
+										uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 260vh; opacity: 0,1 20%,1 99%,0; easing:0"
+										style="width: 68%;">
+									<img class="uk-position-center" src="assets/explore-assets/home/5.png" alt="ipad" loading="lazy"
+										uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 310vh; opacity: 0,1 20%,1; easing:0"
+											style="width: 68%;">
                 </div>
               </div>
             </div>
-            <div class="uk-inline uk-width-expand">
+            <div class="uk-inline uk-width-expand uk-height-1-1">
               <div>
-                <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
+                <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 30vh;">
                   <ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
                 </div>
               </div>

explore/src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 63fe4d2e5a2a15db1b69090628351172593fa0c0
+Subproject commit 97250479ed9663156c64e356cdd06423742e9b18

explore/src/assets/common-assets

@@ -1 +1 @@
-Subproject commit f6bd64ca6f99fdff03c8368eb381d42871154512
+Subproject commit 5f6ce90db8213df9d88cff0231b0913543d2ed36

explore/src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 8ab6475aa4b15146e8047a614856dcff09714af6
+Subproject commit 84d1673acc7f9368d219670c0c170d305b84ef7a