Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Responsive Webdesign & Parallax Scrolling: Uwe Frieser - Adorsys GMBH & Co. KG (Nürnberg)

    Uploaded by

    printableboon

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Responsive Webdesign & Parallax Scrolling: Uwe Frieser - Adorsys GMBH & Co. KG (Nürnberg)

    Uploaded by

    printableboon
    9 views32 pages

    Original Title

    H34

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    9 views32 pages

    Responsive Webdesign & Parallax Scrolling: Uwe Frieser - Adorsys GMBH & Co. KG (Nürnberg)

    Uploaded by

    printableboon

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 32

    Responsive Webdesign &

    Parallax Scrolling

    Uwe Frieser - adorsys GmbH & Co. KG (Nürnberg)


    Responsive Webdesign

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Breakpoints & Media Queries

    @media (max-width: 767px) {


    body {background-color: red;}
    }
    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Browser Features

    var hasTouchEvents =
    ('ontouchstart' in
    document.documentElement);

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Fragen?

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Parallax Scrolling

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Quelle: eTechBot.com

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Text

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Demo 1

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling
    Demo 2

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Animation

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    transform
    (Internet Explorer 10, Firefox, and Opera)

    webkitTransform
    (Google Chrome, Safari)

    msTransform
    (Internet Explorer 9)

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    translateX(100px)

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    translateY(100px)

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    rotate(60deg)

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    scale(2)

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    translateZ(100px)

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Demo 3

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Responsive Webdesign?

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Demo 4

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Ältere Browser?

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Einsatz nicht
    zum Selbstzweck,

    sondern nur wenn es Sinn


    macht!

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Fragen?

    Herbstcampus 2013 – Responsive Webdesign & Parallax Scrolling


    Vielen Dank!

    uwe.frieser@adorsys.de

    You might also like