.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等)をアップロードするフォームを作成した際に、ファイル…
2022.02.12
ワードプレスを使用して運用されているサイトで投稿した記事を検索したい(サイト内検索)とい…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
2020.10.31
WordPress(ワードプレス)を使ってサイトを作る際に、既に別サイト(同一サーバー内…
管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能…
ホームページ内に動画を掲載する場合、youtube等のサービスを利用する場合は問題ないの…
ホームページ内でスクロールバーを使用する場合、特に設定がなければ左上を基準に表示されます…