kdcsライブラリー

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

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);
}

slickスライダーでは、「slick-initialized」がスライダーが初期化（読み込み完了）した時点で付与されるので、まず全非表示にしておき「slick-initialized」が付与された時点で表示するようにする。

#hogehoge-slider{
    display: none;
}
#hogehoge-slider.slick-initialized{
    display: block; /*slick-initializedが付与されたら表示*/
}

cssアニメーションで行う

#hogehoge-slider{
    opacity: 0;
    transition: opacity .3s linear;
}
#hogehoge-slider.slick-initialized{
    opacity: 1; /*slick-initializedが付与されたら表示*/
}

過去の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');
  });

slickスライダーを使いつつ、タイトルやキャッチコピーなどのテキストを1文字ずつ表示させる方法。

slickスライダーを使う場合、フェードで切り替わるので「.slick-active」のクラスが付加されたときにcssでアニメーションさせなければならない。

例はキャッチコピーとメインタイトルを２行で表示し、文字サイズも変える
文字数は８文字まで対応（cssの記述で増減可能）

html

<div id="slickSlider">
<div class="slick-box">
<div id="slider-1" class="slider-item">
<img class="slickImage1" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img01.jpg" alt="画像２" title="" width="1600" height="665">
<div class="catchPosition inner">
<div class="catchText1">きゃっちこぴー１</div>
<div class="catchText2">めいんたいとる１</div>
</div><!--/.catchPosition-->
</div><!--/#slider-1-->
<div id="slider-2" class="slider-item">
<img class="slickImage2" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img02.jpg" alt="画像２" title="" width="1600" height="665">
<div class="catchPosition inner">
<div class="catchText1">きゃっちこぴー２</div>
<div class="catchText2">めいんたいとる２</div></div><!--/.caption-->
</div><!--/#slider-2-->
</div><!--/.slick-box-->
<div class="slickslider-filters"></div>
</div><!--/#slickSlider-->

css

.slick-box .catchPosition {
    display: none;
}
.slick-box .slick-active .catchPosition {
    display: block;
}
.slick-box .catchPosition {
	width: 100%;
	margin: auto;
    color: #fff;
	text-align: center;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}
.slick-box .catchText2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 48px;
}
.slick-box .catchText1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 36px;
}

.slick-box .catchText1 span{ opacity: 0; }
.slick-box .catchText2 span{ opacity: 0; }

.slick-box .slick-active .catchText1 span{ opacity: 0; animation:text_anime_on 1s ease-out forwards; }
.slick-box .slick-active .catchText2 span{ opacity: 0; animation:text_anime_on 1s ease-out forwards; }

.slick-box .slick-active .catchText1 span:nth-child(1){animation-delay: 0.5s}
.slick-box .slick-active .catchText1 span:nth-child(2){animation-delay: 0.6s}
.slick-box .slick-active .catchText1 span:nth-child(3){animation-delay: 0.7s}
.slick-box .slick-active .catchText1 span:nth-child(4){animation-delay: 0.8s}
.slick-box .slick-active .catchText1 span:nth-child(5){animation-delay: 0.9s}
.slick-box .slick-active .catchText1 span:nth-child(6){animation-delay: 1.0s}
.slick-box .slick-active .catchText1 span:nth-child(7){animation-delay: 1.1s}
.slick-box .slick-active .catchText1 span:nth-child(8){animation-delay: 1.2s}

.slick-box .slick-active .catchText2 span:nth-child(1){animation-delay: 2.5s}
.slick-box .slick-active .catchText2 span:nth-child(2){animation-delay: 2.6s}
.slick-box .slick-active .catchText2 span:nth-child(3){animation-delay: 2.7s}
.slick-box .slick-active .catchText2 span:nth-child(4){animation-delay: 2.8s}
.slick-box .slick-active .catchText2 span:nth-child(5){animation-delay: 2.9s}
.slick-box .slick-active .catchText2 span:nth-child(6){animation-delay: 3.0s}
.slick-box .slick-active .catchText2 span:nth-child(7){animation-delay: 3.1s}
.slick-box .slick-active .catchText2 span:nth-child(8){animation-delay: 3.2s}

@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

javascript
最後の２行でクラス指定

$.fn.letterSpan = function() {

$(this).each(function() {
    var text = $.trim(this.textContent),
        html = "";

    text.split("").forEach(function(v) {
        html += "<span>" + v + "</span>";
    });

    this.innerHTML = html;
    });
};

$(".catchText1").letterSpan();
$(".catchText2").letterSpan();

＜この内容は不採用＞

タイトルや見出しなどを１文字ずつフェードインさせる記述で改行にも対応。

例はトップページのスライダー内のタイトルのもの

htmlの記述

<div class="catchPosition inner">
<div class="catchText1">キャッチコピー１<br>メインタイトル１</div>
</div><!--/.catchPosition-->

cssの記述
※ポイントは疑似要素:first-lineで１行目のスタイルを変更しているところ

.slick-box .catchPosition {
    width: 100%;
    margin: auto;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}

.slick-box .catchText1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 36px;
}
.slick-box .catchText1:first-line {
    font-size: 24px;
}
.catchText1,
.catchText1 span {
  opacity: 0;
}

javascript（jQery使用）
※ポイントはreplaceでbrタグをそのまま出力して改行に対応させているところ

$(window).on('load', function(){
    var text_wrap = '.catchText1'; //適用させる要素のクラス
    var delay_speed = 80; //文字が出るスピード(ミリ秒)
    var fade_speed = 500; //文字がフェードするスピード(ミリ秒)
    var str;
    $(text_wrap).css('opacity','1');
    var firsttxt = $(text_wrap).html();
    str = firsttxt.replace(/<br>/g,'\n');
    $(text_wrap).html('');
    for (var i = 0; i < str.length; i++) {
        $(text_wrap).append('<span class="text_span">'+str.substr(i, 1).replace(/\n/, "<br>")+'</span>');
        $(text_wrap).children('span:last-child').delay(delay_speed * i).animate({opacity:'1'}, fade_speed);
    }
    setTimeout(function(){$(text_wrap).html(firsttxt)},str.length*delay_speed+fade_speed);
});