JavaScriptをクリックするとアニメーションが切り替わります

Question

私はJavascriptを初めて使用しており、以下を達成するための最善の方法を見つけようとしています。

私は、このページはHTMLとCSSからなる、設定している：

https://jsfiddle.net/59ykx03y/3/

イメージコンテナをユーザーがクリックすると、両方のH2タグがにアニメーション化する必要があるとき私は何をする必要があることです画像の中央に中央/中央にあるので、Lorem Ipsumを1行で読み込みます。私はまた、青の代わりに白にテキストの色を変更する必要があります。ユーザーが再びクリックすると、テキストの色が元の青色に戻り、最初の位置に戻ります。だから私はこれをトグルする必要があると思う。

レイアウトが異なるため、このコードが920px未満のビューポートで実行されないようにする方法を見つけ出す必要があります。理想的には、ユーザーはこれらの小さな画面デバイス上の画像をタップし、Lorem & Ipsumを画像の上にそれぞれの別々の行に表示するようにアニメートすることが望ましいでしょう。

私は当初、「クリック」イベントリスナー、およびテストする /他のif文を実行しているを追加しようとしました。

imgContainer.addEventListener('click', function() { 
    if(lorem.style.color === "blue") { 
    lorem.style.color = '#ffffff'; 
    } 
    else { 
    lorem.style.color = 'blue'; 
    } 
}); 

しかし、自分自身を繰り返すことなくこれにアプローチする方がずっと簡単だと感じています。

jQueryではなくvanilla JSを使用する必要があります。

私はあなたのソリューションを楽しみにしています！

Answer 1

Q： "青の代わりにテキストの色を白に変更する必要があります。ユーザーが再びクリックすると、テキストの色が元の青に戻り、元の位置に戻ります最初。"

A：「私は、把握する必要があり ：

//あなたのCSSに

.hdr-color-white{ 
    color: white; 
} 

//このクラスを追加

imgContainer.addEventListener('click', function() { 
    lorem.classList.toggle("hdr-color-white"); 
    ipsum.classList.toggle("hdr-color-white"); 
}); 

Qあなたの現在のイベントハンドラに追加理想的には、ユーザーがこれらのより小さい画面デバイス上の画像をタップし、テキストwを使用したいと思っています。このコードは、レイアウトが異なるために920px未満のビューポートで実行されるのを防ぎます。 ouldはLorem & Ipsumをイメージの上にある別の行に表示するようにアニメートします。「

A： ます。また、ウィンドウオブジェクトのメソッドを介してwindow.screen.width幅をテストすることができます

を再配置するには以下920px

@media screen and (max-width: 920px) { 
    hdr-color-white{ 
    /*empty*/ 
    } 
} 

よりもビューポートで実行してからコードを防止するために。 LoremとIpsumのテキストは、position、top、left、およびtransformの各プロパティを使用して、CSSを使用して目的の位置に浮動させます。 https://css-tricks.com/absolute-positioning-inside-relative-positioning/

目的の場所で、 を使用してスライドを有効にすることができます。translateX（value）; //クラスに追加するとトグルできる

Answer 2

方法について：

imgContainer.addEventListener('click', function() { 
    lorem.style.marginLeft = "5%" 
    lorem.style.marginTop = "5%" 
    lorem.style.color = lorem.style.color ? 'white' : 'blue'; 
}); 

あなたが最後の行の?は三項演算子と呼ばれていること、それに慣れていない場合。それはミニif/elseのようなものです：a ? b : cは "b if a、else c"を意味します。