Skip to content
Snippets Groups Projects
Commit 93d666de authored by Sofiane Lasri's avatar Sofiane Lasri
Browse files

test vitrine

parent 62e34ea4
No related branches found
No related tags found
No related merge requests found
......@@ -63,3 +63,54 @@ .barreDeNavigation .inferieure .menuList>li>a .nav-icon img{
margin-left: -1px;
animation-play-state: paused;
}
/* Fin navbar */
/* Intro vitrine */
#intro{
width: 100%;
height: 95vh;
top: 0;
}
#vitrine-background-image{
display: none;
z-index: -1;
width: 100%;
height: 100%;
background-position: center!important;
background-size: cover!important;
background-repeat: no-repeat!important;
}
.intro-vitrine{
position: absolute;
display: flex;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 60vh;
}
.intro-vitrine .presentation{
display: flex;
width: 75%;
}
.intro-vitrine .presentation > *{
display: none;
}
.intro-vitrine .presentation .illustration{
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.intro-vitrine .presentation .description{
width: 90%;
/* display: flex; */
flex-direction: column;
justify-content: center;
}
.intro-vitrine h1, h2{
font-family: "Proxima Nova Bold"!important;
}
/* Fin intro vitrine */
\ No newline at end of file
<!-- Navbar -->
<div class="barreDeNavigation">
<div id="navbar" class="barreDeNavigation">
<div class="superieure">
<nav class="container d-flex justify-content-end">
<a class="nav-link" href="#">Associer son compte</a>
......
......@@ -20,12 +20,84 @@
<!-- Inclusion dynamique de la navbar -->
<?=Client::getNavbar()?>
<!-- Contenu de la page -->
<!-- Intro -->
<div id="intro">
<div id="vitrine-background-image" style="background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('<?=getWebsiteSetting("websiteUrl")?>data/images/backgrounds/sildur-vibrant.png');" bgImageUrl="<?=getWebsiteSetting("websiteUrl")?>data/images/backgrounds/sildur-vibrant.png"></div>
<div class="container intro-vitrine">
<div id="intro-presentation" class="presentation">
<div class="description">
<h1>Starisland</h1>
<p>Un petit paradis sur terre où règnent les vieux retraités, venus finir leur jours paisiblements.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
<div class="illustration" style="background-image: url('<?=getWebsiteSetting("websiteUrl")?></div>data/images/vitrine/let's%20go.png');" bgImageUrl="<?=getWebsiteSetting("websiteUrl")?></div>data/images/vitrine/let's%20go.png"></div>
</div>
</div>
<!-- Fin de l'intro -->
<?=Client::getFooter()?>
<script src="<?=getWebsiteSetting("websiteUrl")?>pages/assets/vendors/flickity/js/flickity.pkgd.min.js"></script>
<script type="text/javascript">
// https://stackoverflow.com/a/56341485
async function loadImages(imageUrlArray) {
const promiseArray = []; // create an array for promises
const imageArray = []; // array for the images
for (let imageUrl of imageUrlArray) {
promiseArray.push(new Promise(resolve => {
const img = new Image();
// if you don't need to do anything when the image loads,
// then you can just write img.onload = resolve;
img.onload = function() {
// do stuff with the image if necessary
// resolve the promise, indicating that the image has been loaded
resolve();
};
img.src = imageUrl;
imageArray.push(img);
}));
}
await Promise.all(promiseArray); // wait for all the images to be loaded
console.log("Toutes les images ont été chargées.");
return imageArray;
}
$(window).on("load", async function() {
// On va regarder si dans ce que l'on va afficher, il n'y a pas des images à charger
var imagesToLoad = [];
$(".intro-vitrine .presentation > *").each(async function() {
let hasABgImageToLoad = $(this).attr('bgImageUrl');
if (typeof hasABgImageToLoad !== 'undefined' && hasABgImageToLoad !== false) {
imagesToLoad.push(hasABgImageToLoad);
}
});
console.log("Images à charger:"+imagesToLoad);
await loadImages(imagesToLoad);
$(".intro-vitrine .presentation > *").fadeIn(1000);
$(".intro-vitrine .presentation .description").css("display", "flex"); // On a retiré la propriété flex pour faire le fadeIn
imagesToLoad = [];
setTimeout(async function(){
let hasABgImageToLoad = $("#vitrine-background-image:hidden").attr('bgImageUrl');
if (typeof hasABgImageToLoad !== 'undefined' && hasABgImageToLoad !== false) {
imagesToLoad.push(hasABgImageToLoad);
}
console.log("Images à charger:"+imagesToLoad);
await loadImages(imagesToLoad);
$("#vitrine-background-image:hidden").fadeIn(4000);
}, 1000)
});
</script>
</body>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment