Oruna.jp

Oruna World へ

おるな日誌

Cover Image

お酒

 2024/11/05

頂き物ですが

Cover Image

美濃加茂市政施行70周年記念式典

 2024/11/03

市議会議員OBという事で、式典参加のご案内を頂きました。
もちろん参加させて頂きました。

式典で頂いた記念誌…副議長の時ですね。

Slider の実装とパーツ化

Design 2024/11/03

トップぺーにスライダー(フェードイン・アウト)を付けたいと思い試行錯誤。
CSSのみと画像の指定はHTMLに配置するようにしたいと思う。
そして、HTMLとCSSをパーツ化して実装することにしました。

参考HP  https://pa-tu.work/t/7503

HTML

    <div class="slider">

      <div class="slider-wrap">

        <div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'1.jpg'; ?>"></div>

        <div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'2.jpg'; ?>"></div>

        <div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'3.jpg'; ?>"></div>

      </div>

    </div>

CSS

.slider {

  width: 100%;

  height: 60vh;

}

.slider-wrap {

  position: relative;

  width: 100%;

  height: 60vh;

  overflow: hidden;

  background-color: #fff;

}

.slider-item {

  position: absolute;

  inset: 0;

  opacity: 0;

  z-index: 0;

  animation: sliderAnime 30s linear infinite 0s;

}

.slider-item:nth-child(2) {

  animation-delay: 10s;

}

.slider-item:nth-child(3) {

  animation-delay: 20s;

}

.slider-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

@keyframes sliderAnime {

  0% {

      opacity: 0;

      animation-timing-function: ease-in;

  }

  8% {

      opacity: 1;

      animation-timing-function: ease-out;

  }

  20% {

      opacity: 1;

      transform: scale(1.1);

  }

  40%,

  100% {

      opacity: 0;

      transform: scale(1.2);

  }

}

@media screen and (max-width:800px) {

  .slider {

    height: 40vh;

    }

  

  .slider-wrap {

    height: 40vh;

  }

}

Cover Image

香港に行く事になった…

HongKong 2024/10/17

知人のお願いで、香港へ行く事になった。パスポートも一年前に切れており、再取得することに。
市役所で手続きをしたが、10日かかった。
手数料も10年をお願いし、14,000円、写真も市役所で撮り直し1,000円、15,000円の出費となってしまった。

Cover Image

衆議院選挙

Topics 2024/10/15

衆議院選挙が始まった

Cover Image

夕暮れの小山観音

Topics 2024/10/14

今日もいいお天気でした。