HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-2.css">body内のテキストを表示させたい場所にHTMLを記載します。
<p>
<span class="slide-in leftAnime">
<span class="slide-in_inner leftAnimeInner">左から右へテキストが流れます。左から右へテキストが流れます。</span>
</span>
</p>body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-2.js"></script>
CSSの書き方
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
}
/*左右のアニメーション*/
.leftAnime{
opacity: 0;/*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
animation-name:slideTextX100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%); /*要素を左の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}
.slideAnimeRightLeft {
animation-name:slideTextX-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);/*要素を右の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}
JSの書き方
function slideAnime(){
//====左に動くアニメーションここから===
$('.leftAnime').each(function(){
var elemPos = $(this).offset().top-50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
//左から右へ表示するクラスを付与
//テキスト要素を挟む親要素（左側）とテキスト要素を元位置でアニメーションをおこなう
$(this).addClass("slideAnimeLeftRight"); //要素を左枠外にへ移動しCSSアニメーションで左から元の位置に移動
$(this).children(".leftAnimeInner").addClass("slideAnimeRightLeft"); //子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
} else {
//左から右へ表示するクラスを取り除く
$(this).removeClass("slideAnimeLeftRight");
$(this).children(".leftAnimeInner").removeClass("slideAnimeRightLeft");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-1.css">body内のテキストを表示させたい場所にHTMLを記載します。
<p class="TextRandomAnime">テキストがバラバラに出現します</p>body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-1.js"></script>
CSSの書き方
.TextRandomAnime span{
opacity: 0;
}
.TextRandomAnime.appearRandomtext span{
animation:text_randomanime_on .5s ease-out forwards;
}
/*アニメーションで透過を0から1に変化させる*/
@keyframes text_randomanime_on {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.TextRandomAnime.appearRandomtext span:nth-child(2n) {
animation-delay: .5s;/* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
}
.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
animation-delay: .15s;/* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
}
JSの書き方
// TextRandomAnimeにappearRandomtextというクラス名を付ける定義
function TextRandomAnimeControl() {
$('.TextRandomAnime').each(function () {
var elemPos = $(this).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
$(this).addClass("appearRandomtext");
} else {
$(this).removeClass("appearRandomtext");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
TextRandomAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
//spanタグを追加する
var element = $(".TextRandomAnime");
element.each(function () {
var text = $(this).text();
var textbox = '';
text.split('').forEach(function (t) {
textbox += '<span>' + t + '</span>';
});
$(this).html(textbox);
});
TextRandomAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-7.css">body内にHTMLを記載します。
<header id="header">
<h1>Logo</h1>
<div id="header-img"></div>
</header>
<main id="container">
<section>
<h2>Area 1</h2>
<!--/section--></section>
<!--/main--></main>
<footer id="footer">
<small>© copyright.</small>
</footer>body 終了タグ直前に jQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/6-7.js"></script>
CSSの書き方
#header{
position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
width: 100%;
height:100vh;
overflow: hidden;/*はみ出しているところを隠す*/
}
#header-img{
position: fixed;/*背景を固定するためfixedをかける*/
z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
top: 0;/*topの位置がJSで変化*/
/*以下画面で背景画像を表示させるための指定*/
width: 100%;
height:100vh;
background: url("../img/pict.jpg") no-repeat top center;/*背景画像の設定※オリジナルの画像に設定してください*/
background-size:cover;
transform-origin:center;/*変化する基点を中心からに設定*/
}
#container,
#footer{
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}
/*ロゴを中央に配置*/
#header h1{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;/*#header-imgよりも手前に配置*/
}
JSの書き方
$(window).scroll(function() {
var scroll = $(window).scrollTop();//スクロール値を定義
//header-imgの背景
$('#header-img').css({
transform: 'scale('+(100 + scroll/10)/100+')',//スクロール値を代入してscale1から拡大.scroll/10の値を小さくすると拡大値が大きくなる
top: -(scroll/50) + "%",//スクロール値を代入してtopの位置をマイナスにずらす
});
});
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-6.css">body内にHTMLを記載します。
<header id="header">
<h1>Scroll me</h1>
</header>
<div id="container">
<p>このエリアがスクロールすると上にかぶさります</p>
<!--/container--></div>
CSSの書き方
#header{
/*headerを全画面で見せる*/
width:100%;
height: 100vh;
position: relative;
}
#header:before{
/*headerの疑似要素に背景画像を指定*/
content:"";
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
background:url("../img/pict.jpg") no-repeat center;/*背景画像設定※オリジナル画像を設定してください*/
background-size:cover;
}
#container{
/*下のかぶさるエリアの指定*/
position: relative;
z-index:1;
/*以下はレイアウトのための記述。削除可能*/
background:#fff;
padding:600px 0;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-5.css">body内にHTMLを記載します。
<header id="header">
<h1>Logo</h1>
</header>
<main id="container">
<section class="fixed">
<h2>Area 1</h2>
<!--/area1--></section>
<section class="fixed">
<h2>Area 2</h2>
<!--/area2--></section>
<section class="fixed">
<h2>Area 3</h2>
<!--/area3--></section>
<!--/main--></main>
<footer id="footer">
<small>© copyright.</small>
</footer>body 終了タグ直前に jQuery、stickyfill.jsと、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
<!--自作のJS-->
<script src="js/6-5.js"></script>
CSSの書き方
#header{
position: fixed;/*Header固定*/
top:0;
height: 70px;/*高さ指定*/
z-index: 2;
width:100%;
background:#fff;/*背景色*/
}
#container{
position: relative;
z-index: 1;/*header とfooterを手前にするため数字を小さく*/
}
section.fixed{
position: -webkit-sticky;/*Safari*/
position: sticky;
top:70px;/*Header高さ分で止まるようにする*/
padding: 600px 0;/*デモ画面の高さを持たすための上下余白*/
}
section.fixed:nth-child(odd){
background:#666;/*デモ画面の奇数背景色*/
}
section.fixed:nth-child(even){
background:#333;/*デモ画面の偶数背景色*/
}
section.fixed:last-of-type{
padding-top:70px;
/*最後のセクションだけ止まらないため、エリア内の情報が少ない時は、Header分の高さをpadding-topに追加して上部が見えるようにする*/
}
#footer{
position: relative;
z-index: 2;
}
/*＝＝＝＝＝タブレット以下の見え方 ＝＝＝＝＝*/
@media screen and (max-width:768px){
section.fixed{
position:relative!important;/*sticky解除*/
top:0;/*70px⇒0pxに戻す*/
}
section.fixed:first-of-type{
padding-top:100px;
/*最初の要素は上部にHeaderの高さ以上の余白をとる*/
}
}
JSの書き方
768px以下では紙芝居風を解除するため、position: sticky;に対応していないブラウザ対応用のJavaScriptを、768pxより大きい場合に読み込む。
$(window).on('load resize', function() {
var windowWidth = window.innerWidth;
var elements = $('.fixed');
if (windowWidth >= 768) {
Stickyfill.add(elements);
}else{
Stickyfill.remove(elements);
}
});