.htaccessでPHPのファイルアップロードサイズの上限値を変更
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
「欅BodyTherapistSchool」の制作に携わった際に使用したスライドショウの実装方法をメモ。
拡大しながらのフェードインなので、画像を切り替えるのみよりも躍動感が感じられる。
<figure id="mainimage">
<ul class="swiper-slide">
<li class="active"><img src="画像URL"></li>
<li><img src="画像URL"></li>
<li><img src="画像URL"></li>
</ul>
<div class="inner">
<h2>キャッチコピーを記載/h2>
</div>
</figure>
<script>
$(function(){
slideSwitch();
setInterval("slideSwitch()", 9500 );
//9500は次の画像に切り替わるまでのミリ秒
});
</script>
#mainimage{
width: 100%;
height: 80vh;
margin: 0 0 30px;
position: relative;
overflow: hidden; }
#mainimage .swiper-slide{
width: 100%;
height: 80vh;
position: absolute;
overflow: hidden; }
#mainimage .swiper-slide li{
background: #fff;
width: 100%;
height: 80vh;
position: absolute;
top: 0;
left: 0; }
#mainimage .inner{
margin: 20vh 0 0 50%;
color: #fff;
position: relative;
z-index: 10; }
#mainimage .swiper-slide li img{
width: 100%;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0; }
#mainimage .swiper-slide li.active{
z-index:9; }
#mainimage .swiper-slide li.last-active{
z-index:8; }
#mainimage .swiper-slide li::before{
background: url(../image/top/mask.png);
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1; }
function slideSwitch(){
var $active = $('#mainimage ul li.active');
if($active.length == 0 ) $active = $('#mainimage ul li:last');
var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first');
if($(window).width() >= 980){
$active.animate({'width':'110%', 'left':'-5%'}, 7000).delay(1000).queue(function(){
$active.find('img').animate({'opacity':'0'}, 1000, function(){
$active.addClass('last-active');
$next.addClass('active');
$active.find('img').css({'opacity':'1.0'});
$active.removeClass('active last-active').css({'width':'100%', 'left':'0'}).dequeue();
});
});
}else{
$active.animate({'height':'70vh', 'top':'-5vh'}, 7000).delay(1000).queue(function(){
$active.find('img').animate({'opacity':'0'}, 1000, function(){
$active.addClass('last-active');
$next.addClass('active');
$active.find('img').css({'opacity':'1.0'});
$active.removeClass('active last-active').css({'height':'60vh', 'top':'0'}).dequeue();
});
});
}
}
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
2022.02.12
ワードプレスを使用して運用されているサイトで投稿した記事を検索したい(サイト内検索)とい…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2020.10.3
テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能…
ホームページ内に動画を掲載する場合、youtube等のサービスを利用する場合は問題ないの…
ホームページ内でスクロールバーを使用する場合、特に設定がなければ左上を基準に表示されます…