表と裏がある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>
●●●cssのコード
/* 画像にアニメーションを設定 表と裏の画像の回転 */
.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;
}
No.1ベストアンサー
- 回答日時:
こんにちは
なんだかいろいろありそうな気がしますけれど、とりあえずご質問の内容に関して・・
>このコードに 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)'});
}
とすることで、アニメーションするようになります。
別のタイミングにしたければ、そのタイミングで設定するようにすれば良いでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP 日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいので 3 2021/12/10 09:20
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS HP作成 作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの 2 2022/02/02 12:22
- JavaScript javascript ループがうごかない 2 2021/10/25 16:19
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンの位置がwin/macでず...
-
画像をドラッグ&ドロップで移...
-
textareaに画像を表示したい
-
javascriptで毎月替わる画像
-
画像ランダム表示、しかしダブ...
-
Javascriptでリンク画像を1時...
-
画像クリックで別の場所の画像...
-
HTMLで条件分岐はできますか?
-
画像のランダム表示、及び画像...
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
Javascript で共通の処理をどこ...
-
innerHTMLで、表示すると、一部...
-
画像の重なりの順序を代える方...
-
透過pngの透明部分以外をクリッ...
-
マウスオーバーと背景画像の固定
-
クリッカブルマップの一部分だ...
-
画像削除機能を付けたい
-
1枚の画像をクリックして複数の...
-
複数の画像を先に読み込ませ表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報
回答ありがとうございます。スクロールして画像が画面内に見えたら、回転を一回だけ起動するには、どうコードを書いたら良いでしょうか?
<spript>タグ内に書いてあるのは文字のフェードイン用のコードです。これはこのままでokなのですが、
それとは別に、提示した<spript>タグ内のような感じで、class=flipのcssアニメーション回転コードをスクロールして画面内に入ったら一回だけ起動させたいです。
どうコードを書いたら良いでしょうか?