diff --git a/sites/all/modules/features/materio_home_v2/materio_home_v2.features.inc b/sites/all/modules/features/materio_home_v2/materio_home_v2.features.inc index b0cafbdd..21e9ad52 100644 --- a/sites/all/modules/features/materio_home_v2/materio_home_v2.features.inc +++ b/sites/all/modules/features/materio_home_v2/materio_home_v2.features.inc @@ -22,3 +22,27 @@ function materio_home_v2_ctools_plugin_api($module = NULL, $api = NULL) { function materio_home_v2_views_api($module = NULL, $api = NULL) { return array("api" => "3.0"); } + +/** + * Implements hook_image_default_styles(). + */ +function materio_home_v2_image_default_styles() { + $styles = array(); + + // Exported image style: publications-home. + $styles['publications-home'] = array( + 'label' => 'publications-home', + 'effects' => array( + 15 => array( + 'name' => 'image_scale_and_crop', + 'data' => array( + 'width' => 210, + 'height' => 295, + ), + 'weight' => 1, + ), + ), + ); + + return $styles; +} diff --git a/sites/all/modules/features/materio_home_v2/materio_home_v2.info b/sites/all/modules/features/materio_home_v2/materio_home_v2.info index 1963f033..8c9ccb97 100644 --- a/sites/all/modules/features/materio_home_v2/materio_home_v2.info +++ b/sites/all/modules/features/materio_home_v2/materio_home_v2.info @@ -4,6 +4,7 @@ package = Materio dependencies[] = ctools dependencies[] = entity dependencies[] = features +dependencies[] = image dependencies[] = materio_publications dependencies[] = menu dependencies[] = page_manager @@ -16,6 +17,7 @@ features[ctools][] = page_manager:pages_default:1 features[ctools][] = panels_mini:panels_default:1 features[ctools][] = views:views_default:3.0 features[features_api][] = api:2 +features[image][] = publications-home features[menu_custom][] = menu-home-v2 features[page_manager_pages][] = home_v2 features[panels_mini][] = news_home_v2 diff --git a/sites/all/modules/features/materio_home_v2/materio_home_v2.views_default.inc b/sites/all/modules/features/materio_home_v2/materio_home_v2.views_default.inc index a476ccc3..8695df03 100644 --- a/sites/all/modules/features/materio_home_v2/materio_home_v2.views_default.inc +++ b/sites/all/modules/features/materio_home_v2/materio_home_v2.views_default.inc @@ -184,7 +184,7 @@ function materio_home_v2_views_default_views() { $handler->display->display_options['pager']['options']['offset'] = '0'; $handler->display->display_options['style_plugin'] = 'default'; $handler->display->display_options['row_plugin'] = 'entity'; - $handler->display->display_options['row_options']['view_mode'] = 'teaser'; + $handler->display->display_options['row_options']['view_mode'] = 'homeblock'; /* Champ: Contenu : Titre */ $handler->display->display_options['fields']['title']['id'] = 'title'; $handler->display->display_options['fields']['title']['table'] = 'node'; @@ -216,6 +216,7 @@ function materio_home_v2_views_default_views() { $handler->display->display_options['filters']['sid']['table'] = 'workflow_node'; $handler->display->display_options['filters']['sid']['field'] = 'sid'; $handler->display->display_options['filters']['sid']['value'] = array( + 2 => '2', 3 => '3', ); diff --git a/sites/all/themes/gui/materiobasetheme/bower.json b/sites/all/themes/gui/materiobasetheme/bower.json index 4c0445d5..30780cb0 100644 --- a/sites/all/themes/gui/materiobasetheme/bower.json +++ b/sites/all/themes/gui/materiobasetheme/bower.json @@ -18,6 +18,7 @@ "history.js": "~1.8.0", "jquery.columnizer": "~1.6.2", "jquery.hotkeys": "jeresig/jquery.hotkeys#~0.2.0", - "jquery.lazyload": "~1.9.5" + "jquery.lazyload": "~1.9.5", + "skrollr": "~0.6.29" } } diff --git a/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/.bower.json b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/.bower.json new file mode 100644 index 00000000..73d10511 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/.bower.json @@ -0,0 +1,39 @@ +{ + "name": "skrollr", + "homepage": "http://prinzhorn.github.io/skrollr/", + "authors": [ + "Alexander Prinzhorn" + ], + "description": "Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop", + "main": "src/skrollr.js", + "moduleType": [ + "globals" + ], + "keywords": [ + "parallax", + "scroll", + "animation", + "html5", + "css3", + "transition" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "version": "0.6.29", + "_release": "0.6.29", + "_resolution": { + "type": "version", + "tag": "0.6.29", + "commit": "1da1627e80ffb5c569880e4c77845e116905cf9f" + }, + "_source": "git://github.com/Prinzhorn/skrollr.git", + "_target": "~0.6.29", + "_originalSource": "skrollr", + "_direct": true +} \ No newline at end of file diff --git a/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/CONTRIBUTING.md b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/CONTRIBUTING.md new file mode 100644 index 00000000..02eaae60 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/CONTRIBUTING.md @@ -0,0 +1,15 @@ +Questions belong to StackOverflow +===== + +GitHub is for issues and feature requests. Anything else belongs to [StackOverflow](http://stackoverflow.com/questions/ask?tags=skrollr). + +Pull requests +===== + +Will be ignored if the Travis build fails. Install grunt and run `grunt jshint qunit` locally before submitting pull requests. + +Do not include build files in your pull request (e.g. `skrollr.min.js`). + +Do not change the version number in your pull request. + +Do not try to fix multiple issues or add multiple features with a single pull request. A pull request should only do one thing. \ No newline at end of file diff --git a/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/Gruntfile.js b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/Gruntfile.js new file mode 100644 index 00000000..c559b522 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/Gruntfile.js @@ -0,0 +1,51 @@ +module.exports = function(grunt) { + //Configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json') , + jshint: { + options: { + smarttabs: false, + curly: true, + immed: true, + latedef: true, + noarg: true, + quotmark: 'single', + undef: true, + unused: true, + strict: true, + trailing: true, + globals: { + window: true, + document: true, + navigator: true, + define: true, + module: true + } + }, + all: ['src/**/*.js'] + }, + qunit: { + all: ['test/index.html', 'test/loading.html'] + }, + uglify: { + options: { + banner: '/*! skrollr <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>) | Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr | Free to use under terms of MIT license */\n' + }, + + all: { + files: { + 'dist/skrollr.min.js': 'src/skrollr.js' + } + } + } + }); + + //Dependencies. + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-qunit'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + + //Tasks. + grunt.registerTask('default', ['jshint', 'qunit', 'uglify']); + grunt.registerTask('travis', ['jshint', 'qunit']); +}; \ No newline at end of file diff --git a/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/HISTORY.md b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/HISTORY.md new file mode 100644 index 00000000..dfeea524 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/HISTORY.md @@ -0,0 +1,328 @@ +0.6.29 (2014-11-17) +------------------- + +* Make the ID of `skrollr-body` configurable (#592) + +0.6.28 (2014-11-15) +------------------- + +* In cases where skrollr-body has a height other than `auto` the height of its content is now correctly calculated. This should solve many issues on mobile where scrolling got stock before reaching the bottom (#633) + +0.6.27 (2014-09-28) +------------------- + +* Fixed AMD module definition (#609) + +0.6.26 (2014-06-08) +------------------- + +* Fixed easing functions not working when animating attributes (#533) + +0.6.25 (2014-05-22) +------------------- + +* CommonJS (#519). + +0.6.24 (2014-04-25) +------------------- + +* Fixed some issue with forceHeight (#347). +* Fixed a regression caused by #486 breaking IE 8 (#494). +* Added support for animating attributes (#204). + +0.6.23 (2014-04-18) +------------------- + +**note**: This particular version is broken in IE! + +* Experimental support for emitting events when the scrolling passes a keyframe (check out the docs for `keyframe` option/event). +* When using `refresh`, make sure elements which do not longer have keyframes get properly cleaned up (#486). +* Fixed `refresh` not accepting `NodeList`s (#435). +* Expose the status of mobile mode as `isMobile()` function (#488). + +0.6.22 (2014-02-21) +------------------- + +* Experimental AMD support (#409). Please read the documentation about it. + +0.6.21 (2014-01-06) +------------------- + +* Disabled mobile mode on Windows Phone, since it's not needed there (#408). + +0.6.20 (2014-01-03) +------------------- + +* Fixed broken percentage constants. + +0.6.19 (2014-01-02) +------------------- + +* Constants can now be defined as functions or percentage offsets (#148, #404). + +**breaking**: When using a constant of value `100` together with percentage offsets like `data-_foo-75p`, +the value was implicitly handled as percentage value `100p`. Starting with this version you need to explcitly use `100p` if you want percentage constants. +On the plus side, you can now mix an absolute constant with a percentage keyframe or a percentage constant with an absolute keyframe. + +0.6.18 (2013-12-18) +------------------- + +* Fixed scrolling on input elements (#397). + +0.6.17 (2013-10-19) +------ + +* Fixed keyboard not appearing on some mobile browsers when an input was focused (#349). + +0.6.16 (2013-10-18) +------ + +* Fixed `z-index:auto;` not working because it was always coerced to an integer (#351). + +0.6.15 (2013-10-03) +------ + +* Fixed clicking on links (and other elements) on mobile (#263, #303, #338). +* Added `getMaxScrollTop` method (#238). + +0.6.14 (2013-10-03) +------ + +* Fixed the `direction` parameter that's passed to the render events (#339). + +0.6.13 (2013-09-29) +----- + +* Added support for percentage offsets (#185). + +0.6.12 (2013-09-17) +----- + +* Added `destroy` method (#109). + +0.6.11 (2013-08-13) +----- + +* Made the mobile deceleration configurable and lowered the default (#222, #229). + +0.6.10 (2013-07-30) +----- + +* Fixed bug which caused IE to perform an endless loop (#271). + +0.6.9 (2013-07-01) +----- + +* Improved overall performance for mobile (#249). + +0.6.8 (2013-06-17) +----- + +* Added a new option `smoothScrollingDuration`. + +0.6.7 (2013-06-17) +----- + +* Changed the default value of `edgeStrategy` from `ease` to `set`. There are too many cases where `ease` was not wanted and unexpected. + +0.6.6 (2013-06-05) +----- + +* Fixed IE plugin not working. This was caused by assigning `skrollr.setStyle` to a local variable inside the skrollr core. Since the IE plugin monkey-patches the skrollr.setStyle function, the core didn't notice the change (#199 comment 18986949). + +0.6.5 (2013-05-22) +----- + +* Fixed crash in IE < 9 because the detected prefix was `null` (#220). + +0.6.4 (2013-05-21) +----- + +* Fixed that some elements got the `skrollable-before` **and** `skrollable-after` class at the same time. + +0.6.3 (2013-05-19) +----- + +* When resizing the browser, the scroll position was reset to 0 (#217) + +0.6.2 (2013-05-18) +----- + +* When resizing the browser, `forceHeight` was colliding with the already forced height (#216). + +0.6.1 (2013-05-18) +----- + +* Allow numbers inside of easing function names (#152). + +0.6.0 (2013-05-18) +----- + +**Expect things to break when coming from 0.5! Read through the changelog. Migration is not hard.** + +* **[breaking]** There's no more `skrollr.mobile.js` file. You only need `skrollr.js`. You no longer need to conditionally include `skrollr.mobile.js`. +* You can configure how skrollr detects mobile browsers using the `mobileCheck` option (check out the documentation). +* **[possibly breaking]** The meaning of the `#skrollr-body` element changed. Put all static elements inside of it and all absolute/fixed elements outside. It doesn't need to be the first child of the body anymore. +* **[breaking]** The `rendered` and `unrendered` classes where renamed because they were confusing and wrong. They're now called `skrollable-before` and `skrollable-after`, because that's their meaning (the element with these classes is before/after the first/last keyframe). + * Added a new class `skrollable-between`, because symmetry. That's why. +* Easing functions are now applied when exactly at a keyframe (#132). +* **[possibly breaking]** The behavior changed for the case when the scroll position is before/after the first/last keyframe (I'm just gonna use "before first" from now on, because "after last" is analog). In 0.5 the behavior was not exactly specified and buggy (see item above regarding #132). Skrollr was applying the styles of the first keyframe to the element for all scroll position that were before the first keyframe. E.g. when `data-100="top:200px;"` was the first keyframe, the element had `top:200px;` at all scroll positions before (all from `0` to `99`). From now on you can specify the behavior you want (see `edgeStrategy` option for details, set it to `set` for old behavior). **Note: 0.6.7 and up use `set` as default.** + + +0.5.14 +----- + +* Add a `skrollr-mobile` class to the html element when the mobile script is included. + +0.5.13 (2013-02-08) +----- + +* #131: Use a cross browser approach for getting the body scroll-height. +* #133: Use the maximum of document height or the max keyframe for edge cases where absolute keyframes are used in a relative-mode-like document and `data-end` was calculated wrong. + +0.5.12 (2013-02-08) +----- + +* #121: Fixed prefix detection in Safari. + +0.5.11 (2013-01-18) +----- + +* #126: When calling refresh(), force rerendering, even if the scrollbar didn't move. + +0.5.10 +----- + +* #104: Fixed the most annoying bug on mobile. There was a large blank space at the bottom of the page. + +0.5.9 +----- + +* #118: Fixed broken prefix detection. Was broken all the time, but worked before Firefox 18. + +0.5.8 (2013-01-12) +----- + +* #116 + #117: SVG support was broken for relative mode. + +0.5.7 +----- + +* #103: skrollr no longer depends on being added to the bottom of the document. + +0.5.6 +----- + +* #105: Fixed inconsistent behaviour for adding `rendered` and `unrendered` class on page load + +0.5.5 +----- + +* #100: Fixed relative-mode not working correctly in IE < 9 due to crippled getBoundingClientRect + +0.5.4 (2012-11-18) +----- + +* #80: When resizing the browser window the calculation of relative mode was wrong when the element's vertical position was changed before. + +0.5.3 +----- + +* #66: Make IE 7 support a light version of `data-anchor-target` by mapping `querySelector` to `getElementById`. + +0.5.2 +----- + +* #78: Fixed that new parser didn't allowed omitting the last semicolon in a keyframe property list. + +0.5.1 (2012-10-29) +----- + +* Fixed `setScrollTop` and `animateTo` not working because iScroll uses negative offset. + +0.5.0 (2012-10-09) +----- + +* *breaking* the `plugin` api has been removed (the IE plugin has been updated to a new, hidden api). +* Full mobile support using iscroll. +* #73: Fixed parser to not mess up colons inside URLs +* #74: Fixed parser to not treat single periods as decimal numbers +* #76: Fixed dummy element overlaping the content, even though it should be unobtrusive + +0.4.13 +----- + +* #58: `forceHeight` now handles relative mode like a boss. +* #59: Make `scale` option only affect absolute mode. + +0.4.12 +----- + +* #64: Setting `float` property using JavaScript didn't work across browser. Now using `styleFloat` and `cssFloat` properties. + +0.4.11 (2012-09-17) +----- + +* The `scale` option does not affect `constants`. + +0.4.10 +----- + +* Allow smooth scrolling on element level using `data-smooth-scrolling` + +0.4.9 +----- + +* Added experimental smooth scrolling (no more CSS transitions. WORKS IN IE.). + +0.4.8 +----- + +* Added `stopAnimateTo` method. + +0.4.7 +----- + +* Updated the requestAnimationFrame polyfill for smoother animations +* Updated the way requestAnimationFrame is used for even smoother animations + +0.4.6 +----- + +* New method `relativeToAbsolute` which was formerly private +* New method `isAnimatingTo` to check if an animation caused by `animateTo` is running +* Added `sqrt` easing function + +0.4.5 +----- + +* Experimental mobile support using https://github.com/zynga/scroller + +0.4.4 +----- + +* A `skrollr` class is added to the HTML element and a `no-skrollr` class is removed when `init` is called. Useful for fallback styling. + +0.4.3 (2012-08-02) +----- + +* Added new feature "constants". + +0.4.2 (2012-07-26) +----- + +* Added new feature "anchor-target" which allows elements to react to other elements leaving/entering the viewport. + +0.4.1 (2012-07-25) +----- + +* Fixed a bug which broke skrollr in IE caused by wrong regular expression behavior + +0.4.0 (2012-07-22) +----- + +* *breaking* the `data-end-[offset]` syntax changed. It's now `data-[offset]-end`. +* Fixed a bug where white spaces between style declarations were not ignored. +* Added support for anchors. Animations can now be specified relative to the elements position within the viewport. +* Added support for SVG elements. +* Added new method `refresh()`. \ No newline at end of file diff --git a/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/LICENSE.txt b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/LICENSE.txt new file mode 100644 index 00000000..e72cc848 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2012-2014 Alexander Prinzhorn (@Prinzhorn) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/README.md b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/README.md new file mode 100644 index 00000000..9e3a7a44 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/bower_components/skrollr/README.md @@ -0,0 +1,636 @@ +[](http://travis-ci.org/Prinzhorn/skrollr) + +skrollr 0.6.29 +============== + +Stand-alone **parallax scrolling** JavaScript library for **mobile (Android, iOS, etc.) and desktop** in about 12k minified. + +Designer friendly. No JavaScript skills needed. Just plain CSS and HTML. + +_Actually, skrollr is much more than "just" **parallax scrolling**. It's a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3 ;-)_ + +Resources +===== + +Plugins +----- + +### Official + +* [skrollr-menu](https://github.com/Prinzhorn/skrollr-menu) - Hash navigation +* [skrollr-ie](https://github.com/Prinzhorn/skrollr-ie) - IE < 9 CSS fixes +* [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets) - Keyframes inside CSS files + +### Third party + +* [skrollr-colors](https://github.com/FezVrasta/skrollr-colors) - Mix and match hex, rgb and hsl colors. +* [skrollr-decks](https://github.com/TrySound/skrollr-decks) - Fullpage presentation decks. + +In the wild +----- + +Check out the [wiki page](https://github.com/Prinzhorn/skrollr/wiki/In-the-wild) for websites using skrollr and feel free to add your own website :). You can also shamelessly add yourself to the list [here](https://github.com/Prinzhorn/skrollr/wiki/Agencies-and-freelancers) if you are offering paid skrollr support. + +Further resources (tutorials etc.) +----- + +Moved to the [wiki](https://github.com/Prinzhorn/skrollr/wiki/Resources). + + +Documentation +===== + +First of all: look at the [examples and read the source ;-)](https://github.com/Prinzhorn/skrollr/tree/master/examples). This might give you a feeling of how stuff works and you can see how some patterns can be implemented. + +Abstract +------ + +skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset. + +Other libraries require you to write JavaScript in order to define your animations. This introduces two main problems: + +* Animation and element are not at one place. In order to find out if any animations are defined for a given element, you have to scroll through many (sometimes thousands) of lines of JavaScript. +* You have to learn a new syntax which is often very verbose and limited at the same time. + +With skrollr, you put the definition of your key frames right where they belong (to the element) using a syntax you already know (plain CSS). + +If you would rather have the keyframes inside a separate file, take a look at [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets). + +If you prefer to use JavaScript to define your animations make sure to take a look at [ScrollMagic](https://github.com/janpaepke/ScrollMagic). It depends on both jQuery and the Greensock Animation Platform (GSAP) and gives you full control over every detail of your animations. + +Let's get serious +------ + +First of all you want to include the `skrollr.min.js` file at the bottom of your document (right before the closing `
`) and then call `skrollr.init()`. Or you can place it inside the `
` if you want to, but make sure to call `init()` once the document has been loaded (e.g. jQuery's `ready` event or even `window.onload`). + +```html + + + +``` + +If you are using require.js to structure your project, you can use skrollr as a module as well. + +```javascript +require(['skrollr'], function(skrollr){ + var s = skrollr.init(); +}); +``` + +If you're familiar with CSS, you already know the `style` attribute. In order to create an animation you would need several, at least two, of them. That's what skrollr does. You use the HTML5 `data-` attributes to define multiple sets of styles (we call each of them **keyframe**) and skrollr interpolates between them. + +#### Let's change the background-color of a `div` starting at `#00f` when the scrollbar is at the top and ending with `#f00` when the user scrolled 500 pixels down + +```html +
+``` +[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/1.html) + +##### Lessons learned + +* Skrollr ensures that you can actually scroll down 500 pixels or more, even if there's not enough content. You can suppress this by using the `forceHeight` option. +* You can't use `#00f` or `#0000ff`. You need to use `rgb` or `hsl` and explicitly decide which color space you want because they result in different animations (HSL is much cooler most of the time). Don't worry, the IE plugin teaches IE < 9 to display `rgb` and `hsl` correctly. + +#### Now let's do a barrel roll at the same time + +```html +
+``` +[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/2.html) + +##### Lessons learned + +* Skrollr handles all these nasty CSS prefixes for you. Just -moz-relax and get yourself a cup of -webkit-coffee. + +#### Now let the rotation bounce like it were a hip-hop video + +```html +
+``` +[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/3.html) + +#### Lessons learned + +* Skrollr allows non-linear animations. The so called *easing functions* can be used per-property by putting them in square brackets behind the property. There's a built-in list of easing functions (see below in the [JavaScript](#javascript) section) and you can use your own functions by using the `easings` options. + +Now you may have noticed that using `500` as a keyframe position is kind of random and the look depends on your browser size. + +#### Let's have the animation end when the top of the element reaches the top of the viewport (element leaves the viewport) + +```html +
+``` +[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/4.html) + +##### Lessons learned + +* Skrollr keyframes can either be [absolute](#absolute-mode-or-document-mode) or [relative](#relative-mode-or-viewport-mode). + +That's the end of this short intro. The following sections will explain some more things in detail. + +If you're not a fan of `data-attributes` or if you're planning a big website where you want a better and more flexible structure, take a look at [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets). + +Mobile support +----- +Starting with version 0.5.0 skrollr officially supports mobile browsers including Android and iOS. Furthermore, mobile support has been rewritten from scratch for skrollr 0.6.0. + +### The Problem with mobile and the solution + +(If you're not interested in the details, just scroll down a bit to see what you need to do for mobile support.) + +Some words on why this is an important milestone and why others failed: Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript. In short, that's the reason why many scrolling libraries either don't work on mobile devices or they come with their own scrollbar which is a usability nightmare on desktop. It was an important requirement while I developed skrollr that I don't force you to scroll the way I want it. skrollr on desktop uses a native scrollbar and you can scroll the way you want to (keyboard, mouse, etc.). + +You just told me it doesn't work on mobile, but why does it? The answer is simple. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the `#skrollr-body` element) using CSS transforms. + +### What you need in order to support mobile browsers + +Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id `skrollr-body`. That's the element we move in order to fake scrolling. The only case where you don't need a `#skrollr-body` is when using `position:fixed` exclusively. In fact, the skrollr website doesn't include a `#skrollr-body` element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the `#skrollr-body` element. + +Or to put it differently: On mobile the `skrollr-body` element is moved using CSS transforms. You can't have `position:fixed` or `background-attachment:fixed` inside elements which use CSS transforms as per CSS spec (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). That's why those elements need to be **outside** of the `skrollr-body` element. + +The `skrollr-body` element might be configured within the [init-options](#skrollrinitoptions). + +AMD +--- + +Starting with `0.6.22` there's experimental AMD support. Please note that only skrollr core has AMD support so far. We will update the plugins in the future. + +```js +require(['skrollr'], function(skrollr){ + skrollr.init(); +}); +``` + +Absolute vs relative mode +----- + +Being only able to define key frames in absolute values is simply insufficient for some cases. For example, if you don't know exactly where an element will be in the document. That's why there are two modes for key frames, namely `absolute` and `relative` mode. + +### absolute mode (or document mode) + +The key frames are defined as absolute values describing how much the **document** has been scrolled down. + +The syntax is `data-[offset]-[anchor]`, where `offset` can be any integer (0 is default) and `anchor` can be either `start` (default) or `end`. Either `offset` or `anchor` can be omitted in some situations. Here are some examples of key frames and their meaning. + +* `data-0` = `data-start` = `data-0-start`: When the scroll top is 0. +* `data-100` = `data-100-start`: When the scroll top is 100. +* `data--100` = `data--100-start`: When the scroll top is -100 (sounds like nonsense, but keep in mind that interpolation will be relative to this point). +* `data-end` = `data-0-end`: When offset is 0, but counting from the bottom of the document instead of from the top. In short: when you reach the bottom of the page. +* `data-100-end`: 100px before we reach the bottom. +* `data--100-end`: 100px after we reach the bottom (again, it's up to you whether you need it). + +### relative mode (or viewport mode) + +Instead of defining key frames relative to the **document** (i.e. absolute), we are able to define them depending on the position of any element in relation to the **viewport**. + +The syntax is `data-[offset]-(viewport-anchor)-[element-anchor]`, where `offset` can again be any integer and defaults to 0. Both `viewport-anchor` (mandatory) and `element-anchor` (optional) can be one of `top`, `center` or `bottom`. If `element-anchor` is omitted, the value of `viewport-anchor` will be taken (just like with background-position). Here are some examples of key frames and their meaning. + +* `data-top` = `data-0-top` = `data-top-top` = `data-0-top-top`: When the element's top is aligned with the top of the viewport. +* `data-100-top` = `data-100-top-top`: When the element's top is 100px above the top of the viewport. +* `data--100-top` = `data--100-top-top`: When the element's top is 100px below the top of the viewport. +* `data-top-bottom `= `data-0-top-bottom`: When the bottom of the element is at the top of the viewport (it's just not visible). +* `data-center-center` = `data-0-center-center`: When the element is at the center of the viewport. +* `data-bottom-center` = `data-0-bottom-center`: When the element's center is at the bottom of the viewport, thus the upper half of the element is visible. + +By default the keyframes are triggered by the position of the element where the keyframes are described. However there are times when the position of a second element should trigger the first element's keyframes. The `data-anchor-target` attribute can be used in these cases. The `data-anchor-target` attribute accepts any CSS selector and the position of the first element on the page matching the selector will be used to trigger keyframes on the element where the attribute is defined. `data-anchor-target` requires IE 8 or greater. + +Examples: `
scale, skew and rotate the sh** out of any element
+width, height, padding, font-size, z-index, blah blah blah
+sure.
+let me dim the lights for this one...
+you can set easings for each property and define own easing functions
+by the way, you can also animate colors (you did notice this, didn't you?)
+Now get this thing on GitHub and spread the word, it's open source! Tweet +
+Check out more examples.
+Handcrafted by Follow @Prinzhorn +
+