Skip to content

Instantly share code, notes, and snippets.

@estebanrfp

estebanrfp/esnextbin.md

Last active April 7, 2017 14:20
Show Gist options
  • Save estebanrfp/657081a1ffd1911702972768c555ed25 to your computer and use it in GitHub Desktop.
Save estebanrfp/657081a1ffd1911702972768c555ed25 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Lazy</title>
<style>
.s-lazy {
transition: opacity .5s ease-in-out;
max-width: 100%;
opacity: 0;
transition: all .5s ease;
transform: scale(.5);
}
.s-loaded {
opacity: 1;
transform: scale(1);
}
.s-error {
content: url(/images/empty.png);
opacity: .2;
transform: scale(1);
}
</style>
</head>
<body>
<div class="content-list">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dff9c85b75262a37d83f85/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58dd20045b75262a37d822ac/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/580c5c8a2ae2d80a3d89aac2/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58deb4fc5b75262a37d82dfb/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d70d865b75262a37d7f71f/medium@2x.png">
<img class="Item-image s-lazy" alt="" width="320" height="240" data-src="https://desarrolloactivo.com/images/articles/58d555b7fb499a0551f8471f/medium@2x.png">
</div>
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import SimpleLazy from 'simple-lazy'
SimpleLazy('body')
Raw
package.json
{
"name": "simple-lazy",
"version": "0.0.0",
"dependencies": {
"simple-lazy": "0.1.1"
}
}
Raw
transpiled.js
'use strict';
var _simpleLazy = require('simple-lazy');
var _simpleLazy2 = _interopRequireDefault(_simpleLazy);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _simpleLazy2.default)('body'); // write ES2015 code and import modules from npm
// and then press "Execute" to run your program
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment