/* フェードイン時のスタイル */
.fade-block {
opacity: 0;
transform: translateY(45px);
transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;
&.active {
opacity: 1;
transform: translateY(0);
}
}
/* ここはただの箱のスタイル */
header,
.inner,
footer {
display: flex;
justify-content: center;
align-items: center;
font-family: "Nico Moji";
font-size: 40px;
font-weight: bold;
letter-spacing: 0.075em;
box-sizing: border-box;
}
header,
footer {
background: #32a238;
color: #fff;
}
header {
height: 100px;
}
footer {
height: 150px;
transform: translateY(0) !important;
}
.inner {
height: 300px;
margin: 50px;
padding: 20px;
border: 1px solid #32a238;
color: #32a238;
}
View Compiled
(function(window, $) {
'use strict';
// Set Namespace
var APP = (window.APP = window.APP || {});
APP.SetFadeBlock = function($elm) {
var that = this;
that.$elm = $elm;
that.offset = 0.8;
that.ACTIVE = 'active';
that.fade();
$(window).on('scroll resize', function() {
that.fade();
});
};
APP.SetFadeBlock.prototype = {
fade: function() {
var that = this;
var st = $(window).scrollTop();
var wh = $(window).height();
var targetPoint = that.$elm.offset().top - parseInt(that.$elm.css('transform').match(/[0-9]+/g)[5]);
var startPoint = Math.floor(targetPoint - wh * that.offset);
var endPoint = Math.floor(targetPoint + wh * (1 - that.offset));
if (
st >= startPoint &&
st <= endPoint &&
!that.$elm.hasClass(that.ACTIVE)
) {
setTimeout(function() {
that.$elm.addClass(that.ACTIVE);
}, 100);
}
}
};
$(function() {
$('.fade-block').each(function() {
new APP.SetFadeBlock($(this));
});
});
})(window, jQuery);