Giter Site home page Giter Site logo

jungissei.github.io_old's People

Contributors

jungissei avatar maromaromatsuhashi avatar

Watchers

avatar avatar

jungissei.github.io_old's Issues

アコーディオン

  • アコーディオンメニュー(プラスボタン、矢印など)

/* トグルここから*/
$(window).on('load', function(){
  let flg_open = true;

  $('.js_toggle > .js_toggle_btn').on('click', function (e) {
    if(flg_open){
      flg_open = false;
      setTimeout(function(){
        flg_open = true;
      }, 500);

      e.preventDefault();

      $(this).parent('.js_toggle').toggleClass('opened');
      $(this).next('.js_toggle_body').slideToggle();
    }
  });
});
/* トグルここまで*/
  • 一つだけ表示させるアコーディオン。一つ開くと他が閉じるやつ

ハンバーガーメニュー 

      // fix position for ios
      var topPosition = $(window).scrollTop();
      $('body').css({'position':'fixed','top': - topPosition});
  • absluteバージョンも作る
  • メニュー要素は、ボタン下に追加ではなく、wrapper要素開始タグの下に追加する
  • Headerタグの大きさによって位置が変わらないようにする
  • ボタン押下時のLINEの位置
      .hamburger_menu_btn_top {
        animation: opened_hamburger_menu_btn_top 0.75s forwards;
        @keyframes opened_hamburger_menu_btn_top {
          0% {
            transform: rotate(0);
            top: 30%;
          }
          50% {
            transform: rotate(0);
            top: calc(50% - 0.5px);
          }
          100% {
            transform: rotate(45deg);
            top: calc(50% - 0.5px);
          }
        }
      }

      .hamburger_menu_btn_middle {
        opacity: 0;
      }

      .hamburger_menu_btn_bottom {
        animation: opened_hamburger_menu_btn_bottom 0.75s forwards;
        @keyframes opened_hamburger_menu_btn_bottom {
          0% {
            transform: rotate(0);
            bottom: 30%;
          }
          50% {
            transform: rotate(0);
            bottom: calc(50% - 0.5px);
          }
          100% {
            transform: rotate(-45deg);
            bottom: calc(50% - 0.5px);
          }
        }
      }
  • ハンバーガーメニューの出し方、左右スライドどちらもでるように対応

グローバルメニュー

  • ロゴ+メニューの設計にする
  • 追従アニメーションCSS対応、注意点追記
  • #29
  • サブメニューは固定エリア全体からホバーアウトしたら時に閉じる
  • サブメニューはアイテムクリック時にも閉じれるようにする。IPAD用

position absoluteの要素をテキストの長さによって幅を調整できるようにする

position:absolute;が付与された要素の幅は、position:relative;が付与された親要素の幅を基準に決定されるので、position:absolute;内のテキストの幅に合わせて、widthで調整する処理を作成する。

実装手順

参考

テスト

  • テキストの長さに応じてテキストの親要素が伸縮しているか
  • 親要素の幅の伸縮に最大・最小値あるか

API情報取得

  • 文字列をjson配列にして取得
  • getjson で取得
  • ajax で変数に格納

slick

  • 3つ画像を出し、真ん中のみ大きい画像のスライド

  • ドットアロー

slick SCSS実装しやすくる

  • それぞれのコードをコピペで動くようにする

slick dottedのカスタマイズしやすくる

  • 色をSCSS変数でわかりやすくする。currentや、hoverなど、、、、
  • 大きさの変数化
  • listをinline-blockにすると、ul.slick-dots にpaddingが効かなくなるので、ul.slick-dotsにdisplay:flex;を付与して、横並びにさせる

正規表現

先頭から特定文字

  • 先頭から特定の文字まで
  • 先頭から特定の文字の前まで

特定文字から末尾

  • 特定文字から末尾まで
  • 特定文字の後から末尾まで

URLディレクトリ

  • 先頭ディレクトリ抽出
  • 末尾ディレクトリ抽出

全角・半角

  • 全角文字のみ抽出:日本語
  • 半角文字のみ抽出:英語

リンク置換

ディレクトリ置換

  • ディレクトリ末尾取得
  • ディレクトリ先頭取得

PC時のフォントサイズ調整→ページ読み込みが遅いとフォントサイズが読み込まれないのでon loadやめる 


/* レスポンシブフォントサイズ ここから
 *
 * 使い方：
 * - フォントサイズを調整したい要素に「data-responsive-font-size」属性を付与
 * - 属性を付与した要素にフォントサイズが設定されていること
 *
*/
$(function(){
  /*ページ読み込み時処理 ここから*/
  $(window).on('load',function(){
    responsive_font_size();
  });
  /*ページ読み込み時処理 ここまで*/

  /*ディスプレイ幅リサイズ時処理 ここから*/
  let timer = 0;
  $(window).on('resize',function(){

    if (timer) clearTimeout(timer);
    timer = setTimeout(function(){
      responsive_font_size();
    }, 200);

  });
  /*ディスプレイ幅リサイズ時処理 ここまで*/
});

/*
 * PC最大画面幅サイズ以下の時   : フォントサイズ・単位をvwに変更
 * PC最大画面幅サイズ以上・SP時 : フォントサイズリセット
*/
function responsive_font_size(){
  if(is_available_for_change_vw_font_size()){
    set_data_max_font_size();
    change_vw_font_size();
    return;
  }

  reset_font_size();
}

/*
 * 最大フォントサイズをdata属性に付与
*/
function set_data_max_font_size(){
  $('[data-responsive-font-size]').each(function(){
    if($(this).attr('data-max-font-size'))
      return;

    $(this).attr('data-max-font-size', $(this).css('font-size'));
  });
}

/*
 * @return 「data-max-font-size」属性を持つ要素
*/
function get_elem_font_size(){
  return $('[data-max-font-size]');
}

/*
 * フォントサイズ・単位をvwに変更
*/
function change_vw_font_size(){
  get_elem_font_size().each(function(){
    let elem_obj = $(this);
    let max_font_size = parseInt(elem_obj.attr('data-max-font-size'));
    let font_size = 100 / 1400 * max_font_size;
    elem_obj.css('font-size', font_size + 'vw');
  });
}

/*
 * フォントサイズリセット
*/
function reset_font_size(){
  get_elem_font_size().each(function(){
    $(this).css('font-size', '');
  });
}

/*
 * @return PC最大画面幅サイズ以下の真偽
*/
function is_available_for_change_vw_font_size(){
  return window.matchMedia('(max-width: 1400px)').matches
    &&window.matchMedia('(min-width: 768px)').matches;
}

/*レスポンシブフォントサイズ ここまで*/

HTMLうつし 

    position: relative;
    &::after{
      position: absolute;
      opacity: 0.3;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-image: url(../../uuu.png);
      background-repeat: no-repeat;
      background-position: top center;
      content: "";
      height: 100%;
      //background-size: 100% auto;
    }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.