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

久しぶりの投稿になります。
今回はまだまだ現役の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は縦長画像をそれぞれ置いても、殆どサイトが重くならないのが推しです。

  • フェード1
  • フェード2
  • フェード3
  • フェード4
  • フェード5

フェード効果の実装

画面を下に進めるとコンテンツが浮かび上がるフェード効果の実装です。
これも最新の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

ここはblocA

ここはblocA

ここはblocA

ここはblocA

ここはblocA

ここはblocA

ここはblocA

フェード5

ここはblocB

ここはblocB

ここはblocB

ここはblocB

ここはblocB

ここはblocB

ここはblocB

ここはblocB

ここはblocB

フェード6
フェード7
フェー8
フェード9
ページトップへ

こはる写真館

こはる写真館

天城スタジオフォトがギャラリー

天城スタジオフォトがギャラリー
ページの先頭へ