サポート » 使い方全般 » cssでtransformが動かない

  • hakuk

    (@hakuk)


    wordpressでトップページをカスタマイズしようとしています。
    画像が画面外から出てくるようなサイトを作りたく、URLのページを参考にさせていただきました。
    実際に同じものをコピーしてやってみたのですが動かず色々試してみたのですがtransformやopacityがjsと組み合わせるとなぜか動きません。

    最初はjsが機能していないのかと思い”effect-fade”から”effect-fade.effect-scroll”にclassが変わったときに可視化するため”background : #333″を追加してみました。実際の動作は色が画面半分で変わり機能していることがわかりました。

    次にCSSが機能していない又は不具合があるのかと思い”tra-sample”を作り、”tra-sample:hover”使ってtransformやopacityが機能しているか確かめてみましたがちゃんと機能してマウスポイントを合わせたら動きました。

    どうしたらjsでclassを書き換えたときにちゃんと動作するのかわかりません。

    HTML初心者ですがご教授お願いします。

    下記コード
    HTML————————————–
    <section>
    <h2 class=”effect-fade”>コンテンツのタイトル</h2>
    <div>

      <li class=”tra-sample”>コンテンツその1
      <li class=”effect-fade”>コンテンツその2
      <li class=”effect-fade”>コンテンツその3

    </div>
    </section>

    css—————————
    .effect-fade {
     opacity : 0;
     transform : translate(0px, 50px);
     transition : all 10ms ;
    }

    .effect-fade.effect-scroll {
    opacity : 1;
     transform : translate(0, 0);
    background : #333
    }

    .tra-sample{
     opacity : 0;
    width:50%;
    height:50px;
    background-color: aqua;
    transition:all 3s ease-out;
    }

    .tra-sample:hover{
     opacity : 1;
    transform: rotate(20deg);
    background-color: orange;
    }

    js—————————–
    jQuery(function(){
     jQuery(window).scroll(function (){
    jQuery(‘.effect-fade’).each(function(){
    var elemPos = jQuery(this).offset().top;
    var scroll = jQuery(window).scrollTop();
    var windowHeight = jQuery(window).height();
    if (scroll > elemPos – windowHeight+350){
    jQuery(this).addClass(‘effect-scroll’);
    }
    });
     });
    });

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • Aoba Momouchi

    (@aoixtreme)

    そのままHTMLにしてみたのですが、動くようです。

    <!DOCTYPE html>
    <html>
      <body>
    <section>
    <h2 class="effect-fade">コンテンツのタイトル</h2>
    <div>
    
        <li class="tra-sample">コンテンツその1
        <li class="effect-fade">コンテンツその2
        <li class="effect-fade">コンテンツその3 
    
    </div>
    </section>
    </body>
    </html>
    
    <style type="text/css">
    <!--
    body{
    	background-color:pink;
    }
    .effect-fade {
    	opacity : 0;
    	transform : translate(0px, 50px);
    	transition : all 10ms ;
    }
    .effect-fade.effect-scroll{
    	opacity : 1;
    	transform : translate(0, 0);
    	background : #333;
    }
    .tra-sample{
    	opacity : 0;
    	width:50%;
    	height:50px;
    	background-color: aqua;
    	transition:all 3s ease-out;
    }
    
    .tra-sample:hover{
    	opacity : 1;
    	transform: rotate(20deg);
    	background-color: orange;
    }
    --> 
    </style>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <script>
    <!--
    jQuery(function(){
    	jQuery(window).scroll(function (){
    		jQuery(‘.effect-fade’).each(function(){
    		var elemPos = jQuery(this).offset().top;
    		var scroll = jQuery(window).scrollTop();
    		var windowHeight = jQuery(window).height();
    
    		if (scroll > elemPos – windowHeight+350){
    			jQuery(this).addClass(‘effect-scroll’);
    		}
    	});
     });
    });
    -->
    </script>
    munyagu

    (@munyagu)

    こんにちは

    これは WordPress とは直接関係がない、JavaScript と CSS に関する質問のようです。
    この WordPress フォーラムでは回答がつきにくいと思いますので、他のそういったことを質問できるフォーラムなどで質問されたほうが良いと思います。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「cssでtransformが動かない」には新たに返信することはできません。