カテゴリー: jQuery
jQuery RWD Image Maps レスポンシブ用イメージマップ 画像へ
イメ-ジマップを入れる際は Dreamweaverのマップは使わずに、 HTML Imagemap Generator からマップコードを造ってhtmiへはりつける
jsへのパスはheaderに入れると多分コンフリクトなのか機能しないからbodyに記載する
<div class="col-12 text-center my-5">
<img src="../n-image/koshinokanburi/item2.jpg" usemap="#ImageMap" alt="" class="img-fluid mx-auto"/></div>
<!--レスポンシブ用イメージマップ-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<map name="ImageMap">
<area shape="circle" coords="459,1617,86" href="https://www.chancemaker.co.jp" alt="" />
<area shape="rect" coords="597,2080,846,2262" href="https://coco-wa.jp" alt="" />
</map>
<script>
$('img[usemap]').rwdImageMaps();
</script>
</div>
イメージマップはローカルでは確認できない。サーバー下で確認
PC用とスマホ用に画像を2種入れた場合の表記の仕方
サンエツ/koshinokanburi
<div class="row justify-content-center text-center koshikanMainContent">
<div class="col-xl-10 col-12 text-center mt-lg-5 mt-3 d-md-block d-none">
<img src="../n-image/koshinokanburi/pc.jpg" usemap="#ImageMap" alt="越の缶ぶり" class="img-fluid mx-auto"/>
</div>
<div class="col-xl-10 col-12 text-center mt-lg-5 mt-3 d-block d-md-none">
<img src="../n-image/koshinokanburi/sp.jpg" usemap="#ImageMap2" alt="越の缶ぶり" class="img-fluid mx-auto"/>
</div>
<!--レスポンシブ用イメージマップ-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<map name="ImageMap">
<area shape="rect" coords="176,3031,856,3217" href="https://www.toyama-sakana.com/cat/fishes" target="_blank" alt="" />
<area shape="rect" coords="202,4035,794,4197" href="https://www.denkibuil.com" target="_blank" alt="" />
<area shape="rect" coords="267,5320,785,5494" href="#" data-toggle="modal" data-target="#yuki" alt="" />
</map>
<map name="ImageMap2">
<area shape="rect" coords="201,3326,639,3519" href="https://www.toyama-sakana.com/cat/fishes" target="_blank" alt="" />
<area shape="rect" coords="167,4461,675,4644" href="https://www.denkibuil.com" target="_blank" alt="" />
<area shape="rect" coords="193,6175,606,6350" href="#" data-toggle="modal" data-target="#yuki" alt="" />
</map>
<script>
$('img[usemap]').rwdImageMaps();
</script>
</div>
dream weaver リンクのマップ機能 イメージマップ
画像を選択した状態でプロパティを見ても、クリッカブルマップを設定する項目が見当たらない。
どうやら表示モードの問題のようでした。
表示モードが「デザイン」出ないと、プロパティにクリッカブルマップの項目が表示されないようです。
表示モードをライブからデザインに変更して、再度画像を選択して確認してみると表示されています。
最新のDreamweaverは、Bootstrap4に対応していたり、psdファイルからコードを生成してくれるみたいな機能もあるようですごいですね。
でもレスポンシブだとイメージマップはずれてしまうので、jQuery RWD Image Mapsを使おう
Lightbox2 ローカルでipadやiphoneで動かない?
PCサイズなら問題ないのだが、ローカルでipadやiphoneでchromeのデベロッパーツールで確認しても動かないがサーバー下なら動く
ブラウザの更新でそうなったのかな?
jquery slick カルーセルスライダー
/work/slick-1.8.1/original.html
slick 他のコンポーネントのjqueryがいくつも入っているとコンフリクト起こす。
挿入箇所はheadの閉じる直前ぐらいの方がいい。総体パスなら./と同じ階層でもドットスラッシュ付けないとパスが通らない。
<!--slick -->
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<script type="text/javascript" src="./slick/slick.min.js"></script>
スクリプトはドローワーのスクリプトの後から入れる。
<script type="text/javascript">
$(function(){
$('.slider').slick({
autoplay: true,
autoplaySpeed: 4000,
arrows: true,
accessibility: true,
swipe: true,
pauseOnHover: true,
dots: true,
slidesToShow:4,
slidesToScroll: 4,
});
});
</script>
http://kenwheeler.github.io/slick/
https://qiita.com/katsunory/items/25b385aae0f07b41e611
https://qiita.com/ymeeto/items/7fc56eea4bd44487cdb7
https://125naroom.com/web/3198
arrowsが表示されない
ブレークポイントで表示枚数変更
ブレークポイントで表示枚数変更
$(function () {
$(".slider").slick({
slidesToShow: 4,
responsive: [
{
breakpoint: 1024, // 768~1023px以下のサイズに適用
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 768, // 480〜767px以下のサイズに適用
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 480, // 〜479px以下のサイズに適用
settings: {
slidesToShow: 1,
},
},
],
});
});
https://www.jungleocean.com/programming/190201jquery-slick
両サイドに画像を表示するスライダー
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
infinite: true, //スライドのループ有効化
dots:true, //ドットのナビゲーションを表示
centerMode: true, //要素を中央寄せ
centerPadding:'20%', //両サイドの見えている部分のサイズ
autoplay:true, //自動再生
});
});
</script>
<div class="container-fluid bnrContainer">
<div class="row justify-content-center">
<div class="col-12 slider my-5 px-0">
<div class=" text-center mx-3"><img src="image/top/item4.png" class="img-fluid mx-auto dropshadow" alt=""/></div>
<div class=" text-center mx-3"><img src="image/top/item5.png" class="img-fluid mx-auto dropshadow" alt=""/></div>
<div class=" text-center mx-3"><img src="image/top/item6.png" class="img-fluid mx-auto dropshadow" alt=""/></div>
</div>
</div>
テキストアニメーション スクロール 俺が普段使うやつ。 これ使えば良い!
CSS
/****************************************
アニメーション スクロール
/***************************************/
.animation001 {}
.animation002 {}
.animation003 {}
.animation-feadin1 {
-webkit-animation-name: animation1;
animation-name: animation1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes animation1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
}
}
@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
↑この赤の箇所は必要!
html
<!–スクロール アニメ–>
<script type=”text/javascript” src=”n-js/scroll-text-anime.js”></script>
javascript
$(function() {
//function(e) のカッコ内のeは使われていないが一応そのまま残しておく。警告あるが大丈夫。eを取っても動くが一応オリジナルのままにしておく
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation001’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation001’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation001’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation002’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation002’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation002’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation003’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation003’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation003’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation004’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation004’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation004’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation005’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation005’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation005’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation006’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation006’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation006’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation007’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation007’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation007’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation008’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation008’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation008’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation009’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation009’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation009’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation010’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation010’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation010’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation011’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation011’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation011’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation012’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation012’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation012’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation013’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation013’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation013’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation014’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation014’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation014’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation015’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation015’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation015’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation016’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation016’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation016’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation017’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation017’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation017’).classList.remove(‘animation-feadin1’)
}
},
})
});
cssのanimationとBgSwitcherとのずれについて
okwaveにて質問してみた。
今回初めてcssのanimationを使ってみました。
同時に、jQuery.BgSwitcher を使って背景画像5枚を5秒間づつ表示させてループさせています。(合計25秒間)そして、cssのanimation でテキストA,B,Cの3枚を25秒間表示させています。
表示タイミングは
【背景画像1を表示 テキストAを表示 テキストBを非表示 テキストCを非表示】
【背景画像2を表示 テキストAを非表示 テキストBを非表示 テキストCを非表示】
【背景画像3を表示 テキストAを非表示 テキストBを表示 テキストCを非表示】
【背景画像4を表示 テキストAを非表示 テキストBを非表示 テキストCを非表示】
【背景画像5を表示 テキストAを非表示 テキストBを非表示 テキストCを表示】
背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚5秒です。5枚ですので25秒でループです。animationが適応されているテキストA,B,Cの animation-duration: 25s; にしています。
テキスト画像A,B,Cは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。
初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい5分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストAが背景画像5で表示されるようになってしまいます。
jQuery.BgSwitcherでの背景画像5枚の1ループの時間は25秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。
animation側の設定に問題があるかもしれませんので教えていただけないでしょうか?
現在のテストサイトは下記です。
http://cm-creation.net/yoshida/text-anime-test/index13.html
どうぞよろしくお願いいたします。Cssとhtml設定は下記です。
■cssの設定
.bg-slider {
width: 99.1vw;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
justify-content: center;
position: relative;
}
.textA {
position: absolute;
top: 5%;
left:20%;
animation-name:animation1;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.textB {
position: absolute;
top: 5%;
right:20%;
animation-name:animation2;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.textC {
position: absolute;
top: 5%;
animation-name:animation3;
animation-duration: 25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
5% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
26% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation2 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
41% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
45% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
66% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation3 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
81% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
85% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
101% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
102% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
■html
<script>
jQuery(function($) {
$(‘.bg-slider’).bgSwitcher({
images: image/main10.jpg’,’image/main11.jpg’,’image/main12.jpg’,’image/main13.jpg’,’image/main14.jpg’], // 切り替える背景画像を指定
interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒
loop: true, //
shuffle: false, //
effect: “fade”, // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration: 500, // エフェクトの時間を指定します。
easing: “swing” // エフェクトのイージングをlinear,swingから指定
});
});
</script>
<div class=”container-fluid px-0 bg-slider ” >
<div class=”textA”><img src=”image/item8.png” class=”img-fluid” alt=””/></div>
<div class=”textB”><img src=”image/item9.png” class=”img-fluid” alt=””/></div>
<div class=”textC”><img src=”image/item10.png” class=”img-fluid” alt=””/></div>
</div>
解答
簡単に解説しますと。CSSでアニメーションを行った場合、CSSファイル等に記述して指定したアニメ処理が記述された順番に上から解釈され、それが次々と連鎖的に処理されて行く事で人間の目にはあたかも連続的なアニメーションに見えます。しかしながら .textA{….} の様に括弧でくくられた中身はそれぞれ別途に解釈され処理されて行くため、どんなにそれが高速に処理されたとしてもAからBへ処理へ移行する瞬間に非常に僅かな「待ち時間」が発生します(1/1000秒の極僅かな時間です)。これは非常に短い “時差” なので数分程度ではズレは目立ちませんが、数百回数十分と続けば塵も積もれば何とやらで秒単位のズレとなって視認できるくらいの時差が発生して来ます。
これを回避し半永久的に時差やズレを生じさせないアニメーションを稼働させ続けるためには「タイミングチャート」を実装させ、それに合わせてそれぞれのアニメ処理を定期的にリセットさせ同期を取る必要があります。例文でCSS内に指定されたアニメーション処理の時間指定である animation-duration:25s; 等はプログラム内部ではそれに従って実行されますが、現実世界では必ず処理速度との僅かなズレが生じます。それは速過ぎる場合もあれば遅れる場合もあります。このズレは現代のPCや全てのプログラム、アプリケーションの基本的な仕組みなので回避する事は出来ません。
本当は全然違いますが、イメージして貰えれば分かり易いのは、この様な場合に .textA{….} の様に括弧でくくられた中身はそれぞれ単独で動くため、各自が各々に時間合わせてした腕時計を持っていると思ってください。そして .textA{} は1分が60秒の時計を見て動くのに、.textB{} は1分が59.98秒の別の時計に行動を合わせているみたいな感じです。こうして各処理が各自の時計に合わせて動くため、同じ「25s」と指示を出していても必ず時差が発生してズレて来るのです。そしてコレはプログラム上の仕様なので変える事は不可能です。
ですのでこれら複数処理を完全にタイミングを合わせるためには、各自の処理が1回終わった時点ですぐに2回目の処理に行かずに待機させ、遅れている他の処理が完全に終わるまで何もさせずに待たせます。そうして最後のランナーが完全にゴールへ到着した事を確認した後、改めてまた全員に同時にスタートする様に命令を出します。こうする事によって1秒以下のミクロン秒の世界ではバラバラになっていますが、実際の画面上では人間には感知出来ない極小時間なので見た目上は完全に同期している様に見せる事が可能になります。
P.S.
一口に「スクリプトで処理せよ」とは言いましたが…実際にはかなり大変なので、過去に似た様な処理を自作した経験が無いとすぐに実装させるのは難しいと思います。それでそのための初心者にも簡単にアニメ実装が可能なCSSなんですが、前述の通りそこまで完璧なアニメ処理は元から考慮されていないので、あくまでもちょっとした画面変化のお手伝いをするのが目的のCSSだとご理解ください。
まあ身も蓋もないですが、よほど作り込まれたストーリー性も有る様な凝ったアニメ変化をするwebページでも無い限り、普通はTOPページでもUserは1分も眺め続ける事はありませんので。5分以上放置して変になる程度でしたら、特に気にせずにこのままでも良いかと思います。或いは画像やテキストの中身を再検討し工夫して、例え時差やズレが生じたとしても違和感なく見える様な演出に変更するとかですかね。
茶谷さんにアニメーションについて質問したときに帰ってきた答えにjavascriptがわからないと出来ないですよって言っていたのはこの事なんだね。
茶谷様
お世話になります。> チャンスメーカーの吉田です。 ウェブの作成に関してヒントを頂ければと願い、ご連絡いたしました。 お忙しいところ誠に恐縮なのですが少しアドバイスを頂けたらたすかります。 現在下記テストサイトでページ上部でスライドショーを使っているのですが、http://cm-creation.net/yoshida/new-chance/
フクロウのスライド画像とテキスト部分の(未来への創造 未来への好奇心 未来への探求)をそれぞれ一枚の画像として作りそれをスライドショーで
表示させています。
フクロウの画像はスライドショーで回すとして、本来はテキスト部分とスライド用のフクロウの背景画像を一枚の画像化してで作るのではなく、 スライドの表示タイミングに合わせて任意の位置にテキスト部分を表示させたいと思っています。
例えば 背景画像Aが表示されているタイミングで テキストAを左側に表示
背景画像Bが表示されているタイミングで テキストAは消えてテキストBを右側に表示
背景画像はループしますので、テキストも同タイミングでループ表示
そしてこれらのテキストの位置はスマホなどにした場合見切れることなく表示させるためにレスポンシブにしたい
イメージとしてはブラウニー様が作られました 富山ビューティーカレッジの上部に実装している感じです。
JQueryなどで同等の事ができたらと思うのですが、私はJavascriptが全然わからないために上記のようなことが可能な基本を紹介している
サイトの心当たりありますでしょうか?できればコピペしたらそのような動きを理解できたり実装可能な初心者にもわかるサイトが望ましいのですが
ご存知でしょうか?
茶谷さんからの解答
ご連絡いただきました件ですが、CSSとJavascriptで実装しておりますので、
ある程度の知識がないと難しいかと思われます。
オリジナルで作っておりますので、参考になるサイトもちょっと分からないですね。。
お力になれずすみませんが、よろしくお願いいたします。
textillate.js システムテキストにアニメーション
work/テキストアニメーション/text-anime-test/index2.html
https://www.alloneslife-0to1work.jp/code/javascript/textillate-js
jQuery TextFX jQueryライブラリを使用して、システムテキストにアニメーション効果を簡単に実装する方法
work/テキストアニメーション/text-anime-test/index.html
リアルタのお試しトップページのキービジュアル内にて稼働中
work/rearuta/index.html
https://amg-solution.jp/blog/12016
bgSwitherにcssアニメーション
テキストアニメーション/text-anime-test/index11.html
css/common3.css
※自社のトップページでも動いているが
keyframesの名前とanimation-nameの名前はトップページ用として別の名前をつけた。
CSS
.bg-slider {
width: 99.1vw;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
/*align-items:flex-end;*/
justify-content: center;
position: relative;
}
アニメーションの位置
背景要素をrelativeにして アニメーションの位置はabsoluteにしてtopやleftの%で位置を設定
/****************************************
アニメーション スクロール
/***************************************/
.text01 {
position: absolute;
top: 5%;
left:20%;
animation-name:animation1;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.text02 {
position: absolute;
top: 5%;
right:20%;
animation-name:animation2;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.text03 {
position: absolute;
top: 5%;
animation-name:animation3;
animation-duration: 25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
1枚5秒の背景画像を5枚= 5 x 5 = 25秒
25秒が100%として 5枚で割ると 100÷5=20% が1枚の長さのMAXパーセンテージ
1枚目、3枚目、5枚目にアニメーションをつけるために 20%づつ加算。
opacityで非表示から表示部分をプラスでパーセント別途追加。
各アニメーションは25秒の中で何パーセントで表示され、非表示させるかで調整。
ループさせる。
でも%は実際にタイミングがちょっと違うので見ながら微調整した。
@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
5% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
26% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation2 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
41% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
45% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
66% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation3 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
81% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
85% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
101% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
102% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
スマホなどの調整として
/*****TOP スマホ縦****/
@media (max-width: 479px){
.bg-slider {
width: 100%;
height: 60vh;
background-position:center center;
background-size: cover;
display: flex;
/*align-items: flex-end; */
justify-content: space-evenly;
}
.text01 img{
height: 150px;
width: auto;
}
.text02 img{
height: 150px;
width: auto;
}
.text03 img{
height: 150px;
width: auto;
}
}
html
<script src=”js/jquery-1.11.3.min.js”></script>
<script src=”js/jquery.bgswitcher.js”></script>
<script>
jQuery(function($) {
$(‘.bg-slider’).bgSwitcher({
images: [‘image/top/main1.jpg’,’image/top/main2.jpg’,’image/top/main4.jpg’,’image/top/main5.jpg’,’image/top/main6.jpg’], // 切り替える背景画像を指定
interval: 5000, // 背景画像を切り替える間隔を指定 3000=3秒
loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない
shuffle: false, // 背景画像の順番をシャッフルするか指定 true=する false=しない
effect: “fade”, // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration: 500, // エフェクトの時間を指定します。
easing: “swing” // エフェクトのイージングをlinear,swingから指定
});
});
</script>
<div class=”container-fluid px-0 bg-slider ” >
<div class=”text01“><img src=”image/item5.png” class=”img-fluid” alt=””/></div>
<div class=”text02“><img src=”image/item6.png” class=”img-fluid” alt=””/></div>
<div class=”text03“><img src=”image/item7.png” class=”img-fluid” alt=””/></div>
</div>
スクロール ふわっと テキスト 画像 css3
これOK!
コピペ可能なサンプルサイト
https://gatch.site/css-fadein-animation/
スクロール時に対応しているソースがページ下の方にある。
※padやスマホの挙動は実機じゃないとスクロールの動きが確認出来ないことがある。ブラウザの簡易デバイスの画角にしたら動かないことがあるのでサーバーでは動くので大丈夫。
work/テキストアニメーション/text-anime-tsest/index9.htmlに稼働確認
自社ページでも稼働中
new-chance/profile/
https://gatch.site/css-fadein-animation/
フェードインサンプル ⑤ スクロール の箇所参照!
最後は、スクロール時にフェードインするサンプルです。
スクロールに関しては、残念ながら css のみではできないので、javascript を使用します。ごめんなさい m(_ _)m
jQuery などのプラグインの使用せずに使えるコードですのでご安心を。
下記がデモになります。画面をスクロールすると表示され、上に戻ると非表示になります。
<div class="css-fade5">
スクロールフェードインアニメーション
</div>
<style>
.css-fade5--in {
// アニメーション設定
animation-name: fade-in5;
animation-duration: 1s; //アニメーション時間
animation-timing-function: ease-out; //アニメーションさせるイージング
animation-delay: 0; //アニメーション開始させる時間
animation-iteration-count: 1; //繰り返し回数
animation-direction: normal; //往復処理をするかどうか
animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
}
// アニメーション
@keyframes fade-in5 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
$(window).on({
scroll: function(e) {
var startY = document.querySelector('.css-fade5').getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 2 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector('.css-fade5').classList.add('css-fade5--in')
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector('.css-fade5').classList.remove('css-fade5--in')
}
},
})
})
</script>
CSSに関しての基本的解説は↓
アニメーションを定義する
「animation-name」でアニメーション名を定義しますが、好きな英数字でオッケーです。今回は「fadein」にしています。
「@keyframes fadein」のように定義したアニメーション名を使用します。
「animation-duration」はアニメーションの長さを指定するプロパティで、今回は「2s」 なので「2秒」ということですね。
1sだとFirefoxでカクつきが目立ったりするので2sとしています。
@keyframesでアニメーションを制御
「@keyframes」はアニメーションの流れを制御するための記述です。「from」が開始、「to」が終了ですが、必要に応じて30%、70%など途中にもルールを増やすことができます。
Cocoonを使用している方は注意!
「from〜to」は「0%〜100%」と数字で指定することも可能ですが、Cocoonの「高速化設定」でCSSを縮小していると「0%」で指定した時にアニメーションが動かない不具合があります。
これはCocoonでHTML、CSS、JavaScriptの縮小に使用している「PHP Function to Minify HTML, CSS and JavaScript」というライブラリが原因のようです。
いずれは不具合が改善されるかもしれませんが、とりあえず「0%」ではなく「from」を使っておけば問題ありません。
「opacity」が透明度を指定するプロパティで、今回だと開始時に0.0(透明)、終了時に1.0(不透明)でフェードイン効果を表現しています。
他にも例えば「from { color:#000; }(黒)」、「to { color:#fff; }(白)」と指定すれば、黒から白へ色が変化するアニメーションが追加されます。
transformで変形を制御
「transform」は要素を変形させるプロパティです。移動(translate)、縮尺(scale)、回転(rotate)、傾斜(skew)、奥行き(perspective)、自由変形(matrix)など色々ありますが、今回は「移動(translate)」を使用しています。
「translateY」がY軸(縦方向)、「translateX」にするとX軸(横方向)の動きを指定できます。
今回だと開始時が「translateY(20px)」で下方向に20pxの位置、終了時が「translateY(0)」で元の位置に戻る指定ですね。
これを「translateY(-20px)」と負の値にすると、上方向に20px動くことになります。
ベンダープレフィックスはいらないよ
最近はブラウザのことを気にせずにCSSのアニメーションを気軽に使えるようになりました。「animation」プロパティは -webkit-、 -moz- などのベンダープレフィックスも必要なくなっています。
iOS 8.0以下と、Android 4以下に対応させる場合は -webkit-のベンダープレフィックスが必要ですが、2018年7月現在でiOS 8.0のシェアは0.5%、Android 4以下も10%未満なので無視して良いと思います。
work/テキストアニメーション/text-anime-tsest/index9.htmlに稼働確認
自社サイトでも動いている
スマホもOK
(簡易確認のQRコードをスマホでテスト確認の場合は動かないが、サーバー側では大丈夫)
CSS
<style>
.css-fade5 {}
.css-fade5–in {
-webkit-animation-name: fade-in5;
animation-name: fade-in5;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes fade-in5 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
}
}
@keyframes fade-in5 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
</style>
html
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.css-fade5‘).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の3/3
// 表示
if (startY < offset) {
document.querySelector(‘.css-fade5‘).classList.add(‘css-fade5–in‘)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.css-fade5‘).classList.remove(‘css-fade5–in‘)
}
},
})
})
</script>
<div class=”row mb-md-5 mb-3 justify-content-center”>
<div class=”col-md-6 mt-4 text-center css-fade5“>
<img src=”../image/profile/item2.gif” class=”img-fluid mx-auto d-block” alt=”history”/>
<p>会社沿革</p>
</div>
</div>
もし外部jsにして読み込むらなら
$(function() {
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation001’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation001’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation001’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation002’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation002’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation002’).classList.remove(‘animation-feadin1’)
}
},
})
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation003’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation003’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation003’).classList.remove(‘animation-feadin1’)
}
},
})
});
ここから下の情報は不確定ややってもならなかったり、一部できたりなのであまり参考にはならないので注意
専務からの情報
「スクロールするとふわっとなる」
で検索すると、こんなのがありますが、
https://theorthodoxworks.com/web-design/scrollanimation/
テキストアニメーションテスト/index8.html
css3のアニメーションを使うとできる。
css3アニメーション ふわっとで下記見つかった。↑の意味についてわかる
https://web-ashibi.net/archives/1952
これだとPCはなるがスマホがならない!!↓
index8.html一連を参考サイトと照らしてまとめてみる
cssのソース
<style>
#animation {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #ff0000;
}
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
</style>
html
※このスクリプトはスクロールとアニメーション対応したやつ
<script>
$(function() {
$(‘#animation‘).css(‘visibility’,’hidden’);
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$(‘#animation‘).each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition – windowHeight + 100){
$(this).addClass(“fadeInDown“);
}
});
});
});
</script>
<div>
<p id=”animation”>ここの文字が現れる</p>
</div>
https://web-loid.net/web/scroll-effect-js/
https://beginners-high.com/scroll-display/
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>
CSS
.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;
}
アニメーション用外部のJS
$(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’
});
});
Lightbox2 bootstrap対応
lightbox
desktop/webウェブコンテンツツール/jQuery/Lightbox2 bootstrap対応/lightbox2
new-chance/building/
<!–Lightbox2–>
<link rel=”stylesheet” href=”lightbox2/css/lightbox.min.css”>
<script src=”lightbox2/js/lightbox.min.js”></script>
<div class=”col-md-4 col-6 mb-4″>
<a href=”../image/building/test4.png” data-lightbox=”group1″><img src=”../image/building/test4.png” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>
jQueryライブラリを使用して、テキストにアニメーション効果を簡単に実装する方法
textFx
work/テキストアニメーションテスト/text-anime-test/
参照サイトのtest.jsは左側にインデントが入っているためにそのままコピペしても動かない。参照サイトからコピペするならインデント箇所は削除する。
削除したもの↓
test.js
$(function() {
$(‘.test‘).textFx({
type: ‘fadeIn’,
iChar: 40,
iAnim: ‘3500’
});
});
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/test.js”></script>
<div class=”col-lg-12″ style=”text-align: center;”>
<span class=”test” style=”font-size: 50px;”>株式会社AMGSolution</span>
</div>
べつなやつ↓
textillate
公式サイトでエフェクトの様子が見れる
desktop/webコンテンツツール/テキストアニメーション-textillate/textillate
または、work/テキストアニメーションテスト/text-anime-test/内にある
https://www.plusdesign.co.jp/blog/?p=3372
https://liginc.co.jp/web/js/jquery/16661
<!–テキストアニメーション2–>
<script type=”text/javascript” src=”textillate/jquery.lettering.js”></script>
<script type=”text/javascript” src=”textillate/jquery.textillate.js”></script>
<script type=”text/javascript” src=”textillate/test2.js“></script>
<link href=”textillate/animate.css” rel=”stylesheet”>
■test2.js
$(function() {
$(‘.ef‘).textillate({
// ループのオンオフ、falseの場合、outは発動しない
loop: false,
// テキストが置き換えられるまでの表示時間
minDisplayTime: 2000,
// 遅延時間
initialDelay: 0,
// アニメーションが自動的にスタートするかどうか
autoStart: true,
// フェードインのエフェクトの詳細設定
in: {
// エフェクトの名前(animate.cssをご参照下さい)
effect: ‘fadeInLeftBig’,
// 遅延時間の指数
delayScale: 1.5,
// 文字ごとの遅延時間
delay: 50,
// trueにすることでアニメーションをすべての文字に同時に適用される
sync: false,
// trueにすることで文字を順番にではなく、ランダムに入ってくるようにする
// (注:syncがtrueの場合は無効になる)
shuffle: false
},
// フェードアウトのエフェクトの詳細設定(同上)
out: {
effect: ‘hinge’,
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
}
});
});
スクロールダウンして該当要素が見えたらアニメーションが発動するようにするにはどうしたらいいのかわからない。ページ読み込み時にイベントが発生する。
スクロールイベントの設定がわからん
■html
<div class=”col-lg-12″ style=”text-align: center;”>
<span class=”ef” style=”font-size: 50px;”>textillate textillate</span>
</div>
キワ化学工業
グランドナビをアニメーション付きのドロップダウンと、スマホは階層付きのハンバーガーメニューにしなたいと要望。
ナビについて
スマホからPCの階層付きナビとして
http://cm-creation.net/yoshida/localwork/?p=3728
を使えると思ってためしたのだが、padの横やPCなどで、liの項目数がたくさんあると多分css側でなってしまっているとおもうがナビ項目の文字がおりかえされてしまう。どうやっても解決できない。しかたないので上記の方法はバーガーメニューを表示させたいスマホからpad縦までとして実装する。
pcからpad縦については別のドロップダウンだけのナビとして実装。
http://cm-creation.net/yoshida/localwork/?p=3725
liの幅はクラスを別途つけてpxで調節。
全画面背景画像 スライド
メイン背景画像にjQuery.BgSwitcher を使って表示させようとしたら、ローカルでは全部の画像が表示されるがサーバーでは画像が何枚か表示されない?コンフリクト?って思ったが、画像名の拡張子と画像名が間違っていただけだった。(
※スライドが何枚か表示されないようなことが起こったら、画像の名前や拡張子がコピペでちがっていたり、画像名が違っていることを疑うこと
プルダウンとレスポンシブ ハンバーガーメニュー
【 https://blog.minimal-green.com/entry/sp-second-level-menu 】
プルダウンメニュー jquery
テキストアニメーション
厳密にはテキストアニメーションではなく、スライドショーの機能みたいだが、
スマホ対応 レスポンシブライトボックス fancyBox3
ゆくりえのラウンジで使用。 loung/index.html
desktop/webコンテンツツール/jQuery/レスポンシブスマホ対応ライトボックスfancybox-master
https://uzurea.net/explanation-of-fancybox3/
ダウンロードしたzipアーカイブを解凍し、/dist 中に格納されているファイルを使用します。
jquery.fancybox.min.js や、jquery.fancybox.mon.css など”min”が付いたものは改行などが除去されファイル容量が軽減されていますが、独自にコードをカスタマイズしたい場合にはminの無い方を利用した方が良いでしょう。
また、別途jQuery本体もダウンロードしておきましょう。
※jQuery3.x系に対応しているのでjQuery Migrateは不要です。
必要最低限の記述で『fancyBox3』を設置
動作に必要なHTMLの記述一式はは下記の通りです。
<!-- CSSを読み込み…… -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css">
<!-- オーバーレイさせる箇所のhtml記述…… -->
<figure>
<a href="image.jpg" data-fancybox data-caption="キャプションを記述">
<img src="thumbnail.jpg" alt="サムネイル画像" /></a>
</figure>
<!-- body最下部で関連JSファイルを読み込むのが推奨されています -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
<script>
$('[data-fancybox]').fancybox();
</script>
※jQueryを読み込んでから、jquery.fancybox.min.jsを読み込ませる必要があるのでjQuery本体を上に記述します。
※パスは適宜変更してください
head要素内でfancyBox3のcssを読み込み、body下部にてjQueryと、fancybox3の読み込みと、fancybox3の設定を記述する事が推奨されています。
これはページの読み込み速度や描画順に起因する様ですので、ソースコードをhead内にまとめてすっきりさせたい人はjQueryの呼び出し処理を下記の様にすると良いと思います。
<script>
$(document).ready(function() {
$('[data-fancybox]').fancybox();
});
</script>
複数の画像をグループ化させる
data-fancybox属性に共通項目を指定する事でグループ化させギャラリー表示が可能です。
<a href="image_1.jpg" data-fancybox="group" data-caption="image_1.jpgのキャプション">
<img src="thumbnail_1.jpg" alt="サムネイル画像1" /></a>
<a href="image_2.jpg" data-fancybox="group" data-caption="mage_2.jpgのキャプション">
<img src="thumbnail_1.jpg" alt="サムネイル画像2" /></a>
…
…
※data-fancybox=”group”の「group」は任意の値でOKです。
その他オプションなどについて
その他にも、各種設定をオプションで調整可能です。
下記のようにfancyboxの記述に含めていきます。
<script>
$(document).ready(function() {
$('[data-fancybox]').fancybox({
// オプションを下記に記載していきます
loop : true, // 複数画像表示時に最初と最後をループさせる
toolbar : false, // ツールバーの非表示
smallBtn : true, // 小さいCloseボタン利用する
iframe : { // iframe 関連の処理
preload : false //iframeのプリロードをしない
}
});
});
</script>
オプション名 | 初期値 | 概要 |
---|---|---|
loop | false | 複数画像表示時に最初と最後をループさせる |
margin | [44, 0] | 画像の周りのマージン ズームイン時、ビューポートが800px以下の場合は適応されない |
gutter | 50 | スライドとスライドの間の水平方向の間隔 |
keyboard | true | キーボードナビゲーションを有効にするか否か |
arrows | true | 画面端に矢印のナビゲーションを表示するか否か |
infobar | false | 上部にインフォメーションバーを表示するか否か |
toolbar | true | ツールバーを表示するか否か |
idleTime | 4 | スライド移動までの待機時間 |
smallBtn | auto | 右上Closeボタンを小さいタイプで表示するか否か |
protect | false | 右クリックを無効にするか否か |
modal | false | コンテンツをモーダル化するか否か |
animationEffect | zoom | 画像ズーム時のアニメーションの種類 false、zoom、fade、zoom-in-out |
animationDuration | 366 | ズーム時のアニメーションにかかる時間 |
zoomOpacity | auto | 画像クリック後のズームアニメーション自の透明度 |
transitionEffect | fade | スライド時のアニメーション効果の種類。 false、fade、slide、circular、tube、zoom-in-out、rotate |
transitionDuration | 366 | スライド時のアニメーションにかかる時間 |
slideClass | ” | スライド要素のカスタムCSSクラスを指定 |
baseClass | ” | レイアウトのためのカスタムCSSクラスを指定 |
parentEl | ‘body’ | コンテナの基準となる親要素 |
autoFocus | true | ズーム実行時にフォーカス可能要素に自動的にフォーカスするか否か |
backFocus | true | ズームを閉じたとき、それまでのページの フォーカス可能な要素にフォーカスするか否か |
trapFocus | true | ズーム要素外にフォーカスさせるか否か |
hash | null | ズーム時にURLに特定のハッシュタグをつける場合に指定 |
clickSlide | close | 画像をクリックした時の挙動についての設定 |
clickOutside | close | 画像以外をクリックした時の挙動についての設定 |
dblclickSlide | false | 画像をダブルクリックした時の挙動についての設定 |
dblclickOutside | false | 画像以外をダブルクリックした時の挙動についての設定 |
ゆくりえ ラウンジでのコード
<!– InstanceBeginEditable name=”head” –>
<link rel=”stylesheet” type=”text/css” href=”../css/jquery.fancybox.css”>
<!– InstanceEndEditable –>
<div class=”container-fluid area1″>
<div class=”container”>
<div class=”row justify-content-center mb-5″>
<script src=”../js/jquery.fancybox.min.js”></script>
<script>
$(document).ready(function() {
$(‘[data-fancybox]’).fancybox({
// オプションを下記に記載していきます
loop : true, // 複数画像表示時に最初と最後をループさせる
toolbar : false, // ツールバーの非表示
smallBtn : true, // 小さいCloseボタン利用する
iframe : { // iframe 関連の処理
preload : false //iframeのプリロードをしない
}
});
});
</script>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item5b.jpg” data-fancybox=”group”><img src=”../image/lounge/item5s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item6b.jpg” data-fancybox=”group”><img src=”../image/lounge/item6s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item7b.jpg” data-fancybox=”group”><img src=”../image/lounge/item7s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item8b.jpg” data-fancybox=”group”><img src=”../image/lounge/item8s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item9b.jpg” data-fancybox=”group”><img src=”../image/lounge/item9s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item10b.jpg” data-fancybox=”group”><img src=”../image/lounge/item10s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item11b.jpg” data-fancybox=”group”><img src=”../image/lounge/item11s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item12b.jpg” data-fancybox=”group”><img src=”../image/lounge/item12s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item13b.jpg” data-fancybox=”group”><img src=”../image/lounge/item13s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item14b.jpg” data-fancybox=”group”><img src=”../image/lounge/item14s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item15b.jpg” data-fancybox=”group”><img src=”../image/lounge/item15s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item16b.jpg” data-fancybox=”group”><img src=”../image/lounge/item16s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
</div>
</div>
</div>
背景画像をスライドショーやフェードで切り替える jQuery.BgSwitcher
https://fit-jp.com/bgswitcher/
desktop/webコンテンツツール/jquery/jquery.bgswitcher.js
ダウンロード
jQuery.BgSwitcherのサイトからjquery.bgswitcher.jsをダウンロードすることができます。
使い方(デフォルト設定)
- <div class=“bg-slider”>
- <h1 class=“bg-slider__title”>BGSWITCHER DEMO PAGE</h1>
- </div>
- .bg–slider {
- width: 100vw;
- height: 100vh;
- background–position:center center;
- background–size: cover;
- display: flex;
- align–items: center;
- justify–content: center;
- }
- .bg–slider__title{
- color: #fff;
- font–size: 48px;
- line–height: 1.5;
- font–weight: bold;
- text–align:center;
- text–shadow: 1px 1px 1px #000;
- }
- <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js”></script>
- <script src=“js/jquery.bgswitcher.js”></script>
- <script>
- jQuery(function($) {
- $(‘.bg-slider’).bgSwitcher({
- images: [‘img/bg1.jpg’,‘img/bg2.jpg’,‘img/bg3.jpg’], // 切り替える背景画像を指定
- });
- });
- </script>
上記のようにjQuery本体(上記の例ではGoogleのCDNを利用しています)とjQuery.BgSwitcherのサイトでダウンロードしたjquery.bgswitcher.jsを必ず読み込んでください。
DEMO(デフォルト)
使い方(カスタマイズ)
- htmlとcssは上記と同じです。
- <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js”></script>
- <script src=“js/jquery.bgswitcher.js”></script>
- <script>
- jQuery(function($) {
- $(‘.bg-slider’).bgSwitcher({
- images: [‘img/bg1.jpg’,‘img/bg2.jpg’,‘img/bg3.jpg’], // 切替背景画像を指定
- interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
- loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない
- shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する false=しない
- effect: “blind”, // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
- duration: 500, // エフェクトの時間を指定します。
- easing: “swing” // エフェクトのイージングをlinear,swingから指定
- });
- });
- </script>
上記は背景画像の切り替え時間をデフォルトよりも2秒短くして、画像の切り替え順をシャッフルにしています。またエフェクトの種類を「blind」に変更し、エフェクトの効果時間を0.5秒短くしています。その他のカスタマイズ方法に関しては下記の表をご確認ください。
DEMO(カスタマイズ)
設定
キー | 初期値 | 説明 |
---|---|---|
images | [] | 切り替える背景画像を配列で指定 |
interval | 5000 | 切り替えの間隔 |
start | true | $.fn.bgswitcher(config) をコールした時に切り替えを開始する |
loop | true | 切り替えをループする |
shuffle | false | 背景画像の順番をシャッフルする |
effect | fade | エフェクトの種類 |
duration | 1000 | エフェクトの時間 |
easing | swing | エフェクトのイージング |
今回は画面領域最大で背景画像を切り替える例を紹介しましたが、width: 980px; height: 400px;などと設定して動かすこともできます。
表にある要素は固定で、裏で背景画像をスライドさせいたときなどには、この「jQuery.BgSwitcher」を使用することをお勧めいたします。