Skip to content

Commit

Permalink
added filter generator
Browse files Browse the repository at this point in the history
  • Loading branch information
@shooft
shooft committed Mar 3, 2024
1 parent 15ca42a commit 0b2a411
Showing 1 changed file with 110 additions and 108 deletions.
218 changes: 110 additions & 108 deletions samples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ <h3>Schetsen</h3>
</div>
</details>


<!--Filters & Masks-->
<details id="sessie-filters-and-masks">
<summary aria-label="meer over filters & masks"><h2>Filters & Masks</h2>
Expand Down Expand Up @@ -154,6 +155,7 @@ <h3>Links</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">Filter basics</a> (MDN)</li>
<li><a href="https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/">Icons verkleuren met filters</a> (CSS tricks)</li>
<li><a href="https://codepen.io/sosuke/live/Pjoqqp">CSS filter generator to convert from black to target hex color</a></li>
<li><a href="https://www.smashingmagazine.com/2021/07/hsl-colors-css/">HSL color wheel (and more)</a> (Smashing)</li>
</ul>

Expand All @@ -174,7 +176,6 @@ <h3>Schetsen</h3>
</div>
</details>



<!--Gradients-->
<details id="sessie-gradients">
Expand Down Expand Up @@ -468,120 +469,121 @@ <h3>Schetsen</h3>
<p><img src="img/schets-worst-mes-pan.jpg" alt="worst, mes en pan in wording"></p>

</div>
</details>

<!--ANIMEREN-->
<details id="sessie-animeren">
<summary aria-label="meer over animeren">
<h2>Animeren</h2>
<p>Van eenvoudige from-to <strong>keyframes</strong> tot complexe meervoudige cubic-beziers.</p>
</summary>

<div class="details-content">

<h3>Redenen om te animeren (<a href="https://valhead.com/">Val Head</a>):</h3>
<ul>
<li><strong>Relaties tussen elementen leggen. </strong>Bijv: een filter dat in- en uitschuift zodat je weet hoe 'de wereld' in elkaar zit en samenhangt.</li>
<li><strong>Aandacht op iets vestiging.</strong> Bijv. nieuwe content na een refresh met een animatie toevoegen aan een pagina, zodat het even het focuspunt wordt.</li>
<li><strong>Feedback geven.</strong> Bijv. een winkelwagentje even groter laten worden als er een product wordt toegevoegd, zodat duidelijk is dat het toevoegen gelukt is en waar het product is terug te vinden.</li>
<li><strong>Iets uitleggen.</strong> Bijv. gebruikers de eerste keer een animatie van een gesture tonen, zodat ze weten hoe de interactie werkt.</li>
<li><strong>Het merk karakter geven.</strong> De branding ook smoel geven met de wijze van animeren.</li>
</ul>

<h3>Oefenen</h3>
<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/poNEPRK">Animatie sommetjes</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/eYBdvey">Animatie sommetjes</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/mdOrmaM">Happy knife</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/RwoGVBp">Happy knife</a> (Codepen)</li>
</ul>

<h3>Samples</h3>
<ul>
<li><a href="https://www.sinds1971.nl/cssvoordedames/8-animations.html">Sanne's experimentjes</a> (sinds1971)</li>
<li><a href="https://codepen.io/shooft/pen/NWbNdON">Vormpjes met ogen - alles</a> (CodePen)</li>
<li><a href="https://codepen.io/shooft/pen/ZEBBBZP">Draaiende regenboog</a> (Codepen)</li>
</ul>

<h3>Links</h3>
<ul>
<li><a href="https://ohmy.disney.com/movies/2016/07/20/twelve-principles-animation-disney/">12 Principles of Animation</a> (Disney)</li>
<li><a href="https://vimeo.com/250349313 ">Designing Meaningful Animation</a> (Val Head - Video)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations - spec</a> (MDN)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties">CSS properties that can be animated using CSS Animations or CSS Transitions</a> (MDN)</li>
<li><a href="https://valhead.com/2020/05/09/reduced-motion-in-the-wild/">Reduced Motion 'In The Wild'</a> (Val Head)</li>
<li><a href="https://matthewlein.com/tools/ceaser">CSS Easing Animation Tool</a> (Matthew Lein)</li>
<li><a href="https://css-tricks.com/snippets/svg/curved-text-along-path/">Curved Text Along a Path</a> (CSS Tricks)</li>
</ul>

<h3>Schetsen</h3>
<p>Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:</p>
<p><img src="img/schets-worst-mes-pan.jpg" alt="worst, mes en pan in wording"></p>

</div>
</details>


<!--Cursor volgen-->
<details id="sessie-cursor-volgen">
<summary aria-label="meer over cursor volgen">
<h2>Cursor volgen</h2>
<p>De <strong>cursor volgen</strong> met <strong>custom properties</strong> en een <strong>beetje JS</strong>. Dank aan <a href="https://lea.verou.me/">Lea</a></p>
</summary>

<div class="details-content">

<h3>Oefenen</h3>
<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/NWwEOQg">Volg die muis - de basics</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/GROwdqd">Volg die muis - de basics</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/gOXQQbw">Where's Waldo</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/PoOxeeV">Where's Waldo</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/oNoQQbN">Color map</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/PoOxegv">Color map</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/JjOeeRg">Volg die muisjes</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/RwjqBLK">Volg die muisjes</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/dyZQQzG">Button bubbles</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/YzERjmQ">Button bubbles</a> (Codepen)</li>
</ul>


<h3>Links</h3>


<ul>
</details>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event">mousemove event</a> (MDN)</li>
<!--ANIMEREN-->
<details id="sessie-animeren">
<summary aria-label="meer over animeren">
<h2>Animeren</h2>
<p>Van eenvoudige from-to <strong>keyframes</strong> tot complexe meervoudige cubic-beziers.</p>
</summary>

<div class="details-content">

<h3>Redenen om te animeren (<a href="https://valhead.com/">Val Head</a>):</h3>
<ul>
<li><strong>Relaties tussen elementen leggen. </strong>Bijv: een filter dat in- en uitschuift zodat je weet hoe 'de wereld' in elkaar zit en samenhangt.</li>
<li><strong>Aandacht op iets vestiging.</strong> Bijv. nieuwe content na een refresh met een animatie toevoegen aan een pagina, zodat het even het focuspunt wordt.</li>
<li><strong>Feedback geven.</strong> Bijv. een winkelwagentje even groter laten worden als er een product wordt toegevoegd, zodat duidelijk is dat het toevoegen gelukt is en waar het product is terug te vinden.</li>
<li><strong>Iets uitleggen.</strong> Bijv. gebruikers de eerste keer een animatie van een gesture tonen, zodat ze weten hoe de interactie werkt.</li>
<li><strong>Het merk karakter geven.</strong> De branding ook smoel geven met de wijze van animeren.</li>
</ul>

<h3>Oefenen</h3>
<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/poNEPRK">Animatie sommetjes</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/eYBdvey">Animatie sommetjes</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/mdOrmaM">Happy knife</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/RwoGVBp">Happy knife</a> (Codepen)</li>
</ul>

<h3>Samples</h3>
<ul>
<li><a href="https://www.sinds1971.nl/cssvoordedames/8-animations.html">Sanne's experimentjes</a> (sinds1971)</li>
<li><a href="https://codepen.io/shooft/pen/NWbNdON">Vormpjes met ogen - alles</a> (CodePen)</li>
<li><a href="https://codepen.io/shooft/pen/ZEBBBZP">Draaiende regenboog</a> (Codepen)</li>
</ul>

<h3>Links</h3>
<ul>
<li><a href="https://ohmy.disney.com/movies/2016/07/20/twelve-principles-animation-disney/">12 Principles of Animation</a> (Disney)</li>
<li><a href="https://vimeo.com/250349313 ">Designing Meaningful Animation</a> (Val Head - Video)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations - spec</a> (MDN)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties">CSS properties that can be animated using CSS Animations or CSS Transitions</a> (MDN)</li>
<li><a href="https://valhead.com/2020/05/09/reduced-motion-in-the-wild/">Reduced Motion 'In The Wild'</a> (Val Head)</li>
<li><a href="https://matthewlein.com/tools/ceaser">CSS Easing Animation Tool</a> (Matthew Lein)</li>
<li><a href="https://css-tricks.com/snippets/svg/curved-text-along-path/">Curved Text Along a Path</a> (CSS Tricks)</li>
</ul>

<h3>Schetsen</h3>
<p>Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:</p>
<p><img src="img/schets-worst-mes-pan.jpg" alt="worst, mes en pan in wording"></p>

<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect">Element.getBoundingClientRect()</a> (MDN)</li>
</div>
</details>


<!--Cursor volgen-->
<details id="sessie-cursor-volgen">
<summary aria-label="meer over cursor volgen">
<h2>Cursor volgen</h2>
<p>De <strong>cursor volgen</strong> met <strong>custom properties</strong> en een <strong>beetje JS</strong>. Dank aan <a href="https://lea.verou.me/">Lea</a></p>
</summary>

<div class="details-content">

<h3>Oefenen</h3>
<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/NWwEOQg">Volg die muis - de basics</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/GROwdqd">Volg die muis - de basics</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/gOXQQbw">Where's Waldo</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/PoOxeeV">Where's Waldo</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/oNoQQbN">Color map</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/PoOxegv">Color map</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/JjOeeRg">Volg die muisjes</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/RwjqBLK">Volg die muisjes</a> (Codepen)</li>
</ul>

<ul>
<li>Meetypen: <a href="https://codepen.io/shooft/pen/dyZQQzG">Button bubbles</a> (Codepen)</li>
<li>Uitwerking: <a href="https://codepen.io/shooft/pen/YzERjmQ">Button bubbles</a> (Codepen)</li>
</ul>


<h3>Links</h3>

<li><a href="https://css-tricks.com/using-property-for-css-custom-properties/">Using @property for CSS Custom Properties</a> (CSS tricks)</li>
</ul>

<ul>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event">mousemove event</a> (MDN)</li>

<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect">Element.getBoundingClientRect()</a> (MDN)</li>

<li><a href="https://css-tricks.com/using-property-for-css-custom-properties/">Using @property for CSS Custom Properties</a> (CSS tricks)</li>
</ul>

<h3>Schetsen</h3>
<p>Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:</p>
<p><img src="img/schets-worst-mes-pan.jpg" alt="worst, mes en pan in wording"></p>

</div>
</details>
<h3>Schetsen</h3>
<p>Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:</p>
<p><img src="img/schets-worst-mes-pan.jpg" alt="worst, mes en pan in wording"></p>

</div>
</details>


</main>
Expand Down

0 comments on commit 0b2a411

Please sign in to comment.