bgSwitcher の中に縦横中央でテキストアニメーションを複数行入れる方法

work/riaruta/index.html

 

https://www.granfairs.com/blog/staff/centering-by-css

html

<!–テキストアニメーション–>
<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>
<script type=”text/javascript” src=”js/jquery.transit.js”></script>
<script type=”text/javascript” src=”js/jquery.textFx.js”></script>
<script type=”text/javascript” src=”js/animeText.js”></script>

↑のJSはheader内だと何かとコンフリクトおこすので、bodyの該当要素の直前に入れた。

<!–キービジュアル–>
<div class=”container-fluid px-0 bg-slider” >
<div class=”outer”>
<div class=”inner-text1″>介護分野に自信があります。</div>
<div class=”inner-text2″>私たちは、慢性的な人材不足を解決するため複数カ国から人材受入を行う</div>
<div class=”inner-text2″>介護分野に特化した支援機関です。</div>
</div>
</div>

 

ＣＳＳ

.bg-slider {
width: 99.1vw;
height: 95vh;
background-position:center center;
background-size: cover;
/*display: flex;*/　コメントアウト
align-items:center;
justify-content: center;

position: relative;
}

 

.outer {
/*display: flex;*/
/* position: relative;*/
width:100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
align-items: center;
justify-content: center;
}

.inner-text1 {
width:100%;
text-align: center;
font-size:400%;
font-family: “Sawarabi Mincho”;
margin-bottom: 20px;
text-shadow: 1px 2px 8px #ffffff;
}

.inner-text2 {
text-align: center;
font-size:180%;
font-family: “Sawarabi Mincho”;
margin-bottom: 20px;
text-shadow: 1px 2px 8px #ffffff;
}

 

 

アニメーション用外部のＪＳ

$(function() {
$(‘.test1’).textFx({
type: ‘fadeIn’,
iChar: 40,
iAnim: ‘3500’
});
});

$(function() {
$(‘.inner-text2’).textFx({
type: ‘slideIn’,
iChar: 20,
iAnim: ‘1000’,
direction: ‘top’
});
});

$(function() {
$(‘.inner-text1’).textFx({
type: ‘rotate’,
iChar: 80,
iAnim: ‘4000’
});
});