kdcsライブラリー

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

WordPressで投稿にpdfファイルをアップロードしてリンクを貼る際に
別ウインドで開くようにするために「target=”blank”」を付ける方法。

但し、セキュリティーの観点から「rel=”noopener nofollow”」を付けることが推奨される。

jQueryの記述

$(document).ready(function () {
	// PDFファイルリンクに target="_blank"を付ける
	$("a[href*='.pdf']").attr('target','_blank');
	$("a[href*='.pdf']").attr('rel','noopener nofollow');
});

<script>
jQuery(function(){
    var windowWidth = $(window).width();
    var headerHight = 100; 
    jQuery('a[href^=#]').click(function() {
    var speed = 1000;
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top-headerHight;
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
   });
});
</script>

var headerHight = 上位置からの高さ
var speed = 移動スピード

jQuery使います。

<div id="content">
<div id="contentArea" class="inner">
<div id="main">
メインエリア
</div><!--/#main-->
<div id="aside">
<div id="asideBox">
サイドバー
</div><!--/#asideBox-->
</div><!--/#aside-->
</div><!--/#contentArea-->
</div><!--/#content-->

(続きを読む…)