Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 31

Website: disable parallax animation on homepage and landing pages. (#16781)

Browse source 
Closes: #16771


Changes:
- Disabled the parallax animation on the footer image on the homepage
and product category landing pages.
- Added a static version of the cloud city footer image
This commit is contained in:
Eric 2024-02-13 10:13:22 -06:00 committed by GitHub
parent a9daca1b4d
commit fb75073a6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 101 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
website/assets/images/parallax-cloud-city/cloud-city-static-7050x600@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 308 KiB

80
website/assets/js/components/parallax-city.component.js vendored
View file

@ -54,26 +54,26 @@ parasails.registerComponent('parallaxCity', {
},
mounted: async function(){
if(!bowser.isMobile){
// Store a reference to the parent container, we'll use this to determine the elements position relative to the user's viewport.
this.parallaxCityElement = $('div[purpose="parallax-city-container"]')[0];
// Build an array of parallax layers, and set the initial bottom position of each layer to be negative the layer's scroll amount.
for(let layer of $('div.parallax-layer')) {
let scrollAmount = Number($(layer).attr('scroll-amount'));
$(layer).css('bottom', `-${scrollAmount}px`);
this.parallaxLayers.push({element: layer, scrollAmount});
}
// Determine the parallax image's position on the page/user's viewport.
this.getElementPositions();
// If the bottom of the element is within the user's viewport, update the positions of the layers.
if(this.parallaxCityElement.getBoundingClientRect().bottom > this.parallaxCityElement.offsetTop) {
this.scrollParallaxLayers();
}
// Add a scroll event listener
$(window).scroll(this.scrollParallaxLayers);
// Add a resize event listener.
$(window).resize(this.getElementPositions);
}
// if(!bowser.isMobile){
// // Store a reference to the parent container, we'll use this to determine the elements position relative to the user's viewport.
// this.parallaxCityElement = $('div[purpose="parallax-city-container"]')[0];
// // Build an array of parallax layers, and set the initial bottom position of each layer to be negative the layer's scroll amount.
// for(let layer of $('div.parallax-layer')) {
// let scrollAmount = Number($(layer).attr('scroll-amount'));
// $(layer).css('bottom', `-${scrollAmount}px`);
// this.parallaxLayers.push({element: layer, scrollAmount});
// }
// // Determine the parallax image's position on the page/user's viewport.
// this.getElementPositions();
// // If the bottom of the element is within the user's viewport, update the positions of the layers.
// if(this.parallaxCityElement.getBoundingClientRect().bottom > this.parallaxCityElement.offsetTop) {
// this.scrollParallaxLayers();
// }
// // Add a scroll event listener
// $(window).scroll(this.scrollParallaxLayers);
// // Add a resize event listener.
// $(window).resize(this.getElementPositions);
// }
},
beforeDestroy: function() {
@ -83,25 +83,25 @@ parasails.registerComponent('parallaxCity', {
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
getElementPositions: function() {
this.elementHeight = this.parallaxCityElement.clientHeight;
this.distanceFromTopOfPage = this.parallaxCityElement.offsetTop;
this.distanceFromBottomOfPage = document.body.scrollHeight - this.distanceFromTopOfPage - (this.elementHeight * .5);
this.elementBottomPosition = this.elementHeight + this.distanceFromTopOfPage;
},
scrollParallaxLayers: function() {
// Calculate how much of the parallax image is visible.
let visibleHeight = (window.scrollY + window.innerHeight) - Math.max(this.distanceFromTopOfPage, window.scrollY);
let percentageScrolled = visibleHeight / (this.distanceFromBottomOfPage + (this.elementHeight / 2 ));
// When the element has been scrolled down 25%, iterate through the layers and update their positions.
if(percentageScrolled > .25 ){
let adjustedPercentage = (percentageScrolled - .25) * 4/3;
for(let layer of this.parallaxLayers) {
let movement = Math.min(adjustedPercentage * layer.scrollAmount, layer.scrollAmount);
// Update the position of each layer.
$(layer.element).css('transform', 'translate3D(0, -' + movement + 'px, 0)');
}
}
},
// getElementPositions: function() {
// this.elementHeight = this.parallaxCityElement.clientHeight;
// this.distanceFromTopOfPage = this.parallaxCityElement.offsetTop;
// this.distanceFromBottomOfPage = document.body.scrollHeight - this.distanceFromTopOfPage - (this.elementHeight * .5);
// this.elementBottomPosition = this.elementHeight + this.distanceFromTopOfPage;
// },
// scrollParallaxLayers: function() {
// // Calculate how much of the parallax image is visible.
// let visibleHeight = (window.scrollY + window.innerHeight) - Math.max(this.distanceFromTopOfPage, window.scrollY);
// let percentageScrolled = visibleHeight / (this.distanceFromBottomOfPage + (this.elementHeight / 2 ));
// // When the element has been scrolled down 25%, iterate through the layers and update their positions.
// if(percentageScrolled > .25 ){
// let adjustedPercentage = (percentageScrolled - .25) * 4/3;
// for(let layer of this.parallaxLayers) {
// let movement = Math.min(adjustedPercentage * layer.scrollAmount, layer.scrollAmount);
// // Update the position of each layer.
// $(layer.element).css('transform', 'translate3D(0, -' + movement + 'px, 0)');
// }
// }
// },
}
});

118
website/assets/styles/components/parallax-city.component.less vendored
View file

@ -15,65 +15,69 @@
flex-direction: column;
justify-content: flex-end;
[purpose='parallax-city-container'] {
background-image: url('/images/parallax-cloud-city/cloud-city-static-7050x600@2x.png');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
height: 600px;
position: relative;
.parallax-layer {
position: absolute;
right: 0;
bottom: -1px;
width: 100%;
height: 100%;
will-change: transform;
background-size: auto 100%;
}
[purpose='foreground-cloud-1'] {
background-image: url('/images/parallax-cloud-city/1-cloud-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 100;
}
[purpose='foreground-cloud-2'] {
background-image: url('/images/parallax-cloud-city/2-cloud-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 99;
}
[purpose='large-island'] {
background-image: url('/images/parallax-cloud-city/4-island-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 97;
}
[purpose='background-cloud-1'] {
background-image: url('/images/parallax-cloud-city/5-cloud-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 96;
}
[purpose='small-island-1'] {
background-image: url('/images/parallax-cloud-city/6-island-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 95;
}
[purpose='small-island-2'] {
background-image: url('/images/parallax-cloud-city/7-island-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 95;
}
[purpose='background-cloud-2'] {
background-image: url('/images/parallax-cloud-city/8-cloud-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 1;
}
[purpose='background-cloud-3'] {
background-image: url('/images/parallax-cloud-city/9-cloud-7050x600@2x.png');
background-position: center bottom;
background-repeat: no-repeat;
z-index: 1;
}
// .parallax-layer {
// position: absolute;
// right: 0;
// bottom: -1px;
// width: 100%;
// height: 100%;
// will-change: transform;
// background-size: auto 100%;
// }
// [purpose='foreground-cloud-1'] {
// background-image: url('/images/parallax-cloud-city/1-cloud-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 100;
// }
// [purpose='foreground-cloud-2'] {
// background-image: url('/images/parallax-cloud-city/2-cloud-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 99;
// }
// [purpose='large-island'] {
// background-image: url('/images/parallax-cloud-city/4-island-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 97;
// }
// [purpose='background-cloud-1'] {
// background-image: url('/images/parallax-cloud-city/5-cloud-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 96;
// }
// [purpose='small-island-1'] {
// background-image: url('/images/parallax-cloud-city/6-island-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 95;
// }
// [purpose='small-island-2'] {
// background-image: url('/images/parallax-cloud-city/7-island-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 95;
// }
// [purpose='background-cloud-2'] {
// background-image: url('/images/parallax-cloud-city/8-cloud-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 1;
// }
// [purpose='background-cloud-3'] {
// background-image: url('/images/parallax-cloud-city/9-cloud-7050x600@2x.png');
// background-position: center bottom;
// background-repeat: no-repeat;
// z-index: 1;
// }
}
@media (max-width: 1399px) {
[purpose='parallax-city-container'] {