以前投稿したCSSのボタンを紹介する記事がうまく動かなくなったので、投稿しなおします。
中身は前と変わってません。
動きとしてはホバーすると色が変わり、押すとへこむというものです。
下にDEMOがあります。リンクしてないので、押しまくって楽しんでください。
以下はコードです。
以前投稿したCSSのボタンを紹介する記事がうまく動かなくなったので、投稿しなおします。
中身は前と変わってません。
動きとしてはホバーすると色が変わり、押すとへこむというものです。
下にDEMOがあります。リンクしてないので、押しまくって楽しんでください。
以下はコードです。
みなさん、お疲れ様です。
今日は珍しくデザイン寄りのお話を。といっても途中からコーディングの話もしますけど。
今回取り組んだのはCSSスプライトです。
CSSスプライトというのは、複数のアイコンなどの画像を一つの画像にまとめて、画像の読み込み回数を減らそうという手法です。制作にあたって以下のサイトを参考にさせていただきました。
CSSスプライトについてあれこれ。(Lobin.jpさん)
まずは画像作成。
今回はPhotoshopを使いました。Illustratorでもできると思うのですが、配置するのがPhotoshopのほうが楽だったので。
図のように一つひとつの画像を同じサイズにして並べていきます。今回は16px角にしています。
このとききちんと画像を並べておくと、コーディングの時に便利です。
では、できた画像をコーディングでサイトに組み込んでみます。
少し省略していますが、最低限必要な記述は上記。before・afterで入れるとか、文字と置き換えるとか、そのときに応じて入れ方は工夫する必要がありそうです。
widthとheightは画像サイズにします。そして、background-sizeを(画像の数×100%)にします。そしてbackground-positionの値を(-100% * (表示したい画像の順番ー1))にします。一番上なら0番目ってことです。
上のサンプルは2個×4個の画像が並んでいるので、background-sizeは200% 400%となるわけです。で、0番目なので上向きの三角が表示されるというわけですね。
CSS書くときは背景画像の読み込みとか、サイズを一括で指定しておいて、それぞれに画像位置だけ指定してあげるとCSSも短くなって良いですね。
画像はここからどうぞ。
ダウンロード
みなさん、お疲れ様です。
今日はハロウィンですね。まあ、だからと言って何もないんですけど。
今回は以前に紹介したフィックスするナビゲーションの改良版です。
ページにフィックスするスムーズスクロールのUI
矢印の向きに加えて、現在地のナビの背景色も変化します。
まずはコードです。
HTMLは前回と同じなので割愛しています。ただしsec6を動かすためには7番目の要素が必要になるので、footerにsec7というIDをつけています。実際に使う場合はご注意を。
今思えば、配列使ってもよかったかも。
もっといい方法があれば教えていただけると嬉しいです。
それでは今回はこのへんで。
みなさん、お疲れ様です。
今回はSVGアニメーションに挑戦しました。→DEMO
存在自体は知ってたのですが、使いどころがわからずほったらかしになっていました。
で、なんとなく上のDEMOを作っていたら、知人が「サイトの初めに出したら面白そう」と言ってくれたので、それをヒントに実装しました。もしよければ後でポートフォリオサイトのほうに行ってみてください。ページ上部のロゴからリンクしてます。
では、使い方です。
今回はこちらのサイトを参考にさせていただきました。サイトが詳しいのでここでは簡単に説明させていただきます。
http://ascii.jp/elem/000/000/901/901319/
①まず、Illustratorでイラストを描きます。アンカーポイントは少ないほうがよさそうです。
②イラストをsvg形式で保存します。このときレイヤーの名前は半角英数にしておきましょう。
③svgの画像をDreamweaverなどのテキストエディタで開きます。すると以下のようなコードが出ます(見えないと思いますが、雰囲気だけ)。
④このコードの<svg>~</svg>をコピーしてHTMLの埋め込みたいところにペーストします。このときブロック要素で囲んでおいて、その要素の幅で画像の大きさを操作します。
⑤CSSでアニメーションの動きを決めます。 stroke・・・線の色 fill・・・塗りつぶしの色 stroke-width・・・線の幅 stroke-dasharray・・・破線の間隔 stroke-dashoffset・・・破線の開始位置 仕組みとしては破線の間隔を見えなくなるくらい長くして、破線の開始位置をすごく大きいところから小さくしていくことで、描画するような動きになるということだそうです。
一応以上で完成です。まだやり始めでわかってないこともたくさんあるので、またいろいろ試してみて載せたいと思います。
みなさん、お疲れ様です。
今回は画像を表示するモーダルウィンドウを作りました。Lightboxなどのプラグインでおなじみの機能で、使い勝手の良いものも多いですが、いろいろ見てて自分でも作ってみたくなったのでやってみました。
プラグインには及びませんが、そこそこ使えると思いますので、使ってやってもいいよって方はぜひ使ってください。
まずはデモページをどうぞ。
以下コードです。下に使い方も載せておきます。
HTML
CSS
jQuery
変更するのはthumbnailの画像のパスとaタグのhref属性(これが表示する画像になります)、CSSです。
基本的にjQueryは触らずに使えるようにしていますが、カスタマイズしたい場合はご自由にどうぞ。
初めのところの変数でいろいろ変えられるようになってます。
modalIn:モーダルウィンドウを開く時間
modalOut:モーダルウィンドウを閉じる時間
chengeSpeed:画像変更の時間
arrowStyle:falseにすると矢印ボタンの位置をCSSで変更できるようになります。
今回、使ったjQueryのいろいろ
setTimeout:時間差で処理を実行する。これのおかげでボタンの位置を調整できた。
.map:一言でいうと配列が作れる。慣れると便利だと思う。
.length:配列や要素の数を取得できる。個数が変化する要素には必須だと思う。
:visible:今見えてる要素を取得。今回大活躍。
詳しくは調べてみてください。いろいろ使い方があっておもしろいですよ。
それでは、長くなってしまいましたが、今回はこのへんで。
ページ内ナビゲーションでスムーズスクロールしてページの上部にフィックスしてついてくるというのはよくあると思います。で、下向きの矢印がついてるとスムーズスクロールだとすぐにわかると思うんですけど、フィックスしてついてくるとき、通り過ぎた要素のナビも下を向いてると違和感を感じますよね?
ということで、通り過ぎた要素のナビの矢印が上を向くフィックスナビを考えてみました。
以下はコードです。CSSは見た目の調整にのみ使っているので、省略しています。
矢印はFont Awesomeで入れているので、コピペするときはお忘れなく。
背景画像の切り替えにする場合は、.attr(‘class’,’fa fa-caret-up’)を.css(‘background-image’,’画像パス’);にすればできます。セレクタをお間違えないように。
HTML
jQuery