A small library for implementing simple presentations. It's very elastic (you can add your styles) and easy to use.
This is a draft. The idea came out, when I was implementing my CV and I couldn't find any library, which met my needs.
- ES6
- jQuery
- Webpack
- Default vertical section (with bottom -> top animation)
<section class='one'>
<div class='content'>
<div class='text'>
Text (from bottom to top)
</div>
</div>
</section>- Horizontal section (with left -> right animation)
<section class='two' left>
<div class='content'>
<div class='text'>
Text (from left to right)
</div>
</div>
</section>Run the example app under examples/mix directory or create your own:
-
Install all dependencies
yarn install
-
Run
npm start
The example application should appear under http://localhost:8080/examples/mix.
- Create
index.html. - Add some sections.
- Put at the end of the body the slider scripts from the /dist directory.
An exemplary HTML file can look like this:
<!DOCTYPE html>
<head>
...
<!-- your styles -->
<link href='./my-styles.css' rel='stylesheet'>
<body>
<div class='scrollable-sections'>
<section class='one'>
<div class='text'>
Text 1 (fixed)
</div>
</section>
<section class='two'>
<div class='content'>
<div class='text'>
Text 2 (from bottom to top)
</div>
</div>
</section>
<section class='three' left>
<div class='content'>
<div class='text'>
Text 3 (from left to right)
</div>
</div>
</section>
<section class='four'>
<div class='content'>
<div class='text'>
Text 6 (from bottom to top)
</div>
</div>
</section>
</div>
<script src='./js.js'></script>
<script src='./css.js'></script>
</body>
</html>The above steps will change after publishing an npm package.
- provide scrolling from different sides (top -> bottom and left -> right)
- provide possibility to select more animations like zooming or opacity
- rework slider.js
- combine slider-mobile.js with slider.js
- publish as a npm package
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent