Когда я нажимаю на вкладку на моем сайте, мои значки появляются там, где они есть. - PullRequest
Новая
       2

Когда я нажимаю на вкладку на моем сайте, мои значки появляются там, где они есть.

1 голос
/ 14 января 2020

Поэтому я использую потрясающие иконки для ссылок в социальных сетях, а также для некоторых визуальных элементов на своей странице навыков. Но когда мой веб-сайт загружается, и я нажимаю на вкладку, и анимации заканчиваются sh, появляются некоторые значки. Например, 2 из моих четырех значков используются для визуального представления моих навыков (ie. 'Sound Design «появляется изображение наушников), когда он попадает в раздел« Навыки »моего сайта. Может ли это быть проблема загрузки, когда он просто слишком медленно читает сценарии?

Вот мой html (каждая вкладка содержится в моем указателе. html документ, и я использую анимацию, чтобы убрать «страницы» с пути отображения разных страниц.) 

<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>

Также некоторые jQuery вещи для обработки переходов страниц 

$(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();
  });
});

Наконец css (при необходимости): 

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 Ответ

1 голос
/ 14 января 2020

Пытался воспроизвести на codepen, и все, кажется, в порядке, за исключением визуальных настроек, не связанных с вопросом, проверьте это здесь Воспроизведение CodePen Я скажу, что вы проверяете скорость, кеширование и браузер вопросы. Попробуйте другой браузер. Не забывайте закрывающий тег html, который отсутствует 

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...