add tablet assets for connect homepage-slider

This commit is contained in:
Alex Martzios 2022-07-29 10:45:28 +03:00
parent 7169c182fc
commit ebb0f5090a
9 changed files with 38 additions and 19 deletions

View File

@ -29,7 +29,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 - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Find a repository to deposit </span>
<span>your {{entities.RESULT | lowercase}}</span>
@ -49,20 +49,20 @@
<span class="uk-text-primary">overview at a glance.</span>
</h3>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%,1 99%,0">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%,1">
<h3 class="uk-h2">
<span class="uk-text-primary">Search & browse </span>
<span>your community's {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span>
</h3>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 300vh; end: 100% + 100vh - 350vh; opacity: 0,1 20%,1">
<!-- <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 300vh; end: 100% + 100vh - 350vh; opacity: 0,1 20%,1">
<h3 class="uk-h2">
<span class="uk-text-primary">View statistics </span>
<span>for your community's {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span>
</h3>
</div>
</div> -->
</ng-template>
<div class="uk-section uk-section-secondary">
<div class="uk-container uk-container-large">
@ -72,20 +72,32 @@
Find the best for your community<span class="uk-text-primary">.</span>
</h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 350vh">
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-visible@m uk-height-viewport connect-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid uk-child-width-1-2" uk-grid>
<div>
<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="connect-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<img class="uk-position-center-left" src="" alt="" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0" style="height: 70vh">
<img class="uk-position-center" src="assets/connect-assets/home/tablet.png" alt="ipad" loading="lazy"
style="width: 70%;">
<img class="uk-position-center" src="assets/connect-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: 70%;">
<img class="uk-position-center" src="assets/connect-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: 70%;">
<img class="uk-position-center" src="assets/connect-assets/home/3.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: 70%;">
<img class="uk-position-center" src="assets/connect-assets/home/4.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: 70%;">
</div>
</div>
</div>
<div class="uk-inline uk-flex">
<div class="uk-width-3-4@l uk-width-1-1">
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
<div class="uk-inline uk-width-expand uk-height-1-1">
<div class="uk-width-3-4@l">
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 40vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
</div>
</div>
@ -94,10 +106,17 @@
</div>
<div class="uk-hidden@m uk-height-viewport connect-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div class="uk-flex uk-flex-column uk-flex-middle">
<div class="connect-dark-logo-background uk-inline uk-width-1-1" style="height: 50vh;">
<div class="uk-position-center uk-height-1-1" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<img class="uk-height-1-1" src="" alt="" loading="lazy">
</div>
<div class="connect-dark-logo-background uk-inline uk-width-1-1" style="height: 40vh;">
<img class="uk-position-center" src="assets/connect-assets/home/tablet.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all;">
<img class="uk-position-center" src="assets/connect-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">
<img class="uk-position-center" src="assets/connect-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">
<img class="uk-position-center" src="assets/connect-assets/home/3.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">
<img class="uk-position-center" src="assets/connect-assets/home/4.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">
</div>
<div class="uk-inline uk-width-2-3">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>

@ -1 +1 @@
Subproject commit 82833bcf11e2a4a9ed9e24c6b54a2a3750a681e0
Subproject commit a41ef51cda49c26cf35460aea273acc6b1f9896e

@ -1 +1 @@
Subproject commit d689686aa89aadae1e58b315fe4aa8e720b320b5
Subproject commit dfefbe4421d15e05f64bbde27ad68b2ab9363f2f

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

@ -1 +1 @@
Subproject commit 98b30a43f1810bcdbc96f119f3f021a1d7872714
Subproject commit 0e650a002b6f77957fcbe06b3609c8985c96dd2a