スクロール表示
モーダルポップアップを作ります
・参照のモーダル>>
・オーバーレイ
■現状
<div class="submit_btn_one">
<input type="button" class="good_btn" value="いいね">
</div> |
inputの部分にclassを指定して、使えるようにしたい。
<div class="footer_icon_area01a">
<p><a href="#good" class="modal001"><img src="../img/btnf_okiniiri.png" alt="お気に入り"/></a></p>
</div><!-- footer_icon_area01 end--> |
■スクリプト
<script>
$('.modal001').on('click', function () {
//.modalについたhrefと同じidを持つ要素を探す
var modalId = $(this).attr('href');
var modalThis = $('body').find(modalId);
//body下にmoda_backを作る
$('body').append('<div id="moda_back"/>');
var wrap = $('#moda_back'); wrap.fadeIn('200');
modalThis.fadeIn('200');
//モーダルの高さを
function modalHeight() {
var wh = $(window).innerHeight();
var attH = modalThis.find('.modal_good').innerHeight();
modalThis.css({ height: attH });
}
modalHeight();
$(window).on('resize', function () {
modalHeight();
});
function clickAction() {
modalThis.fadeOut('200');
wrap.fadeOut('200', function () {
wrap.remove();
});
} |
【やりたい事】
・ボタンをクリックする
・背景が黒い画面が出る
・ポップアップ |
<div class="block_message modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content">
<p align="center" class="message03">ブロックしますか？</p>
<p class="message04">あなたと相手の画面に表示されなくなります。ブロックは解除することができません。</p>
<ul>
<li><a href="#" class="js-modal-close">キャンセル</a></li>
<li><a href="#">ブロックする</a></li>
</ul>
</div><!--modal__content end -->
</div><!--modal__bg js-modal-close end -->
|
非表示を
<script>
$(function(){
$('.block').on('click',function(){//blockをクリックしたら
$('.js-modal').fadeIn();//ゆっくりオープンさせる
return false;
});
$('.js-modal-close').on('click',function(){//クローズ部分をクリックしたら、ゆっくり閉じる
$('.js-modal').fadeOut();
return false;
});
});
</script>
|
■2秒後に消える
setTimeout(clickAction, 2000); return false;
■要素の時間差フェードイン
■デモ
https://web-emo.com/jquery-scroll-fadein-each/
https://tech.brick-plan.jp/fade/fade-pattern01/
■解説
https://qumeru.com/preview/JavaScript/339/sample/index.html
・スクロールの原理を解説
https://chaika.hatenablog.com/entry/2016/08/19/211516
バウンドサンプル
https://blow-in.net/blog/entry-1901.html
デモ1
フェーダーデモ
左から右に、でてくる。JSでかくと、なんだか遅いかな・・・
【js部分】
<script>
var delaySpeed = 300;
$(window).on("load scroll", function (){
$(".fade_trigger1 .element").each(function(i){
var element = $(".fade_trigger1").offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > element - windowHeight + windowHeight / 5){
$(this).delay(i*(delaySpeed)).queue(function(){
$(this).stop(true, true).animate( { opacity: 1 }, {
duration: 700,
step: function (now) {
var dist = 70 - (70 * now);
$(this).css({ transform: 'translateY(' + dist + 'px)' });
}
});
});
}
});
});
</script> |
【css】
.fade_image {
display: flex;
margin: 0 0 3em;
}
.fade_image img {
width: 24%;
height: auto;
margin: 0 8px 0 0;
}
.fade_image img:last-child {
margin: 0;
}
.element {
opacity: 0;
}
@media screen and (max-width: 640px) {
.fade_image {
flex-wrap: wrap;
flex-direction: column;
}
.fade_image img {
width: 100%;
margin: 0 0 10px 0;
}
.fade_image img:last-child {
margin: 0;
}
}
|
JSだけで処理すると、カク付くような気がします。
cssのトランジッションなどを利用して、作った方が、綺麗に動くようです。
デモ2
これで完成です。色々やりましたが、これでいけそうです。こちらはJqueryで書いてある。「.delay」遅延を使います。画像の位置をアニメーションでずらします。
サンプル>>
【html】
<div class="fade_in_test">
<p class="fade_in_sub"><img src="../img/women/nanami01.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
</div> |
【script】
$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
var position = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > position - windowHeight + 200){
$(function(){
$('.fadein').each(function(i){
$(this).delay(i * 200).queue(function(){
$(this).addClass('active');
});
});
});
}
});
});
});
|
fadeinを0.2秒ごとにつけています。
【css】
.fade_in_test{
width: 100%;
display: flex;
}
.fade_in_sub{
width: 30%;
margin: 0 10px;
}
.fadein {
opacity : 0;
transition : all 1s;
}
.fadein.active{
opacity : 1;
} |
参照>>
デモ3
【html】
<div class="fade_in_test">
<p class="fade_in_sub"><img src="../img/women/nanami01.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
</div> |
画像のクラスにfadeinをつけておく。
【スクリプト】
<script>
// スクロールフェードイン
$(function () {
$(window).scroll(function () {
$(".effect-fade").each(function () {
var elemPos = $(this).offset().top; /* 要素の位置を取得 */
var scroll = $(window).scrollTop(); /* スクロール位置を取得 */
var windowHeight = $(window).height(); /* 画面幅を取得（画面の下側に入ったときに動作させるため） */
if (scroll > elemPos - windowHeight) {
/* 要素位置までスクロール出来たときに動作する */
$(this).addClass("effect-scroll");
}
});
});
jQuery(window).scroll();
});
</script>
|
【css】
.fade_in_test{
width: 100%;
display: flex;
}
.fade_in_sub{
width: 30%;
margin: 0 10px;
}
.fadein {
opacity : 0;
transition : all 1s;
}
.fadein.active{
opacity : 1;
} |
ワンポイント
表示方法が、もっと書き方があるような気がします。お役に立ちましたら、仕事のご依頼してください（笑
。
ウェブサイト、システム開発いたします。ぜひご依頼くださいませ。
この記事を読んだ人は、こんな記事も読んでいます
