【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js" charset="utf-8"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="products__sort filters button-group js-radio-button-group" data-filter-group="type"> <label class="button" for="all" data-filter="*">ALL</label> <label class="button" for="apple" data-filter=".apple">Apple Music</label> <label class="button" for="spotify" data-filter=".spotify">Spotify</label> <label class="button" for="line" data-filter=".line">LINE MUSIC</label> </div> <div class="products__wrap grid"> <div class="product grid-item active apple">Apple</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item line">LINE</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item apple">Apple</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item line">LINE</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item line">LINE</div> <div class="product grid-item apple">Apple</div> <div class="product grid-item apple">Apple</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item line">LINE</div> <div class="product grid-item spotify">spotify</div> <div class="product grid-item spotify">spotify</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
$(function(){ var $grid = $('.grid').isotope({ itemSelector: '.grid-item' }); // store filter for each group var filters = {}; $('.filters').on( 'click', '.button', function( event ) { var $button = $( event.currentTarget ); // get group key var $buttonGroup = $button.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); // set filter for group filters[ filterGroup ] = $button.attr('data-filter'); // combine filters var filterValue = concatValues( filters ); // set filter for Isotope $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function( event ) { $buttonGroup.find('.is-checked').removeClass('is-checked'); var $button = $( event.currentTarget ); $button.addClass('is-checked'); }); }); // flatten object by concatting values function concatValues( obj ) { var value = ''; for ( var prop in obj ) { value += obj[ prop ]; } return value; } }); |
Miki Kohinata
大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。
INDEX
PICK UP
