J'utilise donc des icônes fontawesome pour les liens vers les réseaux sociaux et aussi pour quelques éléments visuels sur ma page de compétences. Mais lorsque mon site Web se charge et que je clique sur un onglet et que les animations se terminent, certaines icônes apparaissent. Par exemple, 2 de mes quatre icônes sont utilisées comme représentation visuelle de mes compétences (c.-à-d. «Conception sonore» a une image de un casque) apparaît une fois qu'il arrive à la partie «Compétences» de mon site. Serait-ce un problème de chargement où il ne fait que lire les scripts trop lentement?

Voici mon html (chaque onglet est contenu dans mon document index.html, et j'utilise des animations pour déplacer les 'pages' hors du chemin pour afficher différentes pages.)

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,900&display=swap" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/c124511129.js" crossorigin="anonymous"></script>


  <!--JQUERY-->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src='js/transit.js'></script>

  <title>Ben Lusted | Portfolio</title>
</head>

<body>
  <script src="js/javascript.js"></script>
  <div class="container">
    <div id="contact-tab">
      <div class="contact-info">
        <h1>get in touch!</h1>
        <p>Email me: blustedaudio@gmail.com</p>
        <a href="https://twitter.com/thebenlusted" title="Twitter" target="_blank"><i class="fab fa-twitter"></i></a>
        <a href="https://vimeo.com/thebenlusted" title="Vimeo" target="_blank"><i class="fab fa-vimeo-v"></i></a>
        <a href="" title="Dribbble" target="_blank"><i class="fab fa-dribbble"></i></a>
        <a href="" title="Facebook" target="_blank"><i class="fab fa-facebook"></i></a>
      </div>
    </div>
    <div id="my-work-tab">
      <a href="#my-work-btn" id="my-work-btn" class="nav-link">my work</a>
      <div class="my-work-content">
        <h1>my work</h1>
        <h2 id="work-tagline">Here is what I am good at</h2>
        <div class="skill-card-cont">
          <div class="skill-category-card" id="web-des-skills">
            <i class="far fa-eye" id="eye-hover"></i>
            <i class="fas fa-pencil-alt" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
            <h3 style="line-height:24px;">Web<br />Design</h3>
            <div class="content-webdes"><br />
              <p>
                I can do this, that, these, those. Oh! And this: \o/
              </p>
            </div>
          </div>
          <div class="skill-category-card" id="web-dev-skills">
            <i class="far fa-eye" id="eye-hover"></i>
            <i class="far fa-file-code" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
            <h3 style="line-height:24px;">Web<br />Development</h3>
            <div class="content-webdev"><br />
              <p>
                I can code a dancing monkey for your website
              </p>
            </div>
          </div>
          <div class="skill-category-card" id="gfx-skills">
            <i class="far fa-eye" id="eye-hover"></i>
            <i class="far fa-image" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
            <h3 style="line-height:24px;">Graphic<br />Design</h3>
            <div class="content-gfx"><br />
              <p>
                I can make shapes and give them color!
              </p>
            </div>
          </div>
          <div class="skill-category-card" id="sfx-skills">
            <i class="far fa-eye" id="eye-hover"></i>
            <i class="fas fa-volume-up" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
            <h3 style="line-height:24px;">Audio<br />Design</h3>
            <div class="content-sfx"><br />
              <p>
                Studied Sound Design for Visual Media at the Vancouver Film School in 2017/18.
              </p>
            </div>
          </div>
        </div>
        <div class="recent-projects">
          <h2 style="font-size:32px;">recent projects</h2>
          <table>
            <tr>
              <th><a href="http://www.shotgunfarmers.com/" target="_blank">Shotgun Farmers</a></th>
              <th><a href="https://thebenlusted.github.io/jsauthentication/" target="_blank">JS Authenticator</a></th>
              <th>Audio Imgur</th>
            </tr>
            <tr>
              <th>Shotgun Farmers</th>
              <th>Shotgun Farmers</th>
              <th>Shotgun Farmers</th>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div id="about-tab">
      <a href="#about-btn" id="about-btn" class="nav-link">about</a>
      <div class="about-text">
        <h1>who am I?</h1><br>
        <div class="abt-tagline">
          <h2>My name is Ben Lusted, <br>and I am a web developer.<h2><br>
              <h3>I am a Canadian currently living in Vancouver and looking for
                the next big thing.</h3>
        </div>
        <div class="cont">
          <img src="images/me.png" alt="ME" class="about-img">
        </div>
      </div>
    </div>
    <div id="home-tab">
      <a href="#home-btn" id="home-btn" class="nav-link">home</a>
      <div class="landing-info-text">
        <h1>Ben<br>Lusted,</h1><br>
        <h2>Web Developer.</h2>
      </div>
    </div>
    <div id="landing-info">
      <a href="#contact-btn" id="contact-btn" class="nav-link">contact</a>
    </div>
  </div>
</body>

Aussi quelques trucs jQuery pour gérer les transitions de page

$(document).ready(function() {
  $('.about-text').hide();
  $('.contact-info').hide();
  $('.my-work-content').hide();

  $('#landing-info').animate({
    width: "100%"
  }, 450);
  $('#my-work-tab').animate({
    width: "96%"
  }, 600);
  $('#about-tab').animate({
    width: "92%"
  }, 750);
  $('#home-tab').animate({
    width: "88%"
  }, 900);
});

$(function() {
  $('.skill-category-card').mouseenter(function() {
    if(this.id === 'web-des-skills') {
    $('.content-webdes').animate({top:'70%',opacity:'1'},20);
    $('#web-des-skills').animate({paddingTop:'20px'},20);
  }
    if(this.id === 'web-dev-skills') {
    $('.content-webdev').animate({top:'65%',opacity:'1'},20);
    $('#web-dev-skills').animate({paddingTop:'20px'},20);
  }
    if(this.id === 'gfx-skills') {
    $('.content-gfx').animate({top:'65%',opacity:'1'},20);
    $('#gfx-skills').animate({paddingTop:'20px'},20);
  }
    if(this.id === 'sfx-skills') {
      $('.content-sfx').animate({top:'65%', opacity:'1'},20);
      $('#sfx-skills').animate({paddingTop:'20px'},20);
    }
  });
  $('.skill-category-card').mouseleave(function() {
    if(this.id === 'web-des-skills') {
    $('.content-webdes').animate({top:'-20%',opacity:'0'},25);
    $('#web-des-skills').animate({paddingTop:'0px'},25);
    }
      if(this.id === 'web-dev-skills') {
      $('.content-webdev').animate({top:'-20%',opacity:'0'},25);
      $('#web-dev-skills').animate({paddingTop:'0px'},25);
    }
      if(this.id === 'gfx-skills') {
      $('.content-gfx').animate({top:'-20%',opacity:'0'},25);
      $('#gfx-skills').animate({paddingTop:'0px'},25);
    }
      if(this.id === 'sfx-skills') {
        $('.content-sfx').animate({top:'-20%',opacity:'0'},25);
        $('#sfx-skills').animate({paddingTop: '0px'},25);
      }
  });
});

$(function() {
  let active = "slide-3";
  $('#home-btn').click(function() {
    $('#home-tab').animate({
      width: '88%'
    });
    $('.landing-info-text h1').animate({
      left: '0'
    });
    $('.landing-info-text h2').animate({
      left: '0'
    });

    $('#about-tab').animate({
      width: '92%'
    });
    $('.about-text').animate({
      left: '0px'
    });

    $('#my-work-tab').animate({
      width: '96%'
    });
    $('.my-work-content').animate({
      left: '0px'
    });
  });

  $('#about-btn').click(function() {

    $('#home-tab').animate({
      width: '60'
    });
    $('.landing-info-text h1').animate({
      left: '-1000px'
    });
    $('.landing-info-text h2').animate({
      left: '-1000px'
    });

    $('#about-tab').animate({
      width: '92%'
    });
    $('.about-text').animate({
      left: '0px'
    });
    $('.about-text').show();

    $('#my-work-tab').animate({ width: '96%' });
    $('.my-work-content').animate({
      left: '0px'
    });
  });

  $('#my-work-btn').click(function() {
    $('.my-work-content').show();
    $('#home-tab').animate({
      width: '60'
    });
    $('.landing-info-text h1').animate({
      left: '-1000px'
    });
    $('.landing-info-text h2').animate({
      left: '-1000px'
    });

    $('#about-tab').animate({
      width: '120'
    });
    $('.about-text').animate({
      left: '-1500px'
    });

    $('#my-work-tab').animate({
      width: '96%'
    });
    $('.my-work-content').show();
    $('.my-work-content').animate({
      left: '0px'
    });

  });

  $('#contact-btn').click(function() {
    $('#home-tab').animate({
      width: '60'
    });
    $('.landing-info-text h1').animate({
      left: '-1000px'
    });
    $('.landing-info-text h2').animate({
      left: '-1000px'
    });

    $('#my-work-tab').animate({
      width: '180'
    });
    $('.my-work-content').animate({
      left: '-1500px'
    });

    $('#about-tab').animate({
      width: '120'
    });
    $('.about-text').animate({
      left: '-1500px'
    });

    $('.contact-info').show();
  });
});

Enfin le css (si nécessaire):

html {
  overflow:hidden;
}

body {
  background-color: #1E1E5D;
  margin: 0;
  padding: 0;
}

/* CONTACT */
#landing-info {
  padding: 0;
  margin: 0;
  background-color: #587FFC;
  height: 100vh;
  width: 0;
}

.landing-info-text {
  margin-left: 40px;
  padding-top: 300px;
}

.landing-info-text h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-size: 800%;
  color: white;
  padding: 0;
  margin: 0;
  line-height: 100px;
  animation: slide-up-fade-in ease 1.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  text-shadow: 6px 10px 10px rgba(0, 0, 0, 0.4);
}

.landing-info-text h2 {
  position: relative;
  width: 600px;
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  padding: 0;
  margin: 0;
  color: white;
  animation: slide-up-fade-in ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}

.nav-link {
  position: relative;
  color: white;
  text-decoration: none;
  font-family: 'Poppins';
  font-size: 24px;
  writing-mode: vertical-rl;
  float: right;
  vertical-align: middle;
  display: table-cell;
  top: 50%;
  right: 18px;
  text-decoration: none;
}

.nav-link:after {
  border-left: 3px solid white;
  content: "";
  display: block;
  margin: 0;
  transition: height 250ms ease-in-out 0s;
  height: 0;
}

.nav-link:hover:after {
  transition: height 100ms ease-in-out 0s;
  height: 100%;
}

/* MY WORK */
#my-work-tab {
  position: absolute;
  display: inline-block;
  height: 100%;
  background-color: #92A5FD;
  padding: 0;
  margin: 0;
  width: 0;
}

.my-work-content {
  width:85%;
  height:100vh;
  display: none;
  position: absolute;
  margin:0;
  transform:translateX(12%);
  padding: 0;
  font-family: 'Poppins';
  color: white;
}

.my-work-content h1 {
  position: relative;
  font-size: 85px;
  text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 0;
  top: 20px;
}
#work-tagline {
  font-size: 38px;
}

.skill-category-card {
  background-color: rgb(68, 79, 83);
  width:220px;
  height:220px;
  float:left;
  text-align: center;
  display:inline;
  border-radius: 5%;
  margin-right:20px;
  padding:0;
  transition: all 0.4s ease-in-out;
  animation: slide-up-fade-in ease 0.8s;
  animation-iteration-count: 1;
  box-shadow:5px 10px 20px 5px rgba(0,0,0,0.25);
}

.skill-card-cont {
  position:absolute;
}
.skill-category-card h3 {
  font-size:22px;
  position: relative;
  margin:0;
  padding:0;
  top:75%;
}
#eye-hover {
  position:absolute;
  text-align:center;
  top:6px;
}

.content-webdes, .content-webdev, .content-gfx, .content-sfx {
  background-color:white;
  width:220px;
  height:220px;
  position:relative;
  top:-20%;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  pointer-events:none;
  transition:all 0.4s ease-in-out;
  color:black;
  font-size:16px;
  opacity:0;
  z-index: -1;
}
.recent-projects {
  width:100%;
  height:400px;
  position:absolute;
  bottom:10%;
  margin:0;
  padding:0;
  animation: slide-up-fade-in ease-in-out 0.8s;
  z-index: -2;
}
.recent-projects h2 {
  position: relative;
  color:white;
}
.recent-projects table {
  width:100%;
  height:100px;
  font-size:22px;
  border:4px solid white;
}
.recent-projects a {
  text-decoration:underline;
  color:white;
}


/* ABOUT */
#about-tab {
  position: absolute;
  height: 100%;
  background-color: #FF8692;
  width: 0;
  color: white;
  font-family: 'Poppins';
}

#about-tab .about-text {
  display: none;
  position: absolute;
  padding: 0;
  margin-left: 100px;
}

.about-text h1 {
  position: relative;
  font-size: 85px;
  text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 0;
  top: 20px;
}

.abt-tagline {
  width: 75%;
}

.abt-tagline h2 {
  position: relative;
  font-size: 42px;
}

.abt-tagline h3 {
  position: relative;
  font-size: 28px;
}

.cont {
  width: 50%;
  position: absolute;
  top: 30%;
  left: 60%;
}

.cont img {
  width: 30%;
  border-radius: 50%;
  border-style: solid;
  border-color: white;
  border-width: medium;
}

/* HOME */
#home-tab {
  position: absolute;
  height: 100%;
  background-color: #FF1D58;
  width: 0;
}

#contact-tab {
  padding: 0;
  margin: 0;
}

#contact-tab .contact-info {
  display: none;
  position: absolute;
  margin: 20px 0 0 210px;
  padding: 0;
  color: white;
  font-family: 'Poppins';
}

.contact-info h1 {
  padding: 0;
  margin: 0;
  position: relative;
  font-size: 85px;
  text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
}
.contact-info p {
  font-size:24px;
}
.contact-info i {
  font-size:42px;
  border-style: solid;
  border-color:white;
  border-width: thin;
  border-radius:50%;
  padding:8px;
  color:white;
  margin-right:20px;
}



footer {
  color:white;
  bottom:0;
  margin:0;
  padding:0;
  width:100%;
}
footer h1 {
  font-size:20px;
  font-family:'Poppins';
  opacity: 0.6;
  margin-left:50%;
  position:absolute;
  bottom:0;
  transform:translateX(-50%);
}


/* ELEMENT SLIDE UP AND FADE IN */
@keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translate(0px, 30px);
  }

  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translate(0px, 40px);
  }

  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@-o-keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translate(0px, 40px);
  }

  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@-moz-keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translate(0px, 40px);
  }

  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@-ms-keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translate(0px, 40px);
  }

  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

@media screen and (max-width: 766px) {}
1
Ben Lusted 14 janv. 2020 à 07:59