kdcsライブラリー

cssのtransitionでopacityを変化させるとAndroidのChiromeでちらつきが発生する対応策

will-changeを使用
「will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。」

will-change: opacity;
will-change: transform;

※will-changeを多用するとページのパフォーマンス低下につながります。

色の変化だけならopacityを使用せず、background-colorをrgbaで指定する方がよい

その他の対処法

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

トップページのメインビジュアルにスクロールを促すアニメーションを入れる
html

<div class="scrolldown"><span>Scroll</span></div>

css

.scrolldown{
  position:absolute;
  left:50%;
  bottom:60px;
  height:50px;
}
.scrolldown span{
  position: absolute;
  left:-15px;
  top: -15px;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

jQueryを使わないタイプ
※1行目が「.scroll(function ()」だとページをリロードしたときに要素が表示されないので「.on(‘load scroll’, function ()」とすることでスクロールとリロード両方で動作するようになる。
※適用したい要素のclassに「fadeUp」を記述。スクロールでclassに「on」が付加される。

$(window).on('load scroll', function (){
	$('.fadeiUp').each(function(){
		var elemPos = $(this).offset().top,
		scroll = $(window).scrollTop(),
		windowHeight = $(window).height();

			if (scroll > elemPos - windowHeight + 150){
				$(this).addClass('on');
			}
	});
});

css
※通常は.fadeUpと.fadeUp.onの2つ。要素3つを順番にフェードアップさせる場合(2)(3)を追加する。

.fadeUp {
  transition: 0.8s ease-out;
  transform: translateY(80px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}
.fadeUp.on:nth-of-type(2) {
    transition-delay:200ms;
    -webkit-transition-delay:200ms;
}
.fadeUp.on:nth-of-type(3) {
    transition-delay:400ms;
    -webkit-transition-delay:400ms;
}

以下の記述で簡単に行える

動作させたい要素にクラスを付加する

<div class="fadeUp">
<!-- フワっとフェードインさせたい要素 -->
</div>

javascript

$(window).scroll(function () {
  var scrollAnimationElm = document.querySelectorAll('.fadeUp');
  var scrollAnimationFunc = function () {
    for (var i = 0; i < scrollAnimationElm.length; i++) {
      var triggerMargin = 100;
      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
        scrollAnimationElm[i].classList.add('on');
      }
    }
  }
  window.addEventListener('load', scrollAnimationFunc);
  window.addEventListener('scroll', scrollAnimationFunc);
});

css

/*----------------------------
fadeUp ｜下から上へ出現
----------------------------*/
.fadeUp {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
fadeLeft ｜左から出現
----------------------------*/
.fadeLeft {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeLeft.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
fadeRight ｜右から出現
----------------------------*/
.fadeRight {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeRight.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

トップページで見せるメインビジュアルスライダーの画像や動画の上にメッシュを重ねる方法

html

<div class="slider">
<img src="./images/slide-image.jpg">
</div><!--/.slider-->

css

.slider {
    position: relative;
}
.slick::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 3px);
}