Webデザイン

Webデザイン

表示時間のメーター付き、クリックでも自動でも切り替わるスライダー

クリックでも一定時間ごとに自動でも切り替わるスライダーです。 どのくらいで切り替わるかもわかるようにメーターも設置しました。 切り替えはやメーターの描画はJavaScript(jQuery)で行っています。 デモページはこちら ...
Webデザイン

スクロールの途中からメニューを上に固定して表示

スクロールしても画面からメニューが見えなくならないように上に固定する方法です。 デモページはこちら ソースコード HTML <!-- ======== header ======== --> <heade...
Webデザイン

訪問回数に応じてスタンプを押すアニメーション(jquery-cookie.jsを使用)

ページにアクセスしたらその回数に応じてスタンプを押していくアニメーションです。 jquery-cookie.jsを使ってクッキーのデータを取得し、ページに訪問した回数に応じてスタンプの表示やアニメーションを行っています。 デモページ...
Webデザイン

整列しているリストをクリックで項目ごとに絞り込み表示

flexboxで整列して並んでいるリスト全体からクリックした項目で絞り込み表示させる方法です。 ボタンをクリックしたらjQueryを利用して表示非表示を処理しています。 デモページはこちら ソースコード HTML <...
Webデザイン

整列しているボックスをアニメーションで順番に表示

CSSとjQuery(JavaScript)を利用したページ読み込み時に再生されるアニメーションです。 CSSでtransitionとtransformを設定しておき、jQueryでtransformの値を変更することでアニメーションを実...
Webデザイン

クリックで横からスライドして現れるメニュー

スマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。 半透明になっている黒の背景をクリックするとメニューを閉じることができます。 デモページはこちら ソースコード HTML ...
Webデザイン

サムネクリックで画像を切り替えるレスポンシブのスライダー

サムネイルをクリックして画像を切り替えるタイプのレスポンシブに対応したスライダーです。 デモページはこちら ソースコード HTML <div id="responsive-slider"> <div i...