Interaktion 3

1. Interaktion3 Stefan Grage

2. DAGENS MÅL • Single Page Layout / one-pagers • Horisontal scrolling • Parallax Scroll • Dagensopgave(r)

3. Men først… I torsdags • Vi harindtilviderearbejdet med HTML5 & CSS3… • Er der noget, der hardrillet med opgaverne? • Noget vi skaltage op?

4. Single Page Layout

5. Version 1 I et single page layout (scroll layout ), samler man alle web-sitets sider i ét HTML dokument og scroller imellem dem. + Hurtig adgang til alt indhold på siden. + Smart hvis siden ikke indeholder mange undersider. + Skiller sig lidt ud fra mængden. + Avancerede effekter med jQuery (Parallax) • Som regel ikke egnet til informationstunge sider. Se eksempel 1: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel1/

6. jQuerytil animation • OftebrugesjQuerytil at animeremellemhver “side” • InkluderjQuery: http://jquery.com/ • Tilføjklassen “scroll” tilalle links , ogtilføjfølgendejQuery-funktion: • Se eksempel 2: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel2/ $(document).ready(function(){ $('.scroll').click(function(){ $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 600); return false; }); });

7. Version 2 • Den simple: • “content” = 100% • Min-height: 100% for <section> • Support: http://caniuse.com/#feat=minmaxwh

8. Version 3 - med knapper! • Man kanevt. Ogsåsætteknapperpå – deterheltdetsamme. Knapperneskal have en class=“scroll” og en destination (a href=“xyz”). • De kanpositioneresabsolut I forholdtilderes relative container (position: relative & absolute) • Eksempel 3: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel3/

9. Horisontal scrolling

10. Horisontal version 1 • Horisontal navigation kanvære et godtalternativ • Først et simpelt HTML-eksempel • Husk: Max højdepåsitet: 600px • Her bestårsitetaf “artikler” på 750 px • “Section”ensbreddeerså “antalartikler” x 750px • Elementerligebredde! • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel4-horisontal/

11. Horisontal version 2 • Lad osgørenogetjQueryklar… • Stort set ligesom den vertikale one-pager, bort set fra: • Html, body{height: 100%, width: 100%;} • #content: width: 800% (8 elementeraf 100% hver) • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel5/

12. Horisontal version 3 • Nu med jQuerytil at animeremellemsiderne. jQueryfunktionenstort set ens med den fra den vertikale one-pager… • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel6/ • For en grundiggennemgang: http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jQuery/

13. Parallax

14. Hva’ er parallax? Definition: - Motion parallax is a depth cue that results from our motion.  As we move, objects that are closer to us move farther across ourfield of view than do objects that are in the distance.  Eksempel: http://psych.hanover.edu/krantz/motionparallax/motionparallax.html

15. Hvordangøresdet? På en HTML side simuleres effekten typisk ved at man flytter på HTML elementers baggrundsbilleder. (Ved hjælp af JavaScript og CSS)

16. Horisontal parallax • Vi kan lave et simpelt parallax scroll, der kansesnårbrugerne resizer skærmen, vedhjælpafsimpel CSS. • Se eksempel7:http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel7-parallax-resize/

17. En mere avanceret parallax • Den vertikale parallax er mere populær… • Der brugesflere store baggrundsbilleder, ogjQuerytil at styrehastighedenafbaggrundendeiforholdtilindholdetpåstiet. • Eksempel 8: • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag4/eksempel8/

18. Dagensopgave

19. Dagensopgave • Lav et one-page layout. Du måselvbestemmeom du vilbyggeviderepåditeksisterende site, ellerstartepå et nyt. Der erfølgendekrav: • Brug parallax baggrund • ELLER • En “animate” funktionmellemsektionernepådit site Afleverespåfrontersenestonsdag kl. 23.59