Sunday

Sliding image animation with CSS isn't smooth

Issue

I apologise if this has been asked before but I couldn't find an answer on it and I'm new to all of this, so any advice or suggestions are appreciated.

I have been trying to create sliding animations that I've seen on some websites but I'm not sure whether this is possible to do it just with CSS properly.

It works but it kind of drags and doesn't look smooth, the right div starts smoothly and then it just breaks. I've included my code below and here a Codepen for a better view.

body {
    background-color: white;
    font-family: "Nunito", sans-serif;


}

.blurb h2 {
    color: #878672;
    font-weight: 100;
    font-size: 2.5rem;
}

.blurb p {
    color: black;
    font-weight: 100;
    font-size: 1.125rem;
    line-height: 2;
}

.content {
    margin-top: 100px;

}

#mainNavbar {
    font-size: 1.5rem;
    font-weight: 100;
    background-color: pink;
}

#mainNavbar .nav-link {
    color: black;
}

#mainNavbar .nav-link:hover {
    color: #de5a09;
}

#mainNavbar .navbar-brand {
    color: #53341d;


}

#headingGroup span {
    color: #de5a09;
}

#headingGroup h1 {
    font-weight: 100;
    font-size: 4rem;

}

.navbar.scrolled {
    background: rgb(255, 255, 255);
    transition: background 100ms;

}

@media (max-width:1200px) {
    #headingGroup h1 {
        font-weight: 100;
        font-size: 3rem;
    }

}


#slide {
    position: relative;
    right: -100%;
   
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% {
        left: 0;
        right: 0;

    }
}

@keyframes slide {
    100% {
        right: 0;
        left: 0;
    }
}


.wrapper {
    position: relative;
    overflow: hidden;

}

#slide2 {
    position: relative;
    left: -100%;

    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Museum of Candy</title>
</head>

<body>
  <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
    <a href="#" class="navbar-brand font-weight-bold">History</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>

    </button>
    <div class="collapse navbar-collapse" id="navLinks">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <section class="container-fluid px-0 ">
    <div class="wrapper row align-items-center" >
      <div class="col-lg-6" id="slide2">
        <div id="headingGroup" class="text-center d-none d-lg-block mt-5">
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>



        </div>
      </div>


      <div class="col-lg-6 wrapper">
        <img id="slide" class="img-fluid "  src="https://cdn.pixabay.com/photo/2017/04/05/01/10/natural-history-museum-2203648_960_720.jpg" alt="">
      </div>

    </div>

  </section>

  <section class="container-fluid px-0 ">

    <div class="row align-items-center content">
      <div class="col-md-6 order-2 order-md-1 wrapper">
        <img id="slide2" src="https://cdn.pixabay.com/photo/2017/04/05/01/10/natural-history-museum-2203648_960_720.jpg" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 text-center order-1 order-md-2 wrapper">
        <div class="row justify-content-center " id="slide">
          <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
            <h2>NATURAL HISTORY MUSEUM</h2>
            <img src="imgs/skull.png" alt="" class="d-none d-lg-inline">
            <p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et corrupti iure ullam eligendi
              sed, earum veritatis dolorum, eveniet velit exercitationem unde. Pariatur est nemo deleniti fuga
              architecto laudantium veritatis dolore.
              Repellendus exercitationem porro eaque voluptatibus dolorem eligendi iure maxime, accusantium hic aut
              dicta nulla aliquam sunt provident facere nesciunt fugiat, natus dolores cumque.
            </p>
          </div>
        </div>
      </div>
    </div>
    
      </div>

  </section>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
    
  <script>
    $(function () {
      $(document).scroll(function () {
        var $nav = $("#mainNavbar");
        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
      })
    })
  </script>

</body>

</html>

Solution

Animating translateX would give a much better result than left and right, see the snippet below or for a better view visit this Codepen:

body {
  background-color: white;
  font-family: "Nunito", sans-serif;
}

.blurb h2 {
  color: #878672;
  font-weight: 100;
  font-size: 2.5rem;
}

.blurb p {
  color: black;
  font-weight: 100;
  font-size: 1.125rem;
  line-height: 2;
}

.content {
  margin-top: 100px;
}

#mainNavbar {
  font-size: 1.5rem;
  font-weight: 100;
  background-color: pink;
}

#mainNavbar .nav-link {
  color: black;
}

#mainNavbar .nav-link:hover {
  color: #de5a09;
}

#mainNavbar .navbar-brand {
  color: #53341d;
}

#headingGroup span {
  color: #de5a09;
}

#headingGroup h1 {
  font-weight: 100;
  font-size: 4rem;
}

.navbar.scrolled {
  background: rgb(255, 255, 255);
  transition: background 100ms;
}

@media (max-width: 1200px) {
  #headingGroup h1 {
    font-weight: 100;
    font-size: 3rem;
  }
}

#slide {
  transform: translateX(100%);
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: slide 0.5s forwards;
  animation-delay: 2s;
}

@keyframes slide {
  100% {
    transform: translateX(0);
  }
}

.wrapper {
  position: relative;
  overflow: hidden;
}

#slide2 {
  transform: translateX(-100%);
  -webkit-animation: slide 2s forwards;
  -webkit-animation-delay: 2s;
  animation: slide 0.5s forwards;
  animation-delay: 2s;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Museum of Candy</title>
</head>

<body>
  <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
    <a href="#" class="navbar-brand font-weight-bold">History</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>

    </button>
    <div class="collapse navbar-collapse" id="navLinks">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <section class="container-fluid px-0 ">
    <div class="wrapper row align-items-center" >
      <div class="col-lg-6" id="slide2">
        <div id="headingGroup" class="text-center d-none d-lg-block mt-5">
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>
          <h1 class="">NATURAL<span>/</span>HISTORY<span>/</span>MUSEUM</h1>



        </div>
      </div>


      <div class="col-lg-6 wrapper">
        <img id="slide" class="img-fluid "  src="https://cdn.pixabay.com/photo/2017/04/05/01/10/natural-history-museum-2203648_960_720.jpg" alt="">
      </div>

    </div>

  </section>

  <section class="container-fluid px-0 ">

    <div class="row align-items-center content">
      <div class="col-md-6 order-2 order-md-1 wrapper">
        <img id="slide2" src="https://cdn.pixabay.com/photo/2017/04/05/01/10/natural-history-museum-2203648_960_720.jpg" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 text-center order-1 order-md-2 wrapper">
        <div class="row justify-content-center " id="slide">
          <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
            <h2>NATURAL HISTORY MUSEUM</h2>
            <img src="imgs/skull.png" alt="" class="d-none d-lg-inline">
            <p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et corrupti iure ullam eligendi
              sed, earum veritatis dolorum, eveniet velit exercitationem unde. Pariatur est nemo deleniti fuga
              architecto laudantium veritatis dolore.
              Repellendus exercitationem porro eaque voluptatibus dolorem eligendi iure maxime, accusantium hic aut
              dicta nulla aliquam sunt provident facere nesciunt fugiat, natus dolores cumque.
            </p>
          </div>
        </div>
      </div>
    </div>
    
      </div>

  </section>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
    
  <script>
    $(function () {
      $(document).scroll(function () {
        var $nav = $("#mainNavbar");
        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
      })
    })
  </script>

</body>

</html>

Answered By - yousoumar

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

Sliding image animation with CSS isn't smooth

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels