Webデザイン

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

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

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

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

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

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

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