【Houdini21.0】3Dビル群っぽいブログヘッダー画像を作成する

import { css, keyframes } from '@emotion/react';

const squarePop = (deg: number) => keyframes`
  0% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4) rotate(${deg}deg);
    opacity: 0;
  }
`;

const styleStar = (
  x: string,
  y: string,
  size: number,
  dur: number,
  delay: number,
  rotateDeg: number,
) => css`
  position: absolute;
  left: ${x};
  top: ${y};
  width: ${size}px;
  height: ${size}px;

  box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.75);
  opacity: 0;

  transform-origin: center;

  animation: ${squarePop(rotateDeg)} ${dur}s ease-in-out infinite;
  animation-delay: ${delay}s;
`;

const styleStarsLayer = css`
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
`;

/**
 * タイトル背景アニメーション
 * 星空のような効果を付ける
 * @returns
 */
const BackAnimation = () => {
  return (
    <div css={styleStarsLayer}>
      <span css={styleStar('8%', '18%', 10, 1.6, -0.2, 22)} />
      <span css={styleStar('16%', '62%', 9, 2.1, -1.1, 18)} />
      <span css={styleStar('24%', '28%', 11, 1.8, -0.6, 28)} />
      <span css={styleStar('32%', '78%', 9, 2.4, -1.9, 24)} />
      <span css={styleStar('41%', '12%', 10, 1.7, -0.9, -16)} />
      <span css={styleStar('49%', '54%', 9, 2.2, -1.4, -30)} />
      <span css={styleStar('58%', '34%', 11, 1.9, -0.3, -24)} />
      <span css={styleStar('66%', '72%', 9, 2.6, -2.2, -16)} />
      <span css={styleStar('74%', '22%', 10, 1.5, -0.7, 30)} />
      <span css={styleStar('82%', '48%', 9, 2.0, -1.6, 22)} />
      <span css={styleStar('90%', '16%', 12, 2.8, -2.4, -18)} />
      <span css={styleStar('94%', '66%', 10, 1.8, -1.0, -28)} />
    </div>
  );
};
export default BackAnimation;

import { Theme, css } from '@emotion/react';
import Image from 'next/image';
import BackAnimation from './BackAnimation';
import ResizeImage from 'components/common/ResizeImage';
import { md } from 'style/media';

const styleTitleAreaRoot = (theme: Theme) => css`
  height: 280px;
  background-color: ${theme.colors.primaryDarkGray};
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0px 12px 12px ${theme.colors.primaryDarkGray};

  ${md(css`
    height: 160px;
    margin-bottom: 14px;
  `)}
`;

/** 背景画像 */
const styleBackWrapper = css`
  position: absolute;
  height: 100%;
  max-width: 100%;
  inset: 0;
`;

const styleBackImage = css`
  position: relative;
  display: block;
  object-fit: cover;
  height: 100%;
  width: 100%;

  &::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 80px 80px gray;
  }

  /** フェードイン */
  opacity: 0;
  transition: opacity 0.5s ease;
  &[data-load='done'] {
    opacity: 1;
  }
`;

/** タイトルロゴ */
const styleLogoWrapper = (theme: Theme) => css`
  margin: auto;
  width: 390px;
  z-index: ${theme.zindex.titleLogo};

  ${md(css`
    width: 180px;
  `)}
`;

const styleLogoImageWrapper = css`
  height: 'auto';
  width: '100%';
`;

const styleLogoImage = css`
  filter: drop-shadow(6px 6px 0px #333);
  object-fit: contain;
  position: relative;
  max-width: 100%;
  height: auto;
  width: '100%';

  /** フェードイン */
  opacity: 0;
  transition: opacity 0.5s ease;
  &[data-load='done'] {
    opacity: 1;
  }
`;

/**
 * タイトルエリア
 * @returns
 */
const TitleArea = () => {
  // 画像ロード後の検知用
  const onLoad = (e: any) => {
    e.currentTarget.dataset.load = 'done';
  };

  return (
    <div css={styleTitleAreaRoot}>
      <BackAnimation />
      <div css={styleBackWrapper}>
        <Image
          css={styleBackImage}
          src="/img/common/title_back_image.png"
          alt=""
          width={1920}
          height={320}
          onLoad={onLoad}
        />
      </div>
      <div css={styleLogoWrapper}>
        <div css={styleLogoImageWrapper}>
          <ResizeImage
            src="/img/common/title_logo.png"
            alt=""
            originalWidth={860}
            originalHeight={420}
            resizeHeight={180}
            addCss={styleLogoImage}
            priority={true}
          />
        </div>
      </div>
    </div>
  );
};
export default TitleArea;