jQuery007 カルーセル「Slick」
カルーセル「Slick」
■メモ
・RWD対応してるプラグイン
・カスタマイズが楽。css,jsなど必要なものはマスターからコピーして所定のディレクトリで管理。それに合わせてパス修正。
・.slider,.slick-slideクラスあたりでcssを整える。
・埋め込みは外部ファイル化した方がすっきりする。
■コード
htmlのみ
<!DOCTYPE html> <html> <head> <title>Slick Playground</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <link rel="stylesheet" href="css/style.css"> <style> h1{ text-align: center; } </style> </head> <body> <h1>regular slider</h1> <section class="regular slider"> <div> <img src="http://placehold.it/350x300?text=1" alt=""> </div> <div> <img src="http://placehold.it/350x300?text=2" alt=""> </div> <div> <img src="http://placehold.it/350x300?text=3" alt=""> </div> <div> <img src="http://placehold.it/350x300?text=4" alt=""> </div> <div> <img src="http://placehold.it/350x300?text=5" alt=""> </div> <div> <img src="http://placehold.it/350x300?text=6" alt=""> </div> <div> <img src="http://placehold.it/350x300?text=7" alt=""> </div> </section> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="js/slick.js" charset="utf-8"></script> <script src="js/script.js"></script> </body> </html>
参考
http://on-ze.com/archives/4996
http://kenwheeler.github.io/slick/
jQuery006 モーダル「Lightbox」
プラグイン「Lightbox」
公式よりDL。
Lightbox
サンプルのindex.htmlがあるため、使いやすい形に修正する。
今回は画像はサムネイルとメインの２つを用意。
■コード
html
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Lightbox Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- ★ --> <link rel="stylesheet" href="css/lightbox.css"><!-- ★ --> </head> <body> <section> <h3>A Four Image Set (jQuery plugin "Lightbox")</h3> <div> <a class="example-image-link" href="img/tokage_top.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/tokage_sml.jpg" alt="tokage"/></a> <a class="example-image-link" href="img/frog_top.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/frog_sml.jpg" alt="frog" /></a> <a class="example-image-link" href="img/taki_top.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/taki_sml.jpg" alt="waterfall" /></a> <a class="example-image-link" href="img/bird_top.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/bird_sml.jpg" alt="bird" /></a> </div> </section> <section> <p> For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a> </p> </section> <!-- <script src="js/lightbox-plus-jquery.min.js"></script> --> <script src="js/lightbox.js"></script><!-- ★ --> </body> </html>
■参考
その他のプラグイン
・colorbox：http://www.jacklmoore.com/colorbox/
・fancybox：商用利用は有料
jQuery005 スライダー「bxSlider」
プラグイン「bxSlider」
■インストール（公式抜粋）
Step 1: Link required files
→HTMLでjQuery,bxsliderjs,cssを読み込み
Step 2: Create HTML markup
→スライドさせたいイメージをマークアップ。
Step 3: Call the bxSlider
→.bxsliderクラスに対してsliderを呼び出し
■ポイント
・所定のディレクトリに必要なものだけ配置
・imgのパスをディレクトリ構成に合わせて置換
※minファイルを利用せずカスタマイズする場合
・記述ミスによる各ファイルのinclude失敗に注意
・動作指定オプションは多数あるため、こちらもサイトに合わせてカスタマイズ
■
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>bxslider</title> <meta name="description" content=""> <link href="css/style.css" rel="stylesheet"> <meta name="viewport" content="width=device-width"> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="js/jquery.bxslider.js"></script> <!-- bxSlider CSS file --> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script src="js/script.js"></script> </head> <body> <header> <h1>bxSlider</h1> <p>sliderの学習</p> </header> <div class="container"> <ul class="bxslider"> <li><img src="img/bxslider1.jpg"></li> <li><img src="img/bxslider2.jpg"></li> <li><img src="img/bxslider3.jpg"></li> <li><img src="img/bxslider4.jpg"></li> </ul> </div> </body> </html>
$(document).ready(function(){ $('.bxslider').bxSlider({ //自動でスライドする設定 //auto: true, //autoControls: true, //表示エフェクトの指定 mode:'fade', //スライドの速度指定 speed: 1000, //下にある点をこれで表示/非表示 //pager: true, //左右の矢印の表示/非表示。初期値はtrue; //controls: true, }); });
■参考
http://bxslider.com/
https://hozunomiya.xyz/?p=83
http://on-ze.com/archives/1658
Mac001 ファインダーからパスをコピー
ファインダーからパスをコピー
■手番
・対象ファイル/ディレクトリを、「control+右クリック」でコンテキストメニュー表示
・その状態で⌥(option / alt)を押下
・[◯◯のパス名をコピー]へ表示が切り替わる。
※El Capitan からは標準でその機能は実装済みの模様とのこと
■参考
http://qiita.com/ohkawa/items/c84fcb1347dfb3a73c6d
http://qiita.com/akiporoyopida/items/506cd3f569d4ae0ee7ff
Photoshop007 ブラシのプリセット追加
ブラシのプリセット追加
■手番
事前準備
・フリーのブラシのプリセットファイル(.abr)をダウンロードする。
・.abrファイルをプリセット格納場所に移動する。
/Applications/Adobe Photoshop CC 2017/Presets/Brushes/~~.abr ココ★
※Photoshopの再起動が必要
ブラシに追加
・ウィンドウ＞ブラシ＞ブラシプリセット＞ハンバーガーメニューを押下し、配置したブラシプリセットが入っていることを確認する。
・対象のプリセットをクリックし「追加」を押下する。
以上
※使い方自体は通常のブラシと同様なため、カラー、サイズ、透明度などを調整して利用する。
■参考
Floral_brushes
Free Floral Brush Pack - Free Photoshop Brushes at Brusheezy!
Photoshop006 「エッジ（境界線を調整）機能」で女性の髪を綺麗に合成する
エッジ（境界線を調整）機能」で女性の髪を綺麗に合成する
■手番
・対象人物を「クイック選択ツール」で枠を取る。
※背景と図の反転は「cmd+shift+i」
・ツールバーの「境界線を調整」を選択。
※最新verの「選択とマスク」
・以下の項目を調整し、OKを押下する。
表示モード：見やすい色へ。白黒が見やすい。
エッジの検出：20~30pxあたりで髪がもわっと切り抜ける状態になる。
出力：不要なカラーの除去にチェックを入れる。
出力先：「新規レイヤー（レイヤーマスクあり）」
・あとはレイヤーマスクを通常の使い方で微調整を行う。
・できたら合成したい背景画像などに貼り付ける。
以上です。
web025 CSSのみでのキャプションエフェクト
CSSのみでのキャプションエフェクト
■考え方
・positionレイアウト
・キャプションはimgの下に配置しておき、overflow:hidden;で非表示にしておく。
・hoverでpositionのbottomを変更し表示する。
・リセットcssにfigure,figcaptionなど入れ忘れに注意。
■コード
html
<div class="main2"> <figure> <img src="img/tokage.png" alt="とかげ"> <figcaption> <h3>キャプションタイトル</h3> <p>キャプション本文</p> </figcaption> </figure> </div><!-- .main2 -->
/*----------------------------.main2*/ .main2{ width: 500px; height: 500px; margin: 20px auto; overflow: hidden; border: 1px solid #555; } .main2 figure{ margin: 0 auto; position: relative; } .main2 figcaption{ background-color: rgba(0,0,0,0.5); width: 500px; height: 150px; text-align: center; position: absolute; bottom: -150px; transition: 1.5s; } .main2 figure:hover figcaption{ bottom: 0px; } .main2 figcaption h3{ color: #fff; } .main2 figcaption p{ color: #fff; }
