How to slide between pages horizontally using a fixed menu?

Asked

Viewed 1,372 times

3

This is my HTML code, and I’m also using CSS with position: fixed; on the menu.

Code:

<body>
    <div class="topo">
        <img src="img/logo.png" />
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Quem Somos</a></li>
                <li><a href="#">Localização</a></li>
                <li><a href="#">Cardápio</a></li>
                <li><a href="#">Promoções</a></li>
                <li><a href="#">Fale Conosco</a></li>
            </ul>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="corpo">
        conteudo
    </div>
javascript jquery

  • take a look at this demo https://codyhouse.co/demo/horizontal-timeline/index.html I made a site with this schema and it’s really cool here are some other examples of nice, beautiful scripts https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/

2 answers

1

you can use something like:

$(function(){
  $('.menu').find('a').on('click', function(e){
        e.preventDefault();
        $('.corpo').scrollLeft( $(this).data('scroll') );
    })
});

but for this to work you need to add the data-scroll property in the menu links by passing a value inside.

see here: http://codepen.io/pen/xRbrNo

0

If I get it right, you want the page content to slide sideways, hiding the content while the new page appears sliding the opposite way, right?

For example: I click on "Who We Are", the page "Home" slides to the left side and disappears, the page "Who We Are" slides to the right side and appears, right?

If that’s it, let’s go:

Note: I made the code kind of in a hurry, you’ll have to tidy up nicely, it’s possible to optimize the code, it’s up to you.

You can see the demo clicking here (I took advantage of the pen of @user2084932).

CSS

.corpo{
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.content {
  animation-duration: .4s;
}

p {
  margin: 10px;
  padding: 5px;
  border: 2px solid #666;
}

.slideLeft {
  animation-name: kf_SlideLeft;
}

.slideFromRight {
  animation-name: kf_SlideFromRight;
}

@keyframes kf_SlideLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-2048px);
  }
}

@keyframes kf_SlideFromRight {
  from {
    transform: translateX(2048px);
  }

  to {
    transform: translateX(0);
  }
}

Javascript

$(function(){
  // A gente pega o delay no css. Se quisermos alterar a duração,
  // mudamos apenas no css.
  var delay = parseFloat($(".content").css("animation-duration").replace("s"));

  $("[href='#home']").click(function(e) {    
    $(".content").addClass("slideLeft");

    // Só devemos alterar o conteúdo APÓS a animação terminar, fazemos
    // isso multiplicando o delay por 1000.
    window.setTimeout(function() {
      $(".content").removeClass("slideLeft").addClass("slideFromRight");
      $(".content").html("<p>Home Content</p>");

      window.setTimeout(function() {
        $(".content").removeClass("slideFromRight");
      }, delay * 1000);
    }, delay * 1000);

    e.preventDefault();
  });

  $("[href='#quem']").click(function(e) {
    $(".content").addClass("slideLeft");

    // Vai executar assim que a animação terminar.
    window.setTimeout(function() {
      $(".content").removeClass("slideLeft").addClass("slideFromRight");
      $(".content").html("<p>Quem Somos - Content</p>");

      // Segundo timeout pra remover a classe.
      window.setTimeout(function() {
        $(".content").removeClass("slideFromRight");
      }, delay * 1000);
    }, delay * 1000);

    e.preventDefault();
  });
});

I think the code needs a lot of explanations, because it’s pretty simple and kind of self-explanatory.

Basically, what makes the content slide is the transform: translateX. Negative values and it will move to the left, positive values to the right.

What makes the act of sliding get "Smooth", is the animation. If you put only the transform, you will not see the content sliding, it will simply fade.

Another way to leave smooth, would be to use transition, however, the animation slideFromRight it would have to be done differently, because transition is just the way that would be made the transition of some properties, while the animation I can control the initial and final values with from and to.

References:

CSS Animations
CSS Transitions
CSS Transforms

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.