月: 2023年5月

WordPress 2023.5.23

timthumb

functions.php

/* ===============================================
# timthumb
=============================================== */
define('THEME_DIR', get_template_directory_uri());
/* Timthumb CropCropimg */
function thumbCrop($img='', $w=false, $h=false , $zc=1, $a=false, $cc=false ){
    if($h)
        $h = "&h=$h";
    else
        $h = "";
    if($w)
        $w = "&w=$w";
    else
        $w = "";
	if($a)
        $a = "&a=$a";
    else
        $a = "";
	if($cc)
        $cc = "&cc=$cc";
    else
        $cc = "";
    $img = str_replace(get_bloginfo('url'), '', $img);
     $image_url = str_replace("http://","http://",THEME_DIR) . "/timthumb/timthumb.php?src=" . $img . $h . $w. "&zc=".$zc .$a .$cc;
    return $image_url;
}

HTML

<?php
							$image = get_field('image');
							$size = 'large'; // (thumbnail, medium, large, full or custom size)
							if ($image) {
								$image_url1 = wp_get_attachment_image_url($image, $size);
								$image_url2 =  get_template_directory_uri() . "/timthumb/timthumb.php?src=" . $image_url1 . '&amp;h=564' . '&amp;w=752';
							?>
								<img src="<?php echo $image_url2; ?>">
							<?php
							} else {
							?>
								<img src="https://placehold.jp/eeeeee/ffffff/752x564.png?text=No%20photo" alt="">
							<?php
							}
							?>

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");
  });
});

Category

Recent posts

Category