.htaccessでPHPのファイルアップロードサイズの上限値を変更
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
jQueryを使用したページスクロールアクション(パララックス)の一つ。
対象コンテンツの直前で、コンテンツ(ボタン)を左右交互にスライドインで表示させる方法のメモ。
<section class="sample">
<ul class="sample__slide__list">
<li class="sample__slide__list__item"><a href="">リンクボタン01</a></li>
<li class="sample__slide__list__item"><a href="">リンクボタン02</a></li>
<li class="sample__slide__list__item"><a href="">リンクボタン03</a></li>
<li class="sample__slide__list__item"><a href="">リンクボタン04</a></li>
</ul>
</section>
.sample {
overflow: hidden;
}
.sample__slide__list__item {
width: 100%;
background: rgba(0, 0, 0, 1);
position: relative;
z-index: 0;
overflow: hidden;
opacity: 0;
}
.sample__slide__list__item:nth-of-type(2n+1) {
margin-left: 100vw;
}
.sample__slide__list__item:nth-of-type(2n) {
margin-left: -100vw;
}
.sample__slide__list__item:nth-of-type(n+2) {
margin-top: 1px;
}
.sample__slide__list__item::before {
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: 0.77;
}
.sample__slide__list__item:nth-of-type(1)::before {
background: #f00;
}
.sample__slide__list__item:nth-of-type(2)::before {
background: #f00;
}
.sample__slide__list__item:nth-of-type(3)::before {
background: #f00;
}
.sample__slide__list__item:nth-of-type(4)::before {
background: #f00;
}
.sample__slide__list__item a {
display: block;
width: auto;
padding: 40px 0;
font-weight: bold;
text-align: center;
color: #fff;
}
表示範囲の大枠を「overflow: hidden;」に設定することで、スマホでもレイアウトを崩すことなく表示できる。
$(window).scroll(function(){
var sH = window.innerHeight * 2 / 3;
var offsetTop = $(window).scrollTop();
if(offsetTop > $('.sample').offset().top - sH){
$('.sample__slide__list__item').each(function(i){
//250ミリ秒×並び順(i番目)の待機後アニメーションを実行
$(this).stop().delay(i * 250).animate({'opacity':'1.0', 'margin-left':'0'}, 250 ,'swing');
});
}
})
sHの値でファンクションのトリガー(発動位置)を設定。
参考例は対象コンテンツの上位置から使用ブラウザの画面高さの2/3を引いた位置で設定。
each関数で「sample__slide__list__item」の個数分、括弧内の処理を実行。
delay関数はアニメーション実行までの待機時間。
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
2020.10.3
テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを…
2024.03.30
外部ファイル(CSVファイル等)を読み込んでサイト内に表示する際に、保存時の文字コードが…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2023.12.2
ワードプレスの投稿のカテゴリー機能を、目的ごとに使い分けたいというご要望があった際に、カ…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
2022.09.24
パソコンやスマートフォンの戻るボタンを使って画面を戻す(ブラウザバックする)時があります…
2019.12.29
メールフォーム等での入力値チェック(バリデーション)。PHPの「preg_match」(…
2022.02.19
画像データ等をサーバーにアップロードする際、一点づつアップロードしても良いけれど、ファイ…
2020.08.15
フォームの入力値やURLのパラメータ等、文字列や数値を受け取る際に正規表現を利用してバリ…
時間を指定して表示を切り替える際にPHPを使用することが多かったのだけれど、利用している…
ホームページへ動画を組み込む際に、動画が設置されているところまでスクロールして、表示され…
フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途…