You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.7 KiB
HTML
52 lines
1.7 KiB
HTML
---
|
|
layout: default
|
|
title: Animate In Demo
|
|
description: When elements enter the viewport, they transition in from zero opacity and from the bottom.
|
|
image: /demos/animated.jpg
|
|
prism: true
|
|
externalJS: []
|
|
extraJS: [ "demos/animate-in.js" ]
|
|
---
|
|
<div class="container">
|
|
<div class="row">
|
|
<h2>Animated viewport entry</h2>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
<div id="grid" class="row my-shuffle-container shuffle--animatein">
|
|
{% for item in site.data.items %}
|
|
{% assign item = item %}
|
|
{% include picture-item.html %}
|
|
{% endfor %}
|
|
{% for item in site.data.items %}
|
|
{% assign item = item %}
|
|
{% include picture-item.html %}
|
|
{% endfor %}
|
|
{% for item in site.data.items %}
|
|
{% assign item = item %}
|
|
{% include picture-item.html %}
|
|
{% endfor %}
|
|
<div class="col-1@sm col-1@xs my-sizer-element"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container has-code-block">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>About this demo</h2>
|
|
<p>This was inspired by <a href="http://tympanus.net/codrops/">codrops</a>’ demo <a href="http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/">Loading effects for grid items with css animations</a>.</p>
|
|
<p><code>IntersectionObserver</code> is used to determine when the elements enter the viewport.</p>
|
|
</div>
|
|
<div class="col-12@sm">
|
|
<h2>Source code for this demo</h2>
|
|
<p>Link to <a href="{{ site.baseurl }}/js/demos/animate-in.js">demo source</a></p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript" data-src="{{ site.baseurl }}/js/demos/animate-in.js"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|