progress on sliders' parallax - todo changes

This commit is contained in:
Alex Martzios 2022-07-20 16:32:33 +03:00
parent 8545a1cd7f
commit 8f12fe89c4
14 changed files with 24 additions and 14 deletions

View File

@ -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-width-expand uk-first-column">
<div class="uk-grid" uk-grid style="height: 100vh;">
<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"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
style="width: 40%;">
<img class="uk-position-center" src="assets/explore-assets/home/tablet.png" alt="ipad" loading="lazy"
style="width: 75%;">
<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>

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 810 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 374 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 255 KiB

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