Utilizing CSS3 Transitions
Hermes comes with:
- configurable background and content transitions,
- responsiveness (automatically adjusts it's layout to screen resolution),
- extendability (adding new transtitions is very simple),
- component-based approach (each feature can be enabled separately),
- HTML/CSS programming interface (no JavaScript coding required).
Preferred way to get hermes is to use bower.
bower install hermes --save-devYou can also use npm (especially if using browserify).
npm install --save hermes-slider<!DOCTYPE html>
<html>
<head>
<title>Hello, Hermes!</title>
<!--
There are 4 things things needed for Hermes to work:
1. Hermes' CSS (styles for the slider).
-->
<link href=bower_components/hermes/dist/hermes.min.css
rel=stylesheet type=text/css>
</head>
<!--
2. A flag on document's body which instructs Hermes to automatically
create and start Slider objects for all declared sliders on the page
(no JavaScript programming required).
-->
<body class="hermes-autoboot">
<!--
3. Declaration of a slider (features are enabled by adding class names
to the slider element; this is a minimal configuration, but you can
get pretty wild in here; please consult documentation for details).
-->
<div class="hermes-slider hermes-defaults">
<div id=hello>
<h1>Hello, Hermes!</h2>
</div>
<div id=transitions class=hermes-theme--black>
<p>How's the waether?</p>
</div>
</div>
<!--
4. And Hermes script (it could be placed in the head section,
but page may render a little faster this way).
-->
<script src=bower_components/hermes/dist/core.min.js type=text/javascript>
</script>
</body>
</html>API Reference:
User Guides:
Tutorials:
Other:
Please read build.config.js file before contributing. Pull requests are very welcome!
Copyright © 2016 Maciej Chałapuk. Released under Apache License Version 2.0.