texte & animations

public/css/utils.css

@@ -86,6 +86,15 @@ .orange{
     color: orange !important;
 }   
 
+
+.blue{
+    color : var(--primary-color) !important;
+}
+
+.bold{
+    font-weight: 600;
+}
+
 /* .small-container{
     margin-left: 10rem;
 } */
@@ -269,7 +278,87 @@ .btn-explored3:hover i{
 }
 
 
+.padding-vr-text{
+    opacity: 0;
+}
+
+.slide-right{
+    transform: translateX(160px);
+    opacity: 0;   
+    animation: slide-right 1s ease forwards;
+}
+
+.delay-1{
+    animation-delay: 1s !important;
+}
+
+
+
+
+@keyframes slide-right {
+    0% {
+        transform: translateX(160px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.overlay-vr {
+    width: 200px;
+    height: 200px;
+    top: 20rem;
+    left: 40rem;
+    pointer-events: none;
+    border-radius: 100%;
+    background-color: rgba(199, 199, 199, 0.5); 
+    backdrop-filter: blur(5px); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.overlay-vr::after {
+    content: '';
+    width: 250px;
+    height: 250px;
+    border-radius: 100%;
+    background: none;
+    border: 2px solid rgb(177, 177, 177); 
+    animation: dash-array 2s infinite;
+    position: absolute;
+    stroke-dasharray: 40px;
+}
+
+.overlay-vr::before {
+    content: '';
+    width: 250px;
+    height: 250px;
+    border-radius: 100%;
+    background: none;
+    border: 2px solid rgba(199, 199, 199, 0.5); 
+    position: absolute;
+}
+
+@keyframes dash-array {
+    0%{
+        clip-path: inset(0 0 0 100%);
+    }
+    50%{
+        clip-path: inset(0 0 0 0%);
+    }
 
+    100%{
+        clip-path: inset(0 0 0 100%);
+    }
+}
+
+.overlay-vr p {
+    color: white; /* Texte en blanc pour ressortir sur le fond */
+    font-size: 1.5rem;
+}
 
 @media screen and (max-width: 562px){
     .wn-50{
@@ -494,6 +583,11 @@ .custom-carousel img {
     font-size: 1rem;
     margin-bottom: 1.5rem;
   }
+
+
+  .padding-vr-text{
+    padding-top: 15rem;
+  }
   
 
 @keyframes anime-icon4 {

resources/views/pages/accueil.blade.php

@@ -130,10 +130,18 @@
 
       
 
-     <div class="d-flex">
-        <div id="three-container" style="width: 60vw; height: 50vh; margin-top: 6rem; "></div>
-        <div style="margin-left: -30rem ; margin-top: 10rem;">
-            <p>Coucou</p>
+     <div class="d-flex position-relative">
+        <div id="three-container" style="width: 60vw; height: 60vh; margin-top: 6rem; "></div>
+        {{-- <div class="position-absolute overlay-vr">
+           <p>Bougez</p>
+        </div> --}}
+        <div class="w-50 padding-vr-text d-flex flex-column gap-4">
+            <h3 class="fs-1">Plongez dans l'univers de la VR <br><span class="blue bold">Une expérience immersive </span></h3>
+            <p class="delay-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit sit obcaecati repellendus non, cumque, rem tenetur ullam fugiat corporis fugit veniam deserunt enim voluptas incidunt! Ad rem excepturi enim tenetur.</p>
+            <a href="{{ route('posts.index') }}" class="btn-explored2 col-md-5 col-10" id="slider-btn" >
+                <i class="bi bi-arrow-down-short"></i>
+                <span>Explorez</span>
+            </a>
         </div>
 
      </div>
@@ -150,12 +158,20 @@
     <script>
         let icubeLine = document.querySelector('.line-icube');
         let iconHome = document.querySelector('.icon-home');
+        let paddingvrtext = document.querySelector('.padding-vr-text');
+
+        console.log(paddingvrtext);
 
         window.addEventListener('scroll', () => {
             if(window.scrollY > 260) {
                 icubeLine.classList.add('icubeLine');
                 iconHome.classList.add('scaleUp');
             }
+             if(window.scrollY > 1400){
+                console .log('scroll');
+                paddingvrtext.classList.add('slide-right');
+
+            }
         })
 
         const carousel = document.querySelector('#carouselExample');