dポイントプレゼントキャンペーン実施中！

表と裏がある1枚の画像を回転する、アニメーションのコードを書いているのですが、class=" fli

解決済

  • 質問者：hayosato
  • 質問日時：
  • 回答数：1件

表と裏がある1枚の画像を回転する、アニメーションのコードを書いているのですが、class=" flip "の部分です。スマホやPCでスクロールして、回転する画像の位置に来たら、画像が回転を始めるようにしたいです。

このソースコードには他にスクロールが文字の位置に来たら丁度右からフェードインするコードjapascriptを書いているのですが、このコードに flipを入れて、スクロールが画像の位置にきたら、同じように動きが
発動するようにできますでしょうか？

それとも無理でしょうか？
どうコードを書いたらよいでしょうか？

<!DOCTYPE html>

<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-3.6.0.min.js"></script>

<style>
</style>

</head>
<body>

<!--アニメーション　表と裏の画像の回転-->
<div class="flip">
<img src="5mouth.png" alt="" id="sumaho3" class="front"><!--表の画像-->
<img src="5mouth.png" alt="" id="sumaho6" class="back"><!--裏の画像-->
</div>

<!--この位置でスクロールされたら右にフェードインする-->
<div class="slide-right show"><p>あいうえお
</p>
</div>

<script>
//フェードイン用のコードです
$(function(){
$(window).on('load scroll', function() {
$(".show").each(function() {
var winScroll = $(window).scrollTop();
var winHeight = $(window).height();
var scrollPos = winScroll + (winHeight * 0.9);
if($(this).offset().top < scrollPos) {
$(this).css({opacity: 1, transform: 'translate(0, 0)'});
}
});
});
});
//フェードイン用のコードはここまでです
</script>

</body>
</html>

●●●ｃｓｓのコード



/* 画像にアニメーションを設定　表と裏の画像の回転 */
.flip {
width: 1em;
height: 1em;
margin-bottom: 1em;
animation: flip 2s linear ;/* アニメーション回転...Sの秒数で終了する */
transform-style: preserve-3d;
font-size: 5em;
}

@keyframes flip {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

.front, .back {
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.back {
transform: rotateY(180deg);
}

/* フェードイン用のCSS */
/* 右からフェードイン */
.slide-right {
opacity: 0;
transform: translate(20px, 0);
transition: all 1s ease-out;
}

質問者からの補足コメント

  • 回答ありがとうございます。スクロールして画像が画面内に見えたら、回転を一回だけ起動するには、どうコードを書いたら良いでしょうか？

    <spript>タグ内に書いてあるのは文字のフェードイン用のコードです。これはこのままでokなのですが、

    それとは別に、提示した<spript>タグ内のような感じで、class＝flipのcssアニメーション回転コードをスクロールして画面内に入ったら一回だけ起動させたいです。

    どうコードを書いたら良いでしょうか？

    No.1の回答に寄せられた補足コメントです。 補足日時：2022/02/22 22:08
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



なんだかいろいろありそうな気がしますけれど、とりあえずご質問の内容に関して・・

＞このコードに flipを入れて、スクロールが画像の位置にきたら、同じように動きが
＞発動するようにできますでしょうか？
元のスクリプトのトリガー判定に「winHeight * 0.9」などとあるので、どういうタイミングにしたいのかがよくわかりませんけれど、

CSSでアニメーションをしているのは、
　animation: flip 2s linear ;
なので、この部分を削除しておいて、好きなタイミングでCSSを追加設定すれば、そのタイミングでアニメーションするようになります。

例えば、文字の表示と同じタイミングで良いのならば、
if($(this).offset().top < scrollPos) {
$('.flip').css('animation', 'flip 2s linear' ); //← **** 1行追加 ****
$(this).css({opacity: 1, transform: 'translate(0, 0)'});
}
とすることで、アニメーションするようになります。

別のタイミングにしたければ、そのタイミングで設定するようにすれば良いでしょう。
この回答への補足あり
    • good
    • 1
    • 件
通報する
この回答へのお礼

回答ありがとうございます

通報する
お礼日時：2022/02/22 23:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報