Webデザイン 表示時間のメーター付き、クリックでも自動でも切り替わるスライダー クリックでも一定時間ごとに自動でも切り替わるスライダーです。 どのくらいで切り替わるかもわかるようにメーターも設置しました。 切り替えはやメーターの描画はJavaScript(jQuery)で行っています。 デモページはこちら ... 2018.12.09 Webデザイン
Webデザイン スクロールの途中からメニューを上に固定して表示 スクロールしても画面からメニューが見えなくならないように上に固定する方法です。 デモページはこちら ソースコード HTML <!-- ======== header ======== --> <heade... 2018.12.06 Webデザイン
Webデザイン 訪問回数に応じてスタンプを押すアニメーション(jquery-cookie.jsを使用) ページにアクセスしたらその回数に応じてスタンプを押していくアニメーションです。 jquery-cookie.jsを使ってクッキーのデータを取得し、ページに訪問した回数に応じてスタンプの表示やアニメーションを行っています。 デモページ... 2018.12.05 Webデザイン
Webデザイン 整列しているリストをクリックで項目ごとに絞り込み表示 flexboxで整列して並んでいるリスト全体からクリックした項目で絞り込み表示させる方法です。 ボタンをクリックしたらjQueryを利用して表示非表示を処理しています。 デモページはこちら ソースコード HTML <... 2018.12.04 Webデザイン
Webデザイン 整列しているボックスをアニメーションで順番に表示 CSSとjQuery(JavaScript)を利用したページ読み込み時に再生されるアニメーションです。 CSSでtransitionとtransformを設定しておき、jQueryでtransformの値を変更することでアニメーションを実... 2018.12.03 Webデザイン
Webデザイン クリックで横からスライドして現れるメニュー スマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。 半透明になっている黒の背景をクリックするとメニューを閉じることができます。 デモページはこちら ソースコード HTML ... 2018.12.02 Webデザイン
Webデザイン サムネクリックで画像を切り替えるレスポンシブのスライダー サムネイルをクリックして画像を切り替えるタイプのレスポンシブに対応したスライダーです。 デモページはこちら ソースコード HTML <div id="responsive-slider"> <div i... 2018.12.02 Webデザイン