Animacja strony obok strony głównej

pytanie zadane 17 sierpnia 2016 w HTML i CSS przez Barttyyy Gaduła (4,680 p.)

Witam, zrobiłem stronę główną z kategoriami do przejścia do innych części strony


<nav>
                <ul class="ul1">
                      <li class="Strona główna"><a href="#index.html">Strona główna</a></li>
                      <li class="O mnie"><a href="#omnie">O mnie</a></li>
				</ul>
			</nav>
			<nav>
				<ul class="ul2">
                      <li class="Moje projekty"><a href="#mojeprojekty">Moje projekty</a></li>
                      <li class="Kontakt"><a href="#kontakt">Kontakt</a></li>
                 </ul>
              </nav>

Chcę, aby po kliknięciu na daną kategorię strona przesunęła się w prawo lub lewo zależnie od tego w co klikniemy a pasek kategorii został na miejscu. Czy zna ktoś sposób na zrobienie czegoś takiego?

2 odpowiedzi

odpowiedź 17 sierpnia 2016 przez CzikaCarry Szeryf (75,340 p.)

Hmmm, no to wtedy scroll na osi x w jquery robisz i tyle

komentarz 17 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

jakiś link może czy poradnik? Mało umiem z js i jquery

Ps. Nie chcę, aby trzeba było przesuwać stronę, tylko animacje która by sie przesuwała po nacisnieciu na kategorie

komentarz 17 sierpnia 2016 przez CzikaCarry Szeryf (75,340 p.)

Ale jaką animację? Przesuniecie tła w osi x? Rozjaśnij trochę, nawet możesz narysować w paincie o co Ci chodzi :D

komentarz 17 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

Chce zeby menu zostało tam gdzie jest, ale po nacisnieciu jakiejś kategorii, np kontakt, przesunął się cały ten div który jest teraz na stronie głównej i zastąpił go ten dla przykladu zielony div kontakt

odpowiedź 17 sierpnia 2016 przez niezalogowany
edycja 17 sierpnia 2016

Użyj pluginu do jQuery:

https://github.com/jquery/jquery-mousewheel

dodaj w swoim js:

$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30); //30 to szybkość scrolla
event.preventDefault();
});

Dla menu dodaj w css position:fixed;

EDIT: do animacji scrolla dodaj taki skrypt:

$(function() {
  $('a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollLeft: target.offset().left
        }, 500);
        return false;
      }
    }
  });
});

Nie za piękne ale zobacz działanie tutaj:

http://codepen.io/anon/pen/mEoxxp