トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(1)<FirstTitle>:JavaFXデモ/Sceneの遷移 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/うるう年 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:











<Number>: [00000216]  <Date>: 2022/03/15 18:05:52
<Title>: CSSデモ/Accordion002
<Name>: amanojaku@管理人



3枚の画像が連鎖的に上に上がります。
正常に表示されない場合も有るので、その場合はリロードして下さい。

実際のページ
http://xd305417.html.xdomain.jp/demo/Accordion002


<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <link rel="preload" href="huji001-0.jpg" as="image">
  <link rel="preload" href="huji001-1.jpg" as="image">
  <link rel="preload" href="huji001-2.jpg" as="image">
  <TITLE></TITLE>
  <style>
    body {
      background-image: url(huji001-0.jpg), url(huji001-1.jpg), url(huji001-2.jpg);
      background-position: left 0 top 100vh, left 50% top 100vh, left 100% top 100vh;
      /* ↑background-position: オフセット値 パーセンテージの場合 */
      /* (コンテナーの幅 - 画像の幅) * (position x%) */
      /* (コンテナーの高さ - 画像の高さ) * (position y%) */
      background-size: 33.4% auto, 33.4% auto, 33.4% auto;
      /* ↑誤差が有るようなので「0.1%」ぐらい増やした方が良い感じ。 */
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-attachment: fixed;
      animation-name: BackgroundAccordion_Animation;
      animation-duration: 1.5s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    @keyframes BackgroundAccordion_Animation {
      0% {
        background-position: left 0 top 100vh, left 50% top 100vh, left 100% top 100vh;
      }

      30% {
        background-position: left 0 top 100vh, left 50% top 100vh, left 100% top 100vh;
      }

      44% {
        background-position: left 0 top calc(100vh / 3 * 2 + 50% / 3), left 50% top 100vh, left 100% top 100vh;
      }

      58% {
        background-position: left 0 top calc(100vh / 3 + 50% / 3 * 2), left 50% top calc(100vh / 3 * 2 + 50% / 3), left 100% top 100vh;
      }

      72% {
        background-position: left 0 top 50%, left 50% top calc(100vh / 3 + 50% / 3 * 2), left 100% calc(100vh / 3 * 2 + 50% / 3);
      }

      86% {
        background-position: left 0 top 50%, left 50% top 50%, left 100% top calc(100vh / 3 + 50% / 3 * 2);
      }

      100% {
        background-position: left 0 top 50%, left 50% top 50%, left 100% top 50%;
      }
    }

  </style>
</head>
<body>
</body>
</html>


<Number>: [00000225]  <Date>: 2022/03/31 03:42:38
<Title>: CSS+JavaScript」デモ/Accordion003
<Name>: amanojaku@管理人



3枚の画像が連鎖的に上に上がります。
安定的に表示させるためにJavaScriptで「Webページ、画像」などがロード完了後に、CSSアニメーションをスタートさせていますが、それでもブラウザがBusyだとCSSアニメーションなどは安定的に表示されない場合も有るので、その場合はリロードしてみて下さい。

実際のページ
http://xd305417.html.xdomain.jp/demo/Accordion003


<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <link rel="preload" href="huji001-0.jpg" as="image">
  <link rel="preload" href="huji001-1.jpg" as="image">
  <link rel="preload" href="huji001-2.jpg" as="image">
  <script>
    window.onload = function () {
      PreloadMan();
    }
    function PreloadMan() {
      gnResourceDefective--;
      console.log(`gnResourceDefective: ${gnResourceDefective}`);
      if (!gnResourceDefective) {
        OnAllLady();
      }
    }
    wPreload = document.querySelectorAll('link[rel="preload"]');
    gnResourceDefective = wPreload.length + 1;
    for (let w of wPreload) {
      w.onload = PreloadMan;
    }
    function OnAllLady(){
      let wBody = document.getElementsByTagName("body")[0];
      wBody.className = "Background_Animation";
    }
  </script>
  <TITLE></TITLE>
  <style>
    .Background_Animation {
      background-image: url(huji001-0.jpg), url(huji001-1.jpg), url(huji001-2.jpg);
      background-position: left 0 top 100vh, left 50% top 100vh, left 100% top 100vh;
      /* ↑background-position: オフセット値 パーセンテージの場合 */
      /* (コンテナーの幅 - 画像の幅) * (position x%) */
      /* (コンテナーの高さ - 画像の高さ) * (position y%) */
      background-size: 33.4% auto, 33.4% auto, 33.4% auto;
      /* ↑誤差が有るようなので「0.1%」ぐらい増やした方が良い感じ。 */
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-attachment: fixed;
      animation-name: BackgroundAccordion_Animation;
      animation-duration: 1.5s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    @keyframes BackgroundAccordion_Animation {
      0% {
        background-position: left 0 top 100vh, left 50% top 100vh, left 100% top 100vh;
      }

      30% {
        background-position: left 0 top 100vh, left 50% top 100vh, left 100% top 100vh;
      }

      44% {
        background-position: left 0 top calc(100vh / 3 * 2 + 50% / 3), left 50% top 100vh, left 100% top 100vh;
      }

      58% {
        background-position: left 0 top calc(100vh / 3 + 50% / 3 * 2), left 50% top calc(100vh / 3 * 2 + 50% / 3), left 100% top 100vh;
      }

      72% {
        background-position: left 0 top 50%, left 50% top calc(100vh / 3 + 50% / 3 * 2), left 100% calc(100vh / 3 * 2 + 50% / 3);
      }

      86% {
        background-position: left 0 top 50%, left 50% top 50%, left 100% top calc(100vh / 3 + 50% / 3 * 2);
      }

      100% {
        background-position: left 0 top 50%, left 50% top 50%, left 100% top 50%;
      }
    }

  </style>
</head>
<body>
</body>
</html>

Block( Address 0000030C Identity 00000214 )










ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.