おしゃれなデザイン

コーディングスキル一覧

clip-path

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/css/clip-path/

パターン1: 上部斜め線

パターン2: 下部斜め線

パターン3: 上下部斜め線

パターン4: 三角形

パターン5: なみなみのコード

コードはこちら

SVGアニメーション

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/javascript/gsap-svg/

パターン1

パターン2

パターン3

skewを使ったオーバーレイアニメーション

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/javascript/gsap-scroll-anima/

タイトル

テキストテキストテキストテキスト

コードをテキストエディタにコピーしましょう

HTML

<div class="content-skew">

	<div class="content-skew__inner">

		<div class="content-skew__txt">

			<div class="content-skew__txt-inner">

				<h2>タイトル</h1>

					<p>テキストテキストテキストテキスト</p>

			</div>

		</div>

		<img src="https://picsum.photos/1000?random=3" alt="">

	</div>

</div>

CSS(SCSS)

.content-skew {
    width: 400px;
    height: 400px;
    line-height: 1.7;
    overflow: hidden;

    &:hover {
      .content-skew {
        &__inner {
          &::before {
            transform: translateX(100%) skew(45deg);
          }

          &::after {
            transform: translateX(-100%) skew(-135deg);
          }
        }

        &__txt {
          opacity: 0;
        }
      }
    }

    h2 {
      font-size: 2rem;
      font-weight: 700;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &__inner {
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        background: #000;
        transition: 0.5s ease-out;
      }

      &::before {
        right: 0;
        bottom: 0;
        background: #ccd3ca;
        transform: skew(45deg);
      }

      &::after {
        right: 0;
        top: 0;
        background: #b5c0d0;
        transform: skew(-135deg);
      }
    }

    &__txt {
      opacity: 1;
      transition: 0.5s ease-out;
      color: #333;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;

      &-inner {
        padding-top: 50px;
        width: 90%;
        margin: 0 auto;
      }
    }
  }

【動画】テキストのくり抜き

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/css/mix-blend-mode/

Port folio

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <video src="/192687.mp4" autoplay loop muted></video>
    <h1>Port folio</h1>
  </div><!-- /.container -->
</body>

</html>

CSS(SCSS)

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container h1 {
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16vw;
  font-family: "Impact";
  mix-blend-mode: screen;
}

回転するテキスト

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/css/text-rotate/

SCROLL DOWN SCROLL DOWN SCROLL DOWN

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="dist/css/style.min.css">
</head>

<body>
  <div class="circle relative">
    <a class="circle__cont absolute" href="">
      <div class="circle__txt textWrap">SCROLL DOWN SCROLL DOWN SCROLL DOWN</div>
    </a>
  </div><!-- /.circle -->
  <script src="/js/main.js"></script>
</body>

</html>

CSS(SCSS)

.circle {
  position: relative;
  height: 200px;

  &__cont {
    position: absolute;
    top: 0;
    left: 100px;

    &::before {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      content: "";
      background-image: url(/arorow-down.png);
      background-size: contain;
      width: 20px;
      height: 30px;
    }
  }

  &__txt {
    position: relative;
    width: fit-content;
    height: 200px;
    font-size: 16px;
    text-align: center;
    margin: 0;

    span {
      color: #707070;
      position: absolute;
      top: 0;
      left: calc(50% - 15px);
      display: inline-block;
      width: 30px;
      height: 100px;
      transform-origin: center bottom;
      animation: slideText 36s linear infinite;
    }
  }
}

@keyframes slideText {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@for $i from 1 through 36 {
  .circle__txt span:nth-child(#{$i}) {
    transform: rotate(10deg * ($i - 1));
    animation-delay: -1s * ($i - 1);
  }
}

Javascript

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const element = document.querySelector(selector); // 指定された要素を取得
    if (element) {
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    }
  }
}

// Designクラスの定義
class Design {
  // コンストラクタ
  constructor() {
    this._init();
  }

  // 初期化メソッド
  _init() {
    // TextWrapperのインスタンスを生成
    const textWrapper = new TextWrapper();
    // .textWrapクラスを持つ要素内のテキストを<span>で囲む
    textWrapper.wrapAllTextWithSpans(".textWrap");
  }
}

// Designクラスのインスタンスを生成して初期化
new Design();

Vanilla-tilt.js

詳細につきましては以下のサイトを参照くださいませ。

https://youtu.be/KLQA8TCC1iU

01

Glass Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro delectus sint similique quisquam harum culpa.

More Detail

ホバー時に画像が光る

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/javascript/hover-shiny/

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div class="content">
    <div class="content__inner wrap">
      <div class="content__box flex-column">
        <figure class="content__img"><img decoding="async" src="https://picsum.photos/1000/500?random=1" alt="サンプル画像">
        </figure>
        <figure class="content__img"><img decoding="async" src="https://picsum.photos/1000/500?random=2" alt="サンプル画像">
        </figure>
        <figure class="content__img"><img decoding="async" src="https://picsum.photos/1000/500?random=3" alt="サンプル画像">
        </figure>
      </div>
    </div><!-- /.content__inner -->
  </div><!-- /.content -->
  <script src="/script.js"></script>
</body>

</html>

CSS

@charset "UTF-8";
.flex-column {
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 95%;
  margin: 0 auto;
}

.content__inner {
  padding: 50px 0;
  max-width: 1000px;
}
@media screen and (min-width: 1024px) {
  .content__inner {
    padding: 100px 0;
  }
}
.content__box {
  row-gap: 30px;
}
@media screen and (min-width: 768px) {
  .content__box {
    flex-direction: row;
    justify-content: space-between;
  }
}
.content__img {
  cursor: pointer;
  aspect-ratio: 1/0.8;
}
@media screen and (min-width: 768px) {
  .content__img {
    width: 31%;
  }
}
.content__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.shiny {
  position: relative;
  overflow: hidden;
}
.shiny::after {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgb(255, 255, 255) 100%, rgba(255, 255, 255, 0) 0%);
  /* アニメーション */
  animation-name: shiny;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  30% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}

Javascript

// 要素が光る
document.addEventListener("DOMContentLoaded", function () {
  // '.coding__img'クラスを持つすべての要素を取得
  var codingImgs = document.querySelectorAll(".content__img");

  // 各要素にイベントリスナーを設定
  codingImgs.forEach(function (img) {
    img.addEventListener("mouseover", function () {
      // マウスが乗った要素にのみ'shiny'クラスを追加
      this.classList.add("shiny");
    });

    img.addEventListener("mouseout", function () {
      // マウスが離れたら'shiny'クラスを削除
      this.classList.remove("shiny");
    });
  });
});

- おしゃれなデザイン -

コーディングスキル一覧

clip-path

パターン1: 上部斜め線

パターン2: 下部斜め線

パターン3: 上下部斜め線

パターン4: 三角形

パターン5: なみなみのコード

SVGアニメーション

パターン1

パターン2

パターン3

skewを使ったオーバーレイアニメーション

タイトル

コードをテキストエディタにコピーしましょう

HTML

もう少しです。

CSS(SCSS)

完成です。お疲れ様でした。

タイトル

【動画】テキストのくり抜き

Port folio

コードをテキストエディタにコピーしましょう

HTML

もう少しです。

CSS(SCSS)

完成です。ありがとうございます。

Port folio

回転するテキスト

コードをテキストエディタにコピーしましょう

HTML

もう少しです。

CSS(SCSS)

もう少しです。

Javascript

完成です。お疲れ様でした。

Vanilla-tilt.js

01

Glass Card

ホバー時に画像が光る

コードをテキストエディタにコピーしましょう

HTML

もう少しです。

CSS

もう少しです。

Javascript

完成です。お疲れ様です。

完成です。

お疲れ様でした。

完成です。

ありがとうございます。

完成です。

お疲れ様でした。

完成です。

お疲れ様です。