cssでtransformが動かない
-
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’);
}
});
});
});ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「cssでtransformが動かない」には新たに返信することはできません。