portfolioと記述されたロゴ

portfolioと記述されたロゴ

- おしゃれなデザイン -

コーディングスキル一覧

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;
}
次へ

完成です。

ありがとうございます。

Port folio

回転するテキスト

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

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();
次へ

完成です。

お疲れ様でした。

SCROLL DOWN SCROLL DOWN SCROLL DOWN

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

完成です。

お疲れ様です。

サンプル画像
サンプル画像
サンプル画像

©️ Souichi_Kimura All Rights Reserved.