Slickを利用して画像が徐々にズームしていくエフェクトをかける | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute
仕事での備忘録や田舎住まいの生活などの日常を雑記したコーダーのブログ CattleMuteキャトルミュート 通常のスライドショーを行う際に、自分はよくSlickを利用している。 で、少し前に少し大きめの案件が入った際に、画像を徐々にズームをしていきたいといった要望があった。 まぁ普通に考えたら単純にズームをかけていく場合、Slickを使わずともJSで順繰りに要素へズーム用のCSSクラスを付与していけば良いだけなのでそこまで難しいものでもない。 ・・・が、Web制作は魔法のように何でも出来ると考える諸氏諸々に、更に後付であれもあれもと要望がくると非常に鬱陶しいので、今回もSlickにお世話になった。 今回はこれを利用して画像が徐々にズームしていくエフェクトを作った際に書いたコードを、またもメモがてら掲載しようと思う。 Slickでの徐々にズームを実装するに当たり、最低やらなければならないこと
レスポンシブでハンバーガーメニューになる固定サイドバー
レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた | スターフィールド株式会社
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、 最近バージョンアップされ、機能もパワーアップされてました。 サイト自体もリニューアルされ、今風になっていました。 それに伴い、今回新しく記事にすることにしました。 以前の記事は以下になります。 コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」 今回のバージョンアップした点は以下になります。 ・レスポンシブに対応 ・スワイプが可能（スマートフォン） ・cssが付いているので、cssの設定が楽になった ・コントロールの画像等も付いている ・カルーセルの設定も変更に(プラグインで設定する) 今回もDEMOを作成しましたが、 レスポンシブになった箇所以外は、あまり以前のと変わってはいません。 DEMO それでは簡単にではありますが、使い方です。 bxSlider
Off-canvas | Foundation Docs
Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy. The Psychohistorians Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decl
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
フラットなタブを実装するjQueryコードとCSS | Magicalog
フラットなデザインのタブを実装するjQueryコードとCSSを紹介します。 例によって簡単にタブを作れるjQueryライブラリがありますので、めんどうな方はそちらを使用するとラクチンだと思います。 jQueryライブラリ jQueryUI 仮にjquery.tab.jsと名前をつけて保存 $(function(){ $('.tabbox:first').show(); $('#tab li:first').addClass('active'); $('#tab li').click(function() { $('#tab li').removeClass('active'); $(this).addClass('active'); $('.tabbox').hide(); $($(this).find('a').attr('href')).fadeIn(); return false;
ページ内ナビをコンテンツの位置によってカレント表示させる
パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。 参考にしたサイト 作ってみたと言いつつ、大部分が参考サイト通りなので先にご紹介いたします。 jQueryで長いページの区切り（セクション）ごとに背景を変化させる | webOpixel jQueryを使った長い縦スクロールページの現在地による制御 | 2GRAVITY カレント表示でaタグはそのまま とりあえずカレント表示されればOKのタイプ。カレントの箇所もクリックできます。 サンプルページ HTMLの抜粋は以下 <ul id="nav"> <li><a href="#section01">menu<a></li> <li><a href="#se
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
