スライダーと戻るボタンとフェード

久しぶりの投稿になります。
今回はまだまだ現役のFVスライダーとフェード効果、それとある程度下へ画面を下にすると戻るボタンが出る動的な効果を簡単なJQとCSSで実装したました。
この効果はJQで動作するので下記のJQの本体をURLからリンクさせるか、downloadして読み込ませる必要があります。

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

FVスライダーの実装

このスライダーは「slick」というJQを使っています。
「slick スライダー」で検索すれば、使い方を載せたサイトがたくさんあります。
このslickはとてもシンプルで使いやすく、レスポンシブにも対応でき、カスタマイズも簡単に行える優れものです。
特に良いのは軽いところで、PCは横長画像、SPは縦長画像をそれぞれ置いても、殆どサイトが重くならないのが推しです。

追記2022/10/21

ある日slickをWordpressに導入しようとしたら動かなくなった
という記事を見て自分の見てみると、動いていたのが動いていない…
色々と対処方法がありましたが、
テーマによってはフッターにスクリブトを記述するウィジットがあったりで、
そこへスクリプトを記述すれば動作するみたいですが、
独自テンプレートだとfooter.phpに直接記述するのが無難のようです。
投稿ページだけでslickを導入しようとしても無理でした。
独自テンプレートだから普通に考えれば無理だよね。
落ちりやすい初歩的ミスでした。

フェード効果の実装

画面を下に進めるとコンテンツが浮かび上がるフェード効果の実装です。
これも最新のJQ本体で動きますのでJQ本体を読み込ませてください。

どのタイミングでコンテンツが浮かびあがるかをJQで抑制させ、
あとはCSSでお好みの動きを実現できます。


//フェードのスクリプト
window.onload = function() {
		scroll_effect();
		$(window).scroll(function(){
		scroll_effect();
		});
		function scroll_effect(){
		$('.effect-fade , .effect-fade_right , .effect-fade_left , .effect-fade_up').each(function(){//classを決める
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > elemPos - windowHeight + 100){//ここの数字で高さの調整
			 $(this).addClass('effect-scroll');//付与するclass
			}
		});
		}
};
ここからCSSの例
.effect-fade {
	opacity : 0;
	transform : translate(0, 0);
	transition : all 2.5s;
}
.effect-fade_up {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1s;
}
.effect-fade_right {
	opacity : 0;
	transform : translate(300px, 50px);
	transition : all 1s;
}
.effect-fade_left {
	opacity : 0;
	transform : translate(-300px, 50px);
	transition : all 1s;
}
/**************
出現class
************/
.effect-fade.effect-scroll , .effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}
/**************
時差class
************/
.effect{
	transition-delay:200ms;
}
.effect02{
	transition-delay:400ms;
}
.effect03{
	transition-delay:600ms;
}

これを使いこなせば、右から左から上から下から、浮かびあがるコンテンツが作れるようになります。

画面を下にすると戻るボタンが出る実装

固定で画面を上に戻すボタンですが、最初は必要がないので消しておきたいので、JQ本体を読み込んだついでに実装すると効果的になります。
販促バナーなどにも応用ができます。


$(function(){
	$('a[href^="#"]').click(function(){
		var adjust = 0;
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top + adjust;
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});
$(function(){
	var showTop = 100;//ページの先頭から何pxスクロールされたらボタンを表示させるか
	$('body').append('');
	var fixedTop = $('.fixedTop');
	fixedTop.on('click',function(){
		$('html,body').animate({scrollTop:'0'},500);
		});
		$(window).on('load scroll resize',function(){
		if($(window).scrollTop() >= showTop){
		fixedTop.fadeIn('normal');
		} else if($(window).scrollTop() < showTop){
		fixedTop.fadeOut('normal');
		}
	});
});

この三つを使いこなせれば、今風の動的サイトへの対応が可能になります。
忘れないように書き記すことはコーダーの重要な復習ですね。

ここはblocA