HTML

CSS HTML 未分類 2025.1.12

テキスト無限スクロール

<section class="scroll">
	<div class="first">
		テキスト1　　テキスト2　　テキスト3　　テキスト4　　テキスト5
	</div>
	<div class="last">
		テキスト1　　テキスト2　　テキスト3　　テキスト4　　テキスト5　
	</div>
</section>

.scroll {
    display: flex;
    overflow: hidden;
}

.scroll .first,
.scroll .last {
    flex-shrink: 0;
    width: auto;
    height: auto;
    display: inline-block;
    text-wrap: nowrap;
    white-space: nowrap;
}

.scroll .first {
    animation: ani-first 10s infinite linear 0.1s both;
}

.scroll .last {
    animation: ani-last 10s infinite linear 0.1s both;
}

@keyframes ani-first {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes ani-last {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

CSS HTML 2023.5.23

スクロールバーが伸びたり縮んだり

HTML

<div class="scroll">
		<a href="#about">
			SCROLL
		</a>
	</div>
	<!-- /.scroll -->

SCSS

.scroll {
    bottom: 180px;
    font-family: 'Volkhov', serif;
    font-size: 13px;
    letter-spacing: .2em;
    position: absolute;
    right: 80px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: sideways;

    a {

      &:before,
      &:after {
        content: "";
        display: block;
        height: 150px;
        width: 1px;
        position: absolute;
        right: 50%;
        top: 120%;
        transform-origin: top;
        background-color: rgba(0, 0, 0, 0.5);
      }

      &:before {
        background-color: rgba(0, 0, 0, 0.1);
      }

      &:after {
        transform: scaleY(0);
        animation: anim-scroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      }
    }
  }

@keyframes anim-scroll {

0% {
    transform: scaleY(0)
  }

  35% {
    transform: scaleY(1);
    transform-origin: top
  }

  40% {
    transform-origin: bottom
  }

  50% {
    transform: scaleY(1)
  }

  85% {
    transform: scaleY(0);
    transform-origin: bottom
  }

  100% {
    transform-origin: top
  }
}

CSS HTML jQuery 2023.5.8

タブ

HTML

<div class="tab-area">
 <div class="tab active">
   タブ１
 </div>
 <div class="tab">
   タブ２
 </div>
 <div class="tab">
   タブ３
 </div>
</div>
<div class="content-area">
 <div class="content show">
   タブ１コンテンツ
 </div>
 <div class="content">
   タブ２コンテンツ
 </div>
 <div class="content">
   タブ３コンテンツ
 </div>
</div>

SCSS

.tab-area {
  display: flex;
  .tab {
    align-items: center;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  .tab.active {
    background-color: #000;
    color: #fff;
  }
}
.content-area {
  .content {
    display: none;
  }
  .content.show {
    display: block;
  }
}

jQuery

$(function () {
  let tabs = $(".tab");
  $(".tab").on("click", function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});

HTML jQuery 2022.10.1

パラメータを外部に引き継ぐ方法

Transfer UTM Parameters From One Page To Another with GTM

domainsToDecorateにドメイン名を書き、

queryParamsに引き継ぎたいパラメータを書くだけ。

<script>
(function() {
  var domainsToDecorate = [
          'domain1.com', //add or remove domains (without https or trailing slash)
          'domain2.net'
      ],
      queryParams = [
          'utm_medium', //add or remove query parameters you want to transfer
          'utm_source',
          'utm_campaign',
          'something_else'
      ]
  // do not edit anything below this line
  var links = document.querySelectorAll('a'); 

// check if links contain domain from the domainsToDecorate array and then decorates
  for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
      for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) { 
          if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
              links[linkIndex].href = decorateUrl(links[linkIndex].href);
          }
      }
  }
// decorates the URL with query params
  function decorateUrl(urlToDecorate) {
      urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
      var collectedQueryParams = [];
      for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
          if (getQueryParam(queryParams[queryIndex])) {
              collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
          }
      }
      return urlToDecorate + collectedQueryParams.join('&');
  }

  // borrowed from https://stackoverflow.com/questions/831030/
  // a function that retrieves the value of a query parameter
  function getQueryParam(name) {
      if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
          return decodeURIComponent(name[1]);
  }

})();
</script>

HTML jQuery 2022.6.4

動画オリジナルコントローラー

<video id="video01" src="movie.mp4" autoplay muted loop controls playsinline></video>
<div class="control">
<divid="play" class="hidden"><iclass="fa fa-play"></i></div>
<divid="stop"><iclass="fa fa-pause"></i></div>
<divid="mute"><iclass="fa fa-volume-off"></i><iclass="fa fa-volume-up hidden"></i></div>
</div>
<!-- /.control -->

    $(function() {
        // 操作対象のvideoを指定
        var video = $('#video01').get(0);
        // 動画の再生 
        $('#play').click(function() {
            $('#play').addClass('hidden');
            $('#stop').removeClass('hidden');
            video.play();
        });
        // 動画の一時停止
        $('#stop').click(function() {
            $('#play').removeClass('hidden');
            $('#stop').addClass('hidden');
            video.pause();
        });
        // 動画の頭出し（任意の秒へ移動）
        $('#atama').click(function() {
            video.currentTime = 0; // 入れた秒の位置へ移動（例は0秒）
        });
        // 音声ミュート（トグル式）
        $('#mute').click(function() {
            if (video.muted) {
                video.muted = false;
                $('#mute .fa-volume-off').addClass('hidden');
                $('#mute .fa-volume-up').removeClass('hidden');
            } else {
                video.muted = true;
                $('#mute .fa-volume-off').removeClass('hidden');
                $('#mute .fa-volume-up').addClass('hidden');
            }
        });
        //音量アップ
        $('#vol-up').click(function() {
            if (video.volume &lt;= 0.75) {
                video.volume = video.volume + 0.25;
                $("#vol").text(video.volume);
            }
        });
        //音量ダウン
        $('#vol-down').click(function() {
            video.volume = video.volume - 0.25;
            $("#vol").text(video.volume);
        });
        //音量表示
        $("#vol").text(video.volume);
    });

CSS HTML 2022.2.10

リンク下線ホバースライド

<div class="link">
  <a href="#">
    <div class="text">LINK</div>
    <div class="line"></div>
  </a>
</div>

.link a {
  color: rgba(77,77,77,1);
  display: block;
  font-size: 14px;
  letter-spacing: .15em;
  overflow: hidden;
  padding: 0 0 8px;
  position: relative;
  width: fit-content;
}

.link a .line {
  background-color: rgba(77,77,77,.2);
  bottom: 0;
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

.link a .line:before {
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1);
  -o-transition: transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1);
  transition: transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1);
  transition: transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1), -webkit-transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1);
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(77,77,77,1);
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.link a:hover .line:before {
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
}

CSS HTML 2021.4.23

バラバラサイズの画像をきれいに正方形で一覧表示する

<div class="group">
  <div class"image"><img src="画像ファイル"></div>
  <div class"image"><img src="画像ファイル"></div>
  <div class"image"><img src="画像ファイル"></div>
</div>

.group {
    display: flex;
}

.group .image {
    position: relative;
}

.group .image::before {
    content: '';
    display: block;
    padding-top: 100%;
}
.group .image img {
    border: 1px solid rgba(0,0,0,1);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.group .image img {
    background: rgba(255,255,255,1);
    object-fit: contain;
}

HTML jQuery WordPress 2020.4.24

画面幅によって読み込みファイルを変える〜レスポンシブウェブデザイン

<script>
  jQuery(document).ready(function($) {
    //PC環境の場合
    if (window.matchMedia('(min-width: 768px)').matches) { //切り替える画面サイズ
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/pc.js',
        dataType: 'script',
        cache: false
      });
      //スマホ環境の場合
    } else {
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/sp.js',
        dataType: 'script',
        cache: false
      });
    };
  });
</script>

Category

Recent posts

Category