NetPaper
mie
コメントはまだありません
編集: 承認: 削除: 迷惑: 返信:
コメントを残す
コメントするにはログインしてください。
簡単なアクションなどJavascriptの基礎を教えます。
動画のサイトのテキスト表示は以下のようになっています。（抜粋したものですので全く同じではありません。）
株式会社 ファイヴ ドット オン公式 https://five-on.com/
※トップページを表示するたびにアニメーションが動くとかえって邪魔になるので1度最後まで動作したら2度目からはアニメーションは動きません。
お互いのスケジュールに調整がつけばMEET等でもご相談可能です。ご希望の場合はFollowとコメントでお知らせくださればMessagesでご返信いたします。
<script>
(function($) {
/**
* Get data from session storage.
* @param {string} key Session storage item key.
* @return {object}
*/
const getSessionStorage = (key) => {
return JSON.parse(sessionStorage.getItem(key)) || {};
};
/**
* Set data to session storage.
* @param {string} key Session storage item key.
* @param {object} data Data object to set.
* @return {object}
*/
const setSessionStorage = (key, data) => {
if (key && data) {
sessionStorage.setItem(key, JSON.stringify(data));
return getSessionStorage(key);
}
};
/**
* Animation function.
* @param {string} Clone target selector.
* @return {Promise<object>} Promise object with boolean.
*/
const topAnimation = (selector) => {
selector = selector || '.isFrontPage';
$('body, html').addClass('stopScroll');
const targetElm = $(selector);
const elm = targetElm.clone();
const clientRect = $('.isFrontPage h1')[0].getBoundingClientRect()
const y = clientRect.top ;
elm.addClass('animationModal');
const siteNameElm = elm.find('.siteName');
const siteLogoElm = elm.find('.siteLogo');
const wrapElm = $('<div class="animationWrap" />');
wrapElm.append(siteNameElm, siteLogoElm);
elm.append(wrapElm);
$('body').append(elm);
const str = siteNameElm.text().split('');
siteNameElm.text('');
siteLogoElm.hide();
elm.find('.siteName').text('')
elm.css({'width': '100vw', 'height': '100vh'}).show();
let multiplicateNum = 5;
return new Promise((resolve, reject) => {
const typewriter = (siteNameElm, strArray) => {
if (strArray.length) {
const str = strArray.shift();
const duration = (str === ' ' || str === ' ') ? 200 : 100;
setTimeout(function () {
multiplicateNum = 1;
siteNameElm.append(str);
typewriter(siteNameElm, strArray);
}, duration * multiplicateNum);
} else {
siteLogoElm.fadeIn(3000, () => {
wrapElm.animate({'top': y, 'left': 0}, 1000, () => {
elm.fadeOut(1000, () => {
elm.remove();
$('body, html').removeClass('stopScroll');
return resolve(true);
});
});
});
elm.animate({'background': 'rgba(255,255,255,0)'}, 3000);
}
};
typewriter(siteNameElm, str);
// Cancel on resize
$(window).one('resize', function () {
elm.hide().remove();
$('body, html').removeClass('stopScroll');
return resolve(false);
});
});
};
// Top page animation
let sessionFiveOn = {};
if ($('.isFrontPage').length) {
// Get sessionStorage data
if ('sessionStorage' in window) {
sessionFiveOn = getSessionStorage('fiveon');
if (!sessionFiveOn.onAnimation) {
topAnimation().then((result) => {
if (result) {
sessionFiveOn = setSessionStorage('fiveon', {'onAnimation': true});
}
});
}
} else {
sessionFiveOn = {'onAnimation': true};
}
}
})(jQuery);
</script>