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!
[email protected]
