-
data publikacji: 12.01.2010
Budujemy stronę internetową przewijaną w poziomie!
kategoria: Skrypty client-side, Webmaster, XHTML/CSS autor: agressiva
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...
HTML
Stronka, którą przygotowałam w celu zademonstrowania Wam tej techniki ma bardzo prostą konstrukcję HTML. Najważniejsze
divyto 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
boxzależ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 klasieboxsprawia, ż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 whref=""oraz wid=""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 menuDiv do którego będzie nas przenosił:
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
-
Zobacz podobne wpisy:
-
20 Responses to “Budujemy stronę internetową przewijaną w poziomie!”
Leave a Reply
Komentarze
Kategorie
Top 10
Stan: Gravatar, czyli jak mieć globalnego avatara
JaRo: Halu!?
Adi: Halu!?
rokicza: Menu akordeonowe z odrobiną CSS3
Marcin Lewandowski: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
Agressiva: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
Marcin: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
- 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.
- 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
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
Przypominamy o Konkursie Noworocznym
Wraz z nowym, 2010 rokiem ogłosiliśmy konkurs na tutorial o tematyce CMS-owej.
Mamy nadzieję, że jakieś prace zostaną nadesłane do końca terminu i znajdzie się zwycięzca w pierwszym naszym oficjalnym konkursie z nagrodami.
Zachęcamy wszystkich do spróbowania swoich sił.
Szczegóły dostępne są pod tym adresem: http://vivee.info/2010/01/01/konkurs-noworoczny/
Zareklamuj nas :)
Jako, że pojawiła się na vivee.info nowa skóra przygotowałam nasze firmowe banerki reklamowe. Osoby, które wyrażą chęć wsparcia nas reklamą u siebie na blogach lub innych serwisach mogą pobrać je poniżej. Czytaj dalej
Polecane strony
- WordPress Theme from Scratch – Day 1: PSD
- 20 Tutorials For Creating HDR Images
- Ask the Expert – Using Wordpress to Build Large Scale Websites with Derek Herman
- Making an Interactive Picture with jQuery
- Create a Horizontal Scrolling Website
- 800 Most Wanted Free RSS Icons for Bloggers
- 45 Most Wanted Beautiful Free Hand Drawn Fonts
- Caffe-Break Themed Blog Layout Photoshop Tutorial
- Create a nature inspired layout in photoshop
- Coding a Web Design for Speed and Quality
- Beautiful Hand Drawn Websites | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
- 40 Fresh Creative and Inspiring Photographs
- Wordpress portfolio layout | Grafpedia
- Simple Facial Photo Retouching | Grafpedia
- Create a beauty layout in 10 steps | Grafpedia
[...] 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 [...]
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
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.
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.
Znalazłem mały, ale nieistotny błąd w demie: są zamienione ikonki Twitter'a i DeviantArt'u.
Poza tym świetny artykuł i efekt!
nie nalezy rozumieć tego jako bład tylko jako lenistwo, ikony w sposob losowy wstawione do strony… nie ma to najmniejszego znaczenia…
no no podoba mi się ten sposób na portfolio:D
Bardzo ciekawy wpis i faktycznie bardzo fajny sposób na portfolio.
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ę.
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
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.
Wiem wiem. Zastanawiałem się tylko czy przygotowywałaś tutka dla konkretnej rozdzielczości czy tak po prostu wyszło jak wyszło
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
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).
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
Pod IE menu też się przesuwa, co uniemożliwia nawigowanie
Rozumiem, że masz na myśli ie6? Tu jest jakiś hack, jak namówić explodera do position fixed http://snipplr.com/view/2952/ie6-fixed-position-f... .
no dokładnie, IE6 nie wie co to jest position:fixed
ja osobiście na tą przeglądarkę uwagi nie zwracam, nie ma co się przejmować przeglądarką która ma 10 lat i nie spełnia standardów – a poza tym ma już dwóch swoich następców.
A nie można tu zastosować dodatkowego DIVa, który by zasłaniał wszystkie zbędne materiały po prawej stronie?
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.