diff --git a/src/app/editorialisation/components/home/home.component.html b/src/app/editorialisation/components/home/home.component.html index de7d552fa0a06c541c9e596d3023e018080b7478..55885fe8edc80a3d2c9518ee3793b5adcf62a50b 100644 --- a/src/app/editorialisation/components/home/home.component.html +++ b/src/app/editorialisation/components/home/home.component.html @@ -1,6 +1,6 @@ <div class="home-component"> <section class="section research" [defaultImage]="defaultImage" [lazyLoad]="finalImage"> - <div class="columns is-multiline is-centered"> + <div class="columns is-multiline is-centered" (click)="numberOfClickEgg = numberOfClickEgg + 1"> <div class="logo column is-6-desktop"> <img class="logo-data-beta" src="./assets/img/home_logo_data.svg" alt="Logo beta"> </div> @@ -22,6 +22,18 @@ </div> </section> + <div class="clouds" *ngIf="numberOfClickEgg > 5"> + <div class="cloud n1"> + <img src="./assets/img/nuage.png" alt=""> + </div> + <div class="cloud n2"> + <img src="./assets/img/nuage.png" alt=""> + </div> + <div class="cloud n3"> + <img src="./assets/img/nuage.png" alt=""> + </div> + </div> + <section class="section posts"> <div class="post-container"> <div class="posts-header"> diff --git a/src/app/editorialisation/components/home/home.component.scss b/src/app/editorialisation/components/home/home.component.scss index fd62a00db88a944c2b2d062eeb9bbbda1c295f5b..37300d5ce7d6a588d855563f766cc96479ba8ad7 100644 --- a/src/app/editorialisation/components/home/home.component.scss +++ b/src/app/editorialisation/components/home/home.component.scss @@ -28,6 +28,66 @@ } } +.clouds { + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 1; + + .cloud { + width: 100%; + min-width: 200px; + } +} + +.cloud.n1 { + animation: animateCloud 20s linear infinite; + animation-fill-mode: forwards; + animation-delay: 1s; + opacity: 0; + + img { + height: 100px; + opacity: 0.5; + } +} + +.cloud.n2 { + animation: animateCloud 30s linear infinite; + animation-fill-mode: forwards; + animation-delay: 3s; + opacity: 0; + + img { + height: 150px; + opacity: 0.7; + } +} + +.cloud.n3 { + top: -20rem; + animation: animateCloud 40s linear infinite; + animation-delay: 0.5s; + opacity: 0; + + img { + height: 300px; + } +} + +@keyframes animateCloud { + 0% { + margin-left: -400px; + opacity: 1; + } + + 100% { + margin-left: 120%; + opacity: 1; + } +} + .research { text-align: center; background-color: $brand-color; @@ -44,6 +104,11 @@ padding-top: 7rem; } + .title-subtitle { + z-index: 2; + position: relative; + } + .logo { margin-top: 1rem; @@ -73,6 +138,8 @@ .search { margin-left: auto; margin-right: auto; + z-index: 5; + position: relative; } } diff --git a/src/app/editorialisation/components/home/home.component.ts b/src/app/editorialisation/components/home/home.component.ts index b8a5e2cc501e2d06da422c1d9e16f40bf6ff708f..15575e274fc4b5b6a3ae9435199f96d553ad56fb 100644 --- a/src/app/editorialisation/components/home/home.component.ts +++ b/src/app/editorialisation/components/home/home.component.ts @@ -21,6 +21,9 @@ export class HomeComponent implements OnInit { environment = environment; notificationMessages = notificationMessages; + triggerEasterEgg: boolean = false; + numberOfClickEgg: number = 0; + latestPosts: CMSContent[]; defaultImage: string = 'assets/img/home_image_garbage.jpg'; diff --git a/src/assets/img/nuage.png b/src/assets/img/nuage.png new file mode 100644 index 0000000000000000000000000000000000000000..b006b6794c5ecbe234a5e8163b360905526d8007 Binary files /dev/null and b/src/assets/img/nuage.png differ