東京マラソン2017年のキャンペーンサイト
http://pocarigirl.jp/
トップページ、当日準備、レース本番、ムービー、ポカリ説明の５ページ
スクロールしてコンテンツ閲覧という感じで、jQuary系のアクション多数。
早速ソース確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="東京サプライ少女,ポカリガール,東京マラソン,ポカリスエット,ポカリ,pocari sweat,pocari,ランナー,サプライ,ポカリチャージ,サーフライン,箭内夢菜,大塚製薬">
<meta name="description" content="ちと長いので省略">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<!-- ogp -->
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta property="og:title" content="東京サプライ少女2017│東京マラソン2017オフィシャルドリンク ポカリスエット">
<meta property="og:description" content="ちと長いの省略">
<meta property="og:url" content="http://pocarigirl.jp/">
<meta property="og:site_name" content="東京サプライ少女2017│東京マラソン2017オフィシャルドリンク ポカリスエット">
<meta property="og:image" content="http://pocarigirl.jp/images/og_image.jpg">
<!-- ogp -->
<title>東京サプライ少女2017│東京マラソン2017オフィシャルドリンク ポカリスエット</title>
<script type="text/javascript" src="/lib/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="/lib/velocity.min.js"></script>
<script type="text/javascript" src="/js/pocarigirl.js"></script>
<script type="text/javascript" src="/js/top.js"></script>
<link rel="stylesheet" type="text/css" href="/css/common.css">
<link rel="stylesheet" type="text/css" href="/css/top.css">
<link rel="stylesheet" type="text/css" href="/css/modal.css">
<script>
<meta name=”description” content=””>
<meta property=”og:description” content=””>
はともに、
”2017年から新コースになる東京マラソン。新コースを走るすべてのランナーに向けて、当日の準備からゴールまで、役立つポイントをポカリガールがアドバイス！冬のランナーの渇きを潤しながら、東京マラソンのポイントを楽しくアドバイス、“完走”サポートに全力を注ぎます。”
<script type="text/javascript" src="/lib/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="/lib/velocity.min.js"></script>
<script type="text/javascript" src="/js/pocarigirl.js"></script>
<script type="text/javascript" src="/js/top.js"></script>
やはり３．Ｘは使うところ少ない。
Velocity.js
pocarigirl.jsはＳＮＳ
!function (t) {
t(function () {
var n = {functions: {sns: {init: function () {
var n = location.href, i = document.title, r = "https://www.facebook.com/sharer/sharer.php?u=" + n;
t(".sns__facebook").attr("href", r);
var o = "https://twitter.com/share?text=" + i + "&url=" + n;
t(".sns__twitter").attr("href", o)
}}},
init: function () {
n.functions.sns.init()
}};
n.init()
})
}(jQuery);
続けて、GoogleAnalyticsのタグ
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73042012-1', 'auto');
ga('send', 'pageview');
</script>
<script>
var userAgent = window.navigator.userAgent.toLowerCase(),
isUserAgent = function(v){ return userAgent.indexOf(v)>-1; };
if (
isUserAgent('iphone') ||
isUserAgent('ipad') ||
isUserAgent('ipod') ||
isUserAgent('android')
) {
location.href = '/sp/';
}
</script>
<div class="loading">
<div class="loading__inner">
<svg class="pocari-logo" xmlns="http://www.w3.org/2000/svg" width="172" height="100" viewBox="0 0 172 100">
<svg class="pocari-logo__txt" x="5.3" width="161.312" height="53.875" viewBox="0 0 161.312 53.875">
<path d="M718.791,311.561v24.757h-6.922V311.561h6.922Zm-150.147.062H558.368v24.762h6.78v-9.431h5.24c5.543,0,8.353-2.617,8.353-7.778,0-5.223-2.731-7.553-10.1-7.553m0,10.891h-3.5l0-6.54h3.865a2.909,2.909,0,0,1,3.22,3.145A3.307,3.307,0,0,1,568.644,322.514ZM598.32,311.15c-7.73,0-12.529,4.911-12.529,12.821,0,8.087,4.431,12.729,12.157,12.729,7.643,0,12.206-4.847,12.206-12.955s-4.2-12.6-11.834-12.6m-0.186,21.124c-3.627,0-5.791-3.069-5.791-8.21,0-8.033,4.4-8.662,5.742-8.662,1.993,0,5.336,1.121,5.336,8.618C603.421,329.184,601.445,332.274,598.134,332.274Zm20.387-7.933c0-8.281,4.646-13.228,12.43-13.228,6.113,0,9.954,3.027,10.192,7.909h-6.632a3.858,3.858,0,0,0-4.107-3.3c-2.609,0-5.241,2.483-5.241,8.025,0,7.42,3.227,8.529,5.15,8.529,2.585,0,4.042-1.27,4.475-3.851h6.72c-0.24,5.193-4.338,8.411-10.871,8.411C625.109,336.834,618.521,334.666,618.521,324.341Zm45.332-12.8h-7.42c-0.227.556-9.517,23.561-10,24.762h6.242c0.193-.545,1.8-5.036,1.8-5.036h10.635s1.569,4.487,1.762,5.036h7.15c-0.494-1.205-9.94-24.21-10.166-24.762m-7.785,15.375,3.841-10.75,3.761,10.75h-7.6Zm44.368,3.595c0-6.192-4.3-6.737-4.3-6.737s4.958-.137,4.855-6.226c-0.075-4.125-1.683-6.088-10.879-5.986H680.2v24.757h6.689v-9.664h4.042c2.552,0,2.9,2.341,2.9,4.861a8.78,8.78,0,0,0,1.345,4.8h6.7a13.886,13.886,0,0,1-1.448-5.808m-9.454-8.456h-4.091v-6.082l4.229,0.011c2.692,0,3.454,1.353,3.454,2.812C694.574,320.585,694,322.054,690.982,322.054ZM571.8,357.636c0-2.405-3.007-3.111-5.917-3.793-4.081-.954-7.857-2.493-7.857-7.238,0-4.2,4.082-7.369,9.494-7.369,4.016,0,6.89.836,8.537,2.491a6.59,6.59,0,0,1,1.7,4.89v0.022h-6.519a3.054,3.054,0,0,0-3.4-3.3c-1.84,0-3.175,1.084-3.175,2.576,0,2.223,2.053,2.758,6.548,3.929,3.9,1.012,7.411,2.325,7.411,7.2,0,4.832-4,7.957-10.186,7.957-7.205,0-10.782-2.772-10.976-8.412h6.46c0.169,2.578,1.715,4.166,4.149,4.166C570.268,360.755,571.8,359.472,571.8,357.636Zm32.461-12.514-5.323,19.286h-7.229l-7.387-24.764h6.891l4.513,18.39,4.538-18.424h8m0,0,4.538,18.424,4.513-18.39H624.2l-7.387,24.764h-7.226l-5.325-19.286m44.11-5.455v4.292h-10.6v5.322h9.779v4.431h-9.779v5.924h10.924v4.79H631.117V339.667H648.37Zm23.7,0.059h-7.42c-0.225.556-9.516,23.558-10,24.762h6.241l1.8-5.037h10.638s1.569,4.484,1.763,5.037h7.148l-10.168-24.762m-7.827,15.549,3.84-10.745,3.76,10.745h-7.6Zm41.246-15.608v4.7h-7.715v20.058h-6.555V344.368h-7.85v-4.7h22.12Z" transform="translate(-557.469 -311.125)"/>
</svg>
<svg class="pocari-logo__mark" y="60" width="172" height="36.75" viewBox="-55 190.5 172 39.7">
<path d="M117,193.4c-31.9,7.8-57.3,10.2-88.1,3.4c-39.4-8.7-53.2-7.9-83.9,0c20.7-1.6,34.4,3,64.5,15.2
c31.7,12.8,62.7,19.6,107.5,11.2V193.4z"/>
</svg>
<svg y="60" width="172" height="36.75" viewBox="-55 190.5 172 39.7">
<rect id="logo_bar" class="mask" x="-55" y="190.5" width="0" height="40" clip-path="url(#clip)" />
<clipPath id="clip">
<path id="logo_txt.svg" d="M117,193.4c-31.9,7.8-57.3,10.2-88.1,3.4c-39.4-8.7-53.2-7.9-83.9,0c20.7-1.6,34.4,3,64.5,15.2
c31.7,12.8,62.7,19.6,107.5,11.2V193.4z"/>
</clipPath>
</svg>
</svg>
</div>
</div>
