Skip to content

Commit

Permalink
📝 https links
Browse files Browse the repository at this point in the history
  • Loading branch information
@desandro
desandro committed Apr 13, 2018
1 parent ae34f5f commit 9d042b1
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 23 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,4 +139,4 @@ The Infinite Scroll WordPress plugin will be in development in a separate repo.

---

By [Metafizzy](http://metafizzy.co)
By [Metafizzy 🌈🐻](https://metafizzy.co)
2 changes: 1 addition & 1 deletion js/history.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ proto.setHistory = function( title, path ) {
};

// scroll to top to prevent initial scroll-reset after page refresh
// http://stackoverflow.com/a/18633915/182183
// https://stackoverflow.com/a/18633915/182183
proto.onUnload = function() {
var pageIndex = this.scrollPageIndex;
if ( pageIndex === 0 ) {
Expand Down
34 changes: 17 additions & 17 deletions sandbox/page/4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,32 +42,32 @@ <h1 class="post-header__title">CodePen showcase: Round 1</h1>
</a>
<div class="post__content">
<p>Metafizzy&#39;s libraries have hundreds of CodePen demos. One for every feature, option, and behavior. But these demos are simplified examples. They don&#39;t do a good job of showing off what they&#39;re capable of. So I reached out to the true code artists of CodePen to see how they could make Isotope, Flickity, and Packery shine in the spotlight. Give &#39;em the old razzle-dazzle.</p>
<p>I&#39;ll be collecting these in the <a href="http://codepen.io/collection/AVjkpG/">Metafizzy showcase CodePen collection</a>, as well as individual collections for each library.</p>
<p>I&#39;ll be collecting these in the <a href="https://codepen.io/collection/AVjkpG/">Metafizzy showcase CodePen collection</a>, as well as individual collections for each library.</p>
<ul>
<li><a href="http://codepen.io/collection/DgkGmy">Isotope showcase</a></li>
<li><a href="http://codepen.io/collection/AYWzeJ">Flickity showcase</a></li>
<li><a href="http://codepen.io/collection/DRRLpZ/">Packery showcase</a></li>
<li><a href="https://codepen.io/collection/DgkGmy">Isotope showcase</a></li>
<li><a href="https://codepen.io/collection/AYWzeJ">Flickity showcase</a></li>
<li><a href="https://codepen.io/collection/DRRLpZ/">Packery showcase</a></li>
</ul>
<p><a href="http://codepen.io/Kseso">Kseso</a> makes the most of Flickity and CSS, using <code>is-selected</code> classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="oLyqGg" data-default-tab="result" data-user="Kseso" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/Kseso/pen/oLyqGg/">Playing with Flickity</a> by Kseso (<a href="http://codepen.io/Kseso">@Kseso</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p><a href="https://codepen.io/Kseso">Kseso</a> makes the most of Flickity and CSS, using <code>is-selected</code> classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="oLyqGg" data-default-tab="result" data-user="Kseso" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/Kseso/pen/oLyqGg/">Playing with Flickity</a> by Kseso (<a href="https://codepen.io/Kseso">@Kseso</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="http://codepen.io/jshawl">Jesse Shawl</a> made a slide puzzle with Packery. I can&#39;t believe this actually works!</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="ZORWxv" data-default-tab="result" data-user="jshawl" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/jshawl/pen/ZORWxv/">Order the tiles</a> by Jesse Shawl (<a href="http://codepen.io/jshawl">@jshawl</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p><a href="https://codepen.io/jshawl">Jesse Shawl</a> made a slide puzzle with Packery. I can&#39;t believe this actually works!</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="ZORWxv" data-default-tab="result" data-user="jshawl" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/jshawl/pen/ZORWxv/">Order the tiles</a> by Jesse Shawl (<a href="https://codepen.io/jshawl">@jshawl</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="http://codepen.io/pixelass">Gregor Adams</a> took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="wWxPqg" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/pixelass/pen/wWxPqg/">Pack(ev)ery thing</a> by Gregor Adams (<a href="http://codepen.io/pixelass">@pixelass</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p><a href="https://codepen.io/pixelass">Gregor Adams</a> took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="wWxPqg" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/pixelass/pen/wWxPqg/">Pack(ev)ery thing</a> by Gregor Adams (<a href="https://codepen.io/pixelass">@pixelass</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p>But he didn&#39;t stop there. Gregor made another Packery demo, this time using simpler rectangles. Check out how it works when you resize it.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="zBLrRr" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/pixelass/pen/zBLrRr/">Packery hackery</a> by Gregor Adams (<a href="http://codepen.io/pixelass">@pixelass</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="zBLrRr" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/pixelass/pen/zBLrRr/">Packery hackery</a> by Gregor Adams (<a href="https://codepen.io/pixelass">@pixelass</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p>Perhaps the best use of Isotope ever, <a href="http://codepen.io/acjdesigns">Antoinette Janus</a> makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="GqXgAE" data-default-tab="result" data-user="acjdesigns" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/acjdesigns/pen/GqXgAE/">Steven Universe x Isotope [Sponsored]</a> by Antoinette Janus (<a href="http://codepen.io/acjdesigns">@acjdesigns</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p>Perhaps the best use of Isotope ever, <a href="https://codepen.io/acjdesigns">Antoinette Janus</a> makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="GqXgAE" data-default-tab="result" data-user="acjdesigns" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/acjdesigns/pen/GqXgAE/">Steven Universe x Isotope [Sponsored]</a> by Antoinette Janus (<a href="https://codepen.io/acjdesigns">@acjdesigns</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="http://codepen.io/bennettfeely">Bennett Feely</a> makes a 3D, hovering Packery layout. It&#39;s melting my mind how this works.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="JKBJbx" data-default-tab="result" data-user="bennettfeely" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/bennettfeely/pen/JKBJbx/">Packery layout with 3D blocks</a> by Bennett Feely (<a href="http://codepen.io/bennettfeely">@bennettfeely</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p><a href="https://codepen.io/bennettfeely">Bennett Feely</a> makes a 3D, hovering Packery layout. It&#39;s melting my mind how this works.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="JKBJbx" data-default-tab="result" data-user="bennettfeely" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/bennettfeely/pen/JKBJbx/">Packery layout with 3D blocks</a> by Bennett Feely (<a href="https://codepen.io/bennettfeely">@bennettfeely</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="http://codepen.io/katydecorah">Katy DeCorah</a> brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="qNygjp" data-default-tab="result" data-user="katydecorah" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/katydecorah/pen/qNygjp/">Geo scope</a> by Katy DeCorah (<a href="http://codepen.io/katydecorah">@katydecorah</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<p><a href="https://codepen.io/katydecorah">Katy DeCorah</a> brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="qNygjp" data-default-tab="result" data-user="katydecorah" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/katydecorah/pen/qNygjp/">Geo scope</a> by Katy DeCorah (<a href="https://codepen.io/katydecorah">@katydecorah</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p>It&#39;s a delight to see what creative coders can come up with.</p>
<p>We have some more artists lined up so stay tuned for Round 2!</p>
Expand Down
2 changes: 1 addition & 1 deletion sandbox/page/5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1 class="post-header__title">Flickity takes The Field</h1>
</a>
<div class="post__content">
<p><a href="http://www.thefieldmag.com/"><em>The Field</em></a> is a new outdoor lifestyle publication, or as founder Chris Stillitano puts it, &quot;<em>The Field</em> is a place for good design and the great outdoors.&quot; It&#39;s also a great place to see Flickity in use.</p>
<p><em>The Field</em>&#39;s beautiful photo galleries are made with <a href="http://flickity.metafizzy.co/">Flickity</a>. It&#39;s great to see how they&#39;ve taken advantage of Flickity&#39;s <a href="http://flickity.metafizzy.co/style.html#previous-next-buttons">customizable previous &amp; buttons</a> to minimally style and position them. The slide counters change <a href="http://flickity.metafizzy.co/api.html#cellselect">on <code>cellSelect</code></a>.</p>
<p><em>The Field</em>&#39;s beautiful photo galleries are made with <a href="https://flickity.metafizzy.co/">Flickity</a>. It&#39;s great to see how they&#39;ve taken advantage of Flickity&#39;s <a href="https://flickity.metafizzy.co/style.html#previous-next-buttons">customizable previous &amp; buttons</a> to minimally style and position them. The slide counters change <a href="https://flickity.metafizzy.co/api.html#cellselect">on <code>cellSelect</code></a>.</p>
<div class="fit-video">
<iframe src="https://vid.me/e/opMu?muted=1" width="740" height="480" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen scrolling="no"></iframe>
</div>
Expand Down
6 changes: 3 additions & 3 deletions sandbox/page/6.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1 class="post-header__title">Triggering jQuery and vanilla JS events</h1>
<p class="post-header__date">3 Jul 2015</p>
</a>
<div class="post__content">
<p>You can now bind to jQuery events in <a href="http://isotope.metafizzy.co/">Isotope</a>, <a href="http://packery.metafizzy.co/">Packery</a>, and <a href="http://desandro.masonry.com">Masonry</a>. The recent upgrades allow you to use standard jQuery event methods <code>.on()</code>, <code>.off</code>, and <code>.one()</code>, rather than using ugly plugin method syntax.</p>
<p>You can now bind to jQuery events in <a href="https://isotope.metafizzy.co/">Isotope</a>, <a href="https://packery.metafizzy.co/">Packery</a>, and <a href="http://desandro.masonry.com">Masonry</a>. The recent upgrades allow you to use standard jQuery event methods <code>.on()</code>, <code>.off</code>, and <code>.one()</code>, rather than using ugly plugin method syntax.</p>
<pre><code class="lang-js"><span class="hljs-comment">// previous plugin method syntax</span>
<span class="hljs-comment">// Isotope &lt;= v2.2.0</span>
$grid.isotope( <span class="hljs-string">'on'</span>, <span class="hljs-string">'layoutComplete'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{...})
Expand All @@ -37,8 +37,8 @@ <h1 class="post-header__title">Triggering jQuery and vanilla JS events</h1>
<span class="hljs-comment">// Isotope &gt;= v2.2.1</span>
$grid.on( <span class="hljs-string">'layoutComplete'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{...})
</code></pre>
<p><a href="http://codepen.io/desandro/pen/scajv">View Isotope layoutComplete demo on CodePen</a>.</p>
<p>This feature is already in <a href="http://flickity.metafizzy.co/">Flickity</a> and <a href="http://draggabilly.desandro.com/">Draggabilly</a>. It was prime time to port it over to the layout libraries.</p>
<p><a href="https://codepen.io/desandro/pen/scajv">View Isotope layoutComplete demo on CodePen</a>.</p>
<p>This feature is already in <a href="https://flickity.metafizzy.co/">Flickity</a> and <a href="http://draggabilly.desandro.com/">Draggabilly</a>. It was prime time to port it over to the layout libraries.</p>

</div>
</article>
Expand Down

0 comments on commit 9d042b1

Please sign in to comment.