Skip to content

Commit

Permalink
improve demo
Browse files Browse the repository at this point in the history
  • Loading branch information
aFarkas committed Jan 11, 2015
1 parent 50bdfba commit 007bf53
Show file tree
Hide file tree
Showing 10 changed files with 493 additions and 335 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ In case disabled javascript is a concern you can combine the simple pattern with
###[data-expand] attribute
Normally lazySizes will expand the viewport area to lazy preload images/iframes which might become visible soon. This value can be adjusted using the ``expand`` option.

Additionally this general option can be overridden with the ``data-expand`` attribute for each element. Different than the normal ``expand`` option the ``data-expand`` attribute also accepts negative values.
Additionally this general option can be overridden with the ``data-expand`` attribute for each element. Different than the general ``expand`` option the ``data-expand`` attribute also accepts negative values (All numbers but ``0`` are accepted!).

This becomes especially handy to add unveiling effects for teasers or other elements:

Expand Down Expand Up @@ -182,7 +182,7 @@ Here the list of options:
* ``lazySizesConfig.addClasses`` (default: ``false``): Wether lazysizes should add loading and loaded classes. This can be used to add unveil effects or to apply new styles (background-image). (see also ``preloadAfterLoad`` option).
* ``lazySizesConfig.loadingClass`` (default: ``"lazyloading"``): If ``addClasses`` is set to ``true`` this ``class`` will be added to ``img`` element as soon as image loading starts. Can be used to add unveil effects.
* ``lazySizesConfig.loadedClass`` (default: ``"lazyloaded"``): If ``addClasses`` is set to ``true`` this ``class`` will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles.
* ``lazySizesConfig.expand`` (default: ``150``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they are becoming visible. (Note: Reasonable values are between ``40`` and ``300``.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically adjust this value to shrink, if the browser is currently downloading and to expand if the browser network is currently idling. This option can be overridden with the ``[data-expand]`` attribute.
* ``lazySizesConfig.expand`` (default: ``130``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they are becoming visible. (Note: Reasonable values are between ``40`` and ``250``.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically adjust this value to shrink, if the browser is currently downloading and to expand if the browser network is currently idling. This option can be overridden with the ``[data-expand]`` attribute.
* ``lazySizesConfig.onlyLargerSizes`` (default: ``true``): In case a responsive image had the ``data-sizes="auto"`` attribute and the computed new size decreases, lazysizes won't normally change the ``sizes`` attribute to a lower value.
* ``lazySizesConfig.clearAttr`` (default: ``false``): Set this to ``true`` if you want lazysizes to remove the ``data-`` attributes after doing it's work.
* ``lazySizesConfig.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``.
Expand Down
241 changes: 151 additions & 90 deletions animate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@
}

.thumbnail-small {
width: 400px;
margin-left: auto;
margin-right: auto;
width: 32%;
display: inline-block;
margin-bottom: 35px;
}

pre {
Expand Down Expand Up @@ -86,6 +86,35 @@
transition: 400ms opacity;
}

[data-expand].lazyload {
opacity: 0;
transform: scale(0.8);
}

[data-expand].lazyloaded {
opacity: 1;
transition: all 700ms;
transform: scale(1);
}

.effect-row-middle > [data-expand]:nth-child(2),
.effect-row-reverse > [data-expand]:nth-child(3),
.effect-row > [data-expand]:nth-child(1) {
transition-delay: 100ms;
}

.effect-row-middle > [data-expand]:nth-child(1),
.effect-row-middle > [data-expand]:nth-child(3),
.effect-row-reverse > [data-expand]:nth-child(2),
.effect-row > [data-expand]:nth-child(2) {
transition-delay: 400ms;
}

.effect-row-reverse > [data-expand]:nth-child(1),
.effect-row > [data-expand]:nth-child(3) {
transition-delay: 700ms;
}

</style>

<script>
Expand Down Expand Up @@ -540,127 +569,157 @@ <h3>Widgets/Javascript/Script</h3>
</div>
</div>
<div class="row">
<div class="alert alert-danger lazyload">
<div class="alert alert-info">
<p>While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.</p>
<p>LazySizes does automatically detect any changes to the DOM and the visibility of <code>.lazyload</code> elements.</p>
<button type="button" class="add-new btn btn-primary">click to add new elements</button>
</div>

<script type="text/html" class="template">
<div class="thumbnail thumbnail-small lazyload lazyrollIn lazyspecial" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/abstract"
alt="" />
<div class="row">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/abstract/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals"
alt="" />
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/business"
alt="" />
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/business/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/cats"
alt="" />
<div class="row effect-row">

<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/cats/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/city"
alt="" />
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/city/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food"
alt="" />
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nightlife"
alt="" />
<div class="row effect-row-middle">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nature/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/fashion"
alt="" />
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/sports/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/people"
alt="" />
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/technics/1"
alt="" />
</div>

</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nature"
alt="" />
<div class="row effect-row-reverse">
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nightlife/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/sports"
alt="" />
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/fashion/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/technics"
alt="" />
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/people/1"
alt="" />
</div>
</div>
</div>

<div class="thumbnail thumbnail-small lazyload" data-expand="-20">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/transport"
alt="" />


<div class="row">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/transport/1"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food/2"
alt="" />
</div>
</div>
</div>
</script>
Expand All @@ -674,6 +733,8 @@ <h3>Widgets/Javascript/Script</h3>
<br />
<br />
<br />
<br />
<br />

</div>

Expand Down
Loading

0 comments on commit 007bf53

Please sign in to comment.