Artykuły:

  • data publikacji: 12.01.2010

    Budujemy stronę internetową przewijaną w poziomie!

    kategoria: Skrypty client-side, Webmaster, XHTML/CSS autor: agressiva

    zajawka

    Przeglądając w ostatnim czasie kilka serwisów o tematyce projektowania stron www natknęłam się na ranking najciekawszych projektów stron www przewijanych w poziomie.
    Strony takie stały się w ostatnim czasie bardzo popularne. Najczęściej służą jako portfolio graficzne, fotograficzne. Mimo swojej ograniczonej struktury dają nam całkiem spore pole do popisu. Wszystko zależy od naszej wyobraźni graficznej.
    Przedstawię Wam jedną z technik projektowania takich stron...

    demo

    HTML

    Stronka, którą przygotowałam w celu zademonstrowania Wam tej techniki ma bardzo prostą konstrukcję HTML. Najważniejsze divy to te oznaczone klasą box. To właśnie one ustawione są na naszej stronie jeden za drugim, narzuconą mają określoną szerokość oraz margin z prawej strony aby zachować między nimi odpowiednią odległość.

    Ogólna struktura przedstawia się następująco:

    <div id="page">

    <h1 id="title">Horizontal Scrolling Website <span>tutorial od <a href="http://vivee.info">vivee.info</a></span></h1>
     
    <div id="menu">
    <ul>
            <li><a href="#o_mnie">o mnie</a></li>
            <li><a href="#oferta">oferta</a></li>
            <li><a href="#webdesign">webdesign</a></li>
            <li><a href="#fotografia">fotografia</a></li>
            <li><a href="#linki">linki</a></li>
            <li><a href="#kontakt">kontakt</a></li>
    </ul>
    <div class="end"></div>
    </div>
     
    <div id="content">

            <div class="box" id="o_mnie">
            <h2>O mnie</h2>
            </div>    
       
            <div class="box" id="oferta">  
            <h2>Oferta</h2>
            </div>  
               
            <div class="box" id="webdesign">  
            <h2>Webdesign</h2>
            </div>  
       
            <div class="box" id="fotografia">
            <h2>Fotografia</h2>    
            </div>            
       
            <div class="box" id="linki">      
            <h2>Linki</h2>
            </div>    
       
            <div class="box" id="kontakt">        
            <h2>Kontakt</h2>
            </div>          
       
    <div class="end"></div>
    </div>
     
    </div>
     

    To co zamieścimy w divach box zależy tylko i wyłącznie od nas. Jak widać ze wersji demo ja postanowiłam podzielić stronkę na kilka działów, ale nie koniecznie trzeba tak robić.

    CSS

    Najważniejszą kwestią w stylowaniu naszej poziomej strony jest nadanie <body> odpowiedniej szerokości (takiej, w której zmieści się cała zawartość strony) - niestety jest to technika "na sztywno", ale połączeniu z wyfloatowanymi divami o klasie box sprawia, że wszystko układa się w płaszczyźnie horyzontalnej.
    W naszym przypadku <body> ma nadaną szerokość 5650px.

    Oto wszystkie najbardziej kluczowe elementy w CSS:

    body {
            background:url(flightplan-l-1920.gif) no-repeat fixed  center center;
            width:5650px;
            font-family:Georgia, "Times New Roman", Times, serif;
    }

    #page {
            float:left;
            padding:10px;
            margin:0px 0 0 0px;
            position:relative;
    }

    h1#title {
            font-size:46px;
            color:#FFF;
            padding:20px;
            height:100px;
            width:800px;
            position:fixed;
    }

    h1#title span {
            display:block;
            font-size:15px;
            margin:0 0 0 525px;
            line-height:8px;       
    }

    h1#title span a {
            color:#e3e0d5;
    }

    h1#title span a:hover {
            color:#eceae1;
    }

    #menu {
            height:32px;
            margin:80px 0 0 15px;
            position:fixed;
    }

    #menu ul {
            list-style-type:none;
    }

    #menu ul li {
            display:inline;
    }

    #menu ul li a {
            font-size:12px;
            margin:0 5px 0 0;
            padding:6px 4px;
            display:block;
            float:left;
            color:#afa991;
            background:#3c3a30;
            font-weight:bold;
            border-right:3px solid #817b61;        
            border-bottom:3px solid #817b61;                       
    }

    #menu ul li a:hover {
            color:#e3e0d5;
            border-right:3px solid #8c8772;        
            border-bottom:3px solid #8c8772;               
    }

    #content {
            margin:130px 0 0 15px;
    }

    .box {
            width:800px;
            padding:15px;
            float:left;
            font-size:12px;
            line-height:19px;
            text-align:justify;
            background:url(tlo.png) repeat;
            height: auto !important;
            min-height: 300px;
            height: 300px;
            margin:0 40px 0 0;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;      
            border-radius:5px;      
    }
     

    Pozostałe ostylowane elementy htmla można podejrzeć w pliku style.css.

    Przewiń do... czyli zastosowanie Horizontal Tiny Scrolling

    Dla ułatwienia przewijania naszej strony zastosowałam skrypt Horizontal Tiny Scrolling. Pozwala on automatycznie przewinąć stronę do boxa dzięki kliknięciu w odpowiedni link w menu.
    Jak to działa?
    Cały plugin składa się tylko z jednego pliku thw.js i nie wymaga żadnej konfiguracji z naszej strony.
    Jedyną sprawą o jakiej musimy pamiętać to forma linków w menu oraz id divów do których te linki będą nas kierować. Należy pamiętać, że w href="" oraz w id="" diva do które będzie kierować musi znaleźć się taka sama wartość. Na przykładzie niżej jest to #oferta.
    Przykład:
    Tak wygląda link w menu

    <li><a href="#oferta">oferta</a></li>
     

    Div do którego będzie nas przenosił:

    <div class="box" id="oferta">  
            <h2>Oferta</h2>
    </div>  
     

    Jest to cała filozofia korzystania z Tiny Scrolling, ponadto skrypt ten zapewnia bezproblemowe przewijanie strony za pomocą scrolla w myszy komputerowej.

    Na koniec... trochę inspiracji

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Budujemy stronę internetową przewijaną w poziomie!

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    28 Responses to “Budujemy stronę internetową przewijaną w poziomie!”

    1. [...] internetową przewijaną w poziomie! | Vivee – wordpress, webmastering, grafika i fotografia vivee.info/…my-strone-internetowa-prz… Pokaż reakcje /* */ inne strony z tej witryny + obserwuj co [...]

    2. xxxx pisze:

      Fajna sprawa ale mym dorzucił kilka poprawek
      1. to margines z lewej strony po wybraniu dowolnej zakładki urywa nam lewa stronę z zaokrągleniem, szczególnie widać to bo "baner" i menu maje te same marginesy
      2. mam spora rozdzielczości i dla mnie kliknięcie w kontakt powoduje wyświetlenie się kontaktu na środku ekranu a zakładka obok jest obcięta do połowy wygląda to mało estetycznie
      3. do body przydało by się (overflow:hidden;) przez pojawienie się dolnego skrola moim zdaniem traci się magie tego efektu

      to tylko kilka moich takich uwag

    3. Agressiva pisze:

      Drogi xxxx (wstydzisz się swego imienia/ksywki?) na ogromną różnorodność w rozdzielczościach ekranu nie ma żadnej jednoznacznej recepty, a przy technikach ograniczonych niestety trzeba sobie zdawać sprawę, że coś na 1280 może wyglądać lepiej niż na 1680…

      overflow:hidden; – i tak i nie. gdyby ktoś miał wyłączonego jsa to nie mógłby się wcale poruszać po stronie więc nieprzeszkadzający na dole pasek może spokojnie sie wyświetlać i nikomu to nie przeszkadza (jak widać na zaprezentowanych przykładach poziomych stron pozostawianie paska na dole jest powszechne)

      margines w części przesuwającej zmienia się w porównaniu do nagłówka ponieważ ten ma position:fixed; i jest stabilny na stronie.

      • palmiak pisze:

        dlatego możesz overflow nadać przez js – wtedy overflow zadziała tylko wtedy kiedy ktoś ma js. Tak od strony technicznej. Reszta już jest kwestią gustu i wyboru. Co kto lubi.

    4. kamilgeneral pisze:

      Znalazłem mały, ale nieistotny błąd w demie: są zamienione ikonki Twitter'a i DeviantArt'u.
      Poza tym świetny artykuł i efekt!

      • Agressiva pisze:

        nie nalezy rozumieć tego jako bład tylko jako lenistwo, ikony w sposob losowy wstawione do strony… nie ma to najmniejszego znaczenia… :D :D

    5. levre pisze:

      no no podoba mi się ten sposób na portfolio:D

    6. JaRo pisze:

      Bardzo ciekawy wpis i faktycznie bardzo fajny sposób na portfolio.

    7. Kamil pisze:

      Agressiva, możesz napisać w jakiej rozdzielczości trzeba oglądać stronę, żeby bywał widoczna podstrona "O mnie" a "Oferta" ukryta z prawej strony? Bardzo fajne płynne przewijanie – podoba mi się.

      • Agressiva pisze:

        Nie warto rozpatrywać rozdzielczości bo i tak każdy user ma inną – zależną od monitora. Złotego środka na to nie ma – jeżeli ustawimy szerokość boxów tak aby pod 1024×768 był widoczny tylko jeden box np "o mnie" to i tak pod rozdziałką większa już będzie widać kolejne boxy, natomiast jak dostosujemy boxy do rozdzielczości większych to znów pod mniejszymi nie będzie widać całego :)

        • eRIZ pisze:

          Portfolio jest chyba po to, aby zaprezentować się KAŻDEMU, od najlepszej strony. Nie można zapomnieć ani o użytkownikach netbooków, ani o tych, którzy mają naprawdę szerokie monitory.

          Zresztą, na praktycznie każdej stronie poświęconej accessibility/usability zwraca się uwagę na to, aby unikać projektów uzależnionych od szerokości ekranu.

          Jeśli chodzi o rozwiązania, zawsze pozostaje dostrojenie via JS, czy też media queries.

    8. Kamil pisze:

      Wiem wiem. Zastanawiałem się tylko czy przygotowywałaś tutka dla konkretnej rozdzielczości czy tak po prostu wyszło jak wyszło :)

    9. Rudik pisze:

      Fajny tutorial :)
      Mam tylko jedno pytanie – czy jest taka możliwość zmodyfikowania skryptu tak, aby nie było z góry ustalonych odnośników, tylko np. strzałki w lewo i prawo, które by przesuwały treść. Chodzi mi o to, aby ilość tych przesuwanych stron nie musiała być z góry ustalona. Np. chciałbym z tego zrobić galerię obrazków, do której nowe obrazki dodawane byłyby przez PHP – oczywiście nie można ustalić, ile obrazków będzie w galerii i o to mi chodzi :)

      • palmiak pisze:

        Akurat te odnośniki przenoszą się do id, więc wielkość nie ma znaczenia. Głównym problemem jest szerokość body, jednak mając ilość obrazków (tzn php może je sobie zawsze policzyć), albo generujesz fragment css ze zmienną php, albo liczysz i ustawiasz to za pomocą js (tu nie potrzebujesz php).

        • Rudik pisze:

          Oki dzięki za odpowiedź.
          Właściwie to teraz wpadłem na pomysł, że po co przerabiać to, jeśli można z neta ściągnąć jakiegoś scrollera w JS, który działa praktycznie tak samo, tylko nie trzeba określać liczby stron do przewijania :)

    10. Javier pisze:

      Pod IE menu też się przesuwa, co uniemożliwia nawigowanie :-)

    11. SpeX pisze:

      A nie można tu zastosować dodatkowego DIVa, który by zasłaniał wszystkie zbędne materiały po prawej stronie?

    12. Kartofelek pisze:

      Mozna by np zastosowac div z gradientem ktory by mial ustawione pos:fixed i z-index i wtedy by ladnie zaslanialo. Ale i bez tego powyzsza strona wyglada wspaniale. Ja tam lubie takie "proste" nie przebajerzone strony.

    13. aqthir pisze:

      nie wiem czemu ale w IE mi sie strona nieprzesuwa:/ w innych przegladarkach dziąła bez zarzutu, a i miałbym pytanie jak zrobic cos w podobie strony http://www.charliegentle.co.uk?

    14. aqthir pisze:

      nie wiem czemu ale w IE mi sie strona nie przesuwa:/ w innych przegladarkach działa bez zarzutu, a i miałbym pytanie jak zrobic cos w podobie strony http://www.charliegentle.co.uk?

    15. Przemek pisze:

      Witam !
      Mam pytanie do webmasterów. Jestem młodym grafikiem i webmasterem i mam pytanie jak zrobić taką galerię ?http://vanityclaire.com/#interactive Próbowałem, ale za żadne skarby mi nie wyszło. PRoszę o pomoc. GG – 6485591.
      Pozdrawiam wojasek

    16. Tomek pisze:

      do inpiracji dodałbym jeszcze stronę polaka: http://www.mobily.pl

    17. bibi pisze:

      ktoś z was może wykorzystał ten pomysł przy joomla?

    18. Marcin pisze:

      uzywasz joomli?! w jakim Ty swiecie zyjesz?

    19. bibi tez Marcin pisze:

      korzystanie z joomla to przestępstwo? :)

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wieczór z Open Source
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej