Jump to content
Search Community

ludogou

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by ludogou

    problem with scrolltrigger on mobile

    in GSAP

    Posted

    Hello, I'm trying to use scrolltrigger for my site (in vuejs) but I have a problem when I try on mobile, the site crashes. here is a video to show you:


    I do not know where the problem comes from, if you have an idea to advise me,here is the code.
    Thanks in advance,
    Ludovic

      

    <template>
  <div id="presentation">
    <div class="image">
      <div class="titre">
        <h1>Kerebel Réalité Virtuelle</h1>
        <p>Un interieur comme si vous y étiez !</p>
      </div>
    </div>
    <div class="scroll">
    <div class="qui">
      <h2>Qui nous sommes ?</h2>
      <div class="texte">
        <img
          src="../assets/presentation/logo.png"
          alt="logo Kerebel réalité virtuelle"
        />
        <p>
          Kerebel Réalité Virtuelle est une société de
          <a href="/realisations"> visite virtuelle</a> en 3D, qui
          fait parti du réseau mondial Matterport Service Partners pour vous
          offrir de la numérisation de votre espace professionnelle.<br /><br />
          Nous effectuons des expériences immersives uniques qui prennent en
          compte toutes vos attentes et vous apportent la meilleure solution.
        </p>
      </div>
    </div>
   
    

    <div class="pourquoi">
      <h2>Pourquoi ?</h2>
      <div class="texte">
        <img class="imageCard"
          src="../assets/presentation/appareil.jpg"
          alt="camera 3D"
        />
        <p>
          <a href="/realisations">Les visites virtuelles</a> permettent de faire
          découvrir vos biens, commerces ..., comme s'y vous y étiez, sans se
          déplacer.<br /><br />
          Grâce à la visite virtuelle, vous pouvez accéder à tout moment et où
          vous voulez, sur un support électronique: ordinateur, tablette ou
          smartphone. Cette technologie est donc accessible à tous.
        </p>
      </div>
    </div>
    <div class="backColor">
      <div class="comment">
        <h2>Comment ?</h2>
        <div class="texte">
          <p>
            <span> 1 </span> Vous nous <a href="/contact">contactez</a> pour
            prendre un rendez-vous. <br />
            <br />
            <span> 2 </span> Nous fixons une date et une heure ensemble pour
            effectuer un repérage des lieux.<br /><br />
            <span> 3 </span> Nous revenons pour effectuer la
            <a href="/realisations">visite virtuelle</a> grâce à la technologie
            Matterport, l'espace est scanné en 3 dimensions. 
            <br />
            <br />
            <span> 4 </span> Nous effectuons le montage de la visite.<br /><br />
            <span> 5 </span> Nous vous envoyons la visite virtuelle.
          </p>
          <img class="imageCard"
            src="../assets/presentation/matterport.jpeg"
            alt="matterport"
          />
        </div>
        </div>
      </div>
       <div class="backColor">
      <div class="pourQui">
        <h2>Pour qui ?</h2>
        <p>
          La visite virtuelle Matterport est adaptée à tout types d'activités :
        </p>
        </div>

        <div class="container">
          
          <div class="card cardHot">
            <h3>Restauration</h3>
            <p>
              Vous tenez un restaurant, hôtel, bar ? <br> Nous sommes là pour faire
              visiter votre établissement !
            </p>
            <img src="../assets/presentation/kitchen.jpg" alt="cuisine" />
          </div>
          <div class="card cardBat">
            <h3>Bâtiment public</h3>
            <p>
              Vous êtes directeur d'une école ou d'un musée ? <br> Nous sommes là pour
              faire visiter votre établissement !
            </p>
            <img src="../assets/presentation/school.jpeg" alt="école" />
          </div>
          <div class="card cardImm">
            <h3>Location saisonnière</h3>
            <p>
              Vous avez un bien immobiler à louer pour la saison ?<br> Nous sommes
              là pour faire visiter votre ou vos maison(s)/appartement(s) !
            </p>
            <img src="../assets/presentation/location.jpg" alt="location" />
          </div>
          <div class="card cardEv">
            <h3>Evénementiel</h3>
            <p>
              Vous organisez des évenements et vous aimeriez faire découvrir le
              lieu ?<br> Nous sommes là pour faire visiter votre événement !
            </p>
            <img src="../assets/presentation/evenement.jpg" alt="événement" />
          </div>
          <div class="card cardBtp">
            <h3>BTP</h3>
            <p>
              Vous travaillez dans le btp et vous aimeriez mettre en avant votre
              travail ?<br>Réalisation d'une visite virtuelle avant/après<br> Nous sommes là pour faire visiter vos travaux !
            </p>
            <img src="../assets/presentation/btp.jpeg" alt="batiment" />
          </div>
          <div class="card cardComm">
            <h3>Commerces</h3>
            <p>
              Vous tenez un commerce et vous aimeriez faire visité votre magasin
              ? <br> Nous sommes là pour faire visiter votre établissement !
            </p>
            <img src="../assets/presentation/shop.jpeg" alt="magasin" />
          </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import { gsap } from 'gsap'
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger); 

export default {
   mounted: function(){
      this.startAnimations();
    },
  data: function() {
    return {};
  },
  methods: {
  startAnimations : function(){
 let tl = gsap.timeline({
 scrollTrigger: {
   trigger:".scroll",
   pin:true,
   start : "top top",
    end: "1000%",
  scrub : 1,     
 } 
 });

 
 tl.addLabel("start")
 .to(".qui",{opacity: 0, })
 .to(".pourquoi",{ opacity : 1,})
 .to(".pourquoi", { opacity :0,})
 .to(".comment",{ opacity : 1,})
 .to(".comment",{ opacity : 0,} )
 .to(".pourQui",{ opacity : 1,} )
 .to(".cardHot",{opacity: 1, })
 .to(".cardHot",{opacity: 0, })
 .to(".cardBat",{opacity: 1, })
  .to(".cardBat",{opacity: 0, })
  .to(".cardImm",{ opacity : 1,} )
  .to(".cardImm", { opacity :0,})
  .to(".cardEv",{ opacity : 1,} )
  .to(".cardEv", { opacity :0,})
   .to(".cardBtp", { opacity :1,})
  .to(".cardBtp",{ opacity : 0,} )
   .to(".cardComm", { opacity :1,})
.to(".pourQui",{ opacity : 0,} )
 
     
},

  },
};
</script>

<style scoped>
#presentation {
  color: white;
   overflow-y: hidden;
}
#presentation p {
  font-size: 25px;
}
.image {
  height: 100vh;
  width: 100%;
  background-image: url("../assets/presentation/qui.webp");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titre {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 70px;
  color: #ffd75f;
  letter-spacing: 10px;
}
h2 {
  padding-bottom: 60px;
  font-size: 40px;
  color: #d3b24c;
  letter-spacing: 5px;
}
.scroll{
  width: 100%;
  height:100vh;
  justify-content: center;

 
}

.qui {
  position :absolute;
  padding: 50px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 1;
}

.pourQui {
  position :absolute;
  padding: 50px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity:0;
}
.container {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bouton {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  margin: 45px;
}
i {
  font-size: 50px;
  cursor: pointer;
  color: #d3b24c;
}
.surligne:hover {
  opacity: 0.8;
  border-bottom: 2px solid #d3b24c;
}

.card {
  display: flex;
  flex-direction: column;
  padding:150px 0 0 0 ;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}
.card p {
  width: 50%;
  padding-bottom: 20px;
}
h3{
  padding-top:30px;
  font-size:30px;
  color:#d3b24c;
}
.cardHot{
  position: absolute;
  opacity: 0;
}
.cardBat{
  position: absolute;
  opacity: 0;
}
.cardImm{
  position: absolute;
  opacity: 0;
}
.cardEv{
  position: absolute;
  opacity: 0;
}
.cardBtp{
  position: absolute;
  opacity: 0;
}
.cardComm {
  position: absolute;
  opacity: 0;
  
}

.pourquoi {
  position :absolute;
  padding: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity:0;
}

.comment {
  position :absolute;
  padding: 50px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 0;
}

.texte {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  text-align: left;
}
.texte p {
padding:20px;
width: 80%;
order: 2;

}

.backColor {
  background-color: #111616;
}
a {
  text-decoration: none;
  color: #d3b24c;
}
span {
  color: #d3b24c;
  font-weight: bold;
}

@media screen and (max-width: 504px) {
  .image {
    height: 120vh;
    margin-bottom: 20px;
  }
  .titre h1 {
    font-size: 50px;
    padding-bottom: 10px;
  }
  #presentation p {
    font-size: 20px;
  }
  .qui,
  .pourQui,
  .pourquoi,
  .comment {
  
  height: 100%;
  padding:50px 0 50px 0;
  width: 100%;
  }
  img{
    padding:50px 0 50px 0;
  }
  .imageCard{
    width: 100%;
  }
  
  .texte p {
    width: 100%;
  }
  img {
    height: 40%;
  }
  .bouton {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .card {
    flex-direction: column;
    width: 100%;
    height: 80%;
  }
  .card img {
    width: 100%;
  }
  .card p {
    width: 100%;
    padding: 50px 0 0 0;
  }

  .comment .texte p {
    order: 2;
  }
}
@media screen and (min-width: 505px) and (max-width: 959px) {
  #presentation p {
    font-size: 20px;
  }
  .pourQui {
    height: 200%;
    padding: 20px 0 60px 0;
  }
  .texte {
    flex-direction: column;
  }
  .texte p {
    width: 100%;
  }
  img {
    height: 50%;
  }
  .bouton {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .card {
    flex-direction: column;
    width: 100%;
    height: 80%;
  }
  .card p {
    width: 100%;
  }
  .comment .texte p {
    order: 2;
  }
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
   .qui,
  .pourQui,
  .pourquoi,
  .comment {
    height: 100%;
    padding:50px 0 50px 0;
  }
  img{
    padding: 50px;
  }
  .card{
      flex-direction: column;
    width: 100%;
    height: 80%;
  }

  .texte {
    flex-direction: column;
  }
  .texte p {
    width: 100%;
  }

  .bouton {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .card p {
    width: 100%;
  }
  .comment .texte p {
    order: 2;
  }
}
</style>

     

×
×
  • Create New...