<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="none">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="">
<style>
body { margin: 0; padding: 0; }
/*-----------固定FV----------*/
.fv{
background: #055a8c;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -2;
display: flex;
justify-content: center;
align-items: center;
}
.fv p{
color: #fff;
line-height: 2;
text-align: center;
font-size: 20px;
}
/*-----------オーバーレイ----------*/
.overlay{
width: 100%;
padding-top: 100vh;
padding-bottom: 100vh;
background: #000;
opacity: 0;
position: relative;
text-align: center;
font-size: 20px;
}
.overlay p{
margin: 50vh auto 0;
background: #000;
color: #fff;
max-width: 300px;
padding: 20px;
line-height: 1.5;
}
/*-----------次のコンテンツ----------*/
.contents{
width: 100%;
height: 500px;
position: absolute;
background: #000;
}
.contents p{
font-size: 15px;
line-height: 1.5;
color: #fff;
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="fv">
<p>スクロールしてください<br>↓↓↓↓↓↓</p>
</div>
<div class="overlay"><!--不透明度を変えるコンテンツ-->
<p>#fff背景のopacityが0→1.0に変わります。</p>
</div>
<div class="contents">
<p>次のコンテンツ</p>
</div>
<script>
$('div.overlay').each(function () {
var $win = $(window),
$winH = $win.height(),
$connect = $(this),
position = $connect.offset().top,
current = 0.3,
scroll;
$win.on('load scroll', function () {
scroll = $win.scrollTop();
current = (0 - (position - scroll) / $winH);
if (current > 0.7999) {
current = 0.8;
}
if (scroll > position - $winH) {
$connect.css({
opacity: current
});
}
});
});
</script>
</body>
</html>
スクロールでCSS「opacity」を変化させるcssとjavascript
javascriptでページトップスクロールとページ内スクロールのコンフリクト回避
cssでスムーズスクロールが可能になっているが、ios（Safari15.4）以降でないと効かない。
html {
scroll-behavior: smooth;
scroll-padding-top: 60px;
}
そのため、javascriptでの対応となるがページトップスクロールとページ内スクロールは内容が被ることが多いので記述がコンフリクトしないようにしなければ、どちらも動作しなくなってしまう。
コンフリクト回避できる記述があったのでこちらに保存
この記述ではオフセット（停止位置を任意の値だけずらす）ことも可能
このjavascriptを使用してもiosやIEではスムーズスクロールが出来ないのでpolyfillのsmoothscroll.jsを利用する。
※スクロールのjavascriptより前にsmoothscroll.jsを読み込ませる。
smooth scroll behavior polyfillというpolyfillパッケージが公開されており、smoothscroll.jsを読み込むことで以下のモダンブラウザでもスムーズスクロールが実現可能。
srcをクリックするとsmoothscroll.jsが表示される。
こちらはiosやIE以外に適用できるスクロールの記述
document.addEventListener('DOMContentLoaded', () => {
// ヘッダーエレメントを取得。
const headerElement = document.querySelector('.header');
// バッファ（オフセット）の値を設定。スムーズスクロールの際にこの値だけ位置をずらす。
const buffer = 60;
// href属性の値が"#"から始まるすべての<a>要素を取得
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
// 各<a>要素にクリックイベントのリスナーを追加
anchor.addEventListener('click', (event) => {
// デフォルトのクリック動作をキャンセル
event.preventDefault();
// ヘッダーの高さを取得。ヘッダーエレメントがない場合は0とする。
const headerHeight = headerElement ? headerElement.offsetHeight : 0;
// スクロール時の総オフセットを計算（ヘッダーの高さ + バッファ）
const totalOffset = headerHeight + buffer;
// クリックされた<a>要素のhref属性の値を取得
const targetId = anchor.getAttribute('href');
// ターゲットとなるエレメントを取得
const targetElement = document.querySelector(targetId);
// IDが指定されていない、またはターゲットのエレメントが存在しない場合
if (targetId === "#" || targetId === "" || !targetElement) {
alert('適切なスクロール先がありません');
return; // 以降の処理をスキップ
}
// smoothScroll関数を呼び出してスムーズスクロールを実行
smoothScroll(targetElement, totalOffset);
});
});
// スムーズスクロールを行う関数
const smoothScroll = (target, offset) => {
// スクロール先の位置を計算
const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
// 計算された位置にスムーズにスクロール
window.scroll({
top: targetPosition,
behavior: 'smooth'
});
}
});
スクロールで要素を下からフワっとフェードインさせる「実装中」
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);
}
datepicker 2023年版（特定の日付を指定可能）
過去のdatepicker設定では曜日指定だけで、特定の日付が設定できなかったが、今回のコードは設定が可能になる。
$(function() {
// 休日を指定（複数可能）
var holidays = [
'2023/08/15',
'2020/02/12',
];
$('#calendar').datepicker({
minDate: '1d', //明日から
maxDate: '+2m', //1ヶ月後までが選択可能範囲
dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)
beforeShowDay: function(date) {
var result;
var ymd = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
var HName = ktHolidayName(ymd);
//祝日のセット
if(HName != '') {
result = [true, 'date-holiday', HName]; //trueで、祝日の日付選択可能
} else {
// 休日のセット
for (var i = 0; i < holidays.length; i++) {
var htime = Date.parse(holidays[i]); //timeへ変換
var holiday = new Date();
holiday.setTime(htime);
// 休日
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [false, 'holiday']; //falseで「休日を格納」で追加した日の日付選択不可
}
}
switch (date.getDay()) {//各曜日のセット
case 0: //日曜日
result = [false, 'sunday']; //falseで日曜日の日付選択不可
break;
case 6: //土曜日
result = [false, 'saturday']; //falseで土曜日の日付選択不可
break;
default:
result = [true];
break;
}
}
return result;
},
onSelect: function(dateText, inst) {
$('#calendar').val(dateText);
}
});
$(function() {
$("#calendar").datepicker();
$("#calendar").datepicker("option", "showOn", 'button');
$("#calendar").datepicker("option", "buttonImageOnly", true);
$("#calendar").datepicker("option", "buttonText", 'カレンダーから選択');
$("#calendar").datepicker("option", "buttonImage", 'https://megane-fujita.com/wp-content/themes/fujita2021/images/ico_calendar.png');
});
サイト内検索
カテゴリー
- wordpress (134)
- functions.php (77)
- JavaScript (57)
- wordpressプラグイン (42)
- css (38)
- php (28)
- tool (26)
- contactform7 (14)
- 未分類 (14)
- xampp (14)
- .htaccess (11)
- welcart (10)
- スマートフォン関係 (9)
- win7-64bit (7)
- googleAnalytics (4)
- googlemap (4)
- swiper (3)
- レスポンシブデザイン (3)
- html (2)
- windows (2)
- MW WP Form (2)
- GSAP (2)
- Twitter (1)
- html5 (1)
- WP迷惑機能 (1)
最近の投稿
- metaプロパティの出力（カスタム投稿タイプ対応）
- 管理画面のカテゴリー一覧から特定のカテゴリーを除外
- URLのhttps化とwww無しをまとめてリダイレクトさせる設定
- URLのwww付きをwww無しに変更する時の.htaccessのリダイレクト設定
- favicon（ファビコン）やスマホなどのお気に入りアイコン
- WordPress6.9で「global-styles」を出力させない方法
- 固定ページとカスタム投稿タイプのスラッグが同じだと問題あり
- 管理画面の投稿一覧に特定の投稿を先頭に表示させる方法
- WordPressテーマ内のファイルに別ファイル読み込み「include」ほか
- ブラウザがWebPに対応しているかどうかでWebPとjpgを使い分ける
- 別ページからのページ内リンクやスクロールを行ったときの位置調整css「scroll-margin-top」
- Swiperでスライド要素が1つの時、カスタムナビゲーションを非表示にする
- firefoxでswiperのサムネイルが画面幅変更時にちらつくのを防止する
- スマホでモーダルメニューを開閉する時にページ内での位置を保持させる
- 古いios safariでも非jQueryでページトップへのスムーズスクロールをさせる方法
- Advanced Custom Fieldsで～を使った範囲のある金額表示
- WordPress リビジョン停止やリビジョン数の制限方法
- クラシックエディタでフロート画像をラップする処理
- GLightboxの導入方法
- Swiperでスライドに動画を使う