layout: blank
<script>
function mousePosition(ev) { ev = ev || window.event; if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } $(document).ready(function () { $(function () { //鼠标在未被遮挡的位置: $(".v-section").mousemove(function (e) { //获取鼠标位置函数 var mousePos = mousePosition(e); var xOffset = 0; var yOffset = 25; $(".v-section-cover").css("width", ((mousePos.x + xOffset) / $(".v-section").width()) * 100 + "%"); }); //鼠标离开未被遮挡位置 $(".v-section").mouseout(function () { // $("#tooltip").empty(); // $("#tooltip").css("display","none"); }); ////////////////////////////////////////////////////////////// //鼠标在被遮挡的位置: $(".v-section-cover").mousemove(function (e) { var mousePos = mousePosition(e); var xOffset = 0; var yOffset = 25; $(".v-section-cover").css("width", ((mousePos.x + xOffset) / $(".v-section").width()) * 100 + "%"); // console.log((mousePos.x) / $(".v-section").width()); }); //鼠标离开被遮挡位置 $(".v-section-cover").mouseout(function () { // $("#tooltip").empty(); // $("#tooltip").css("display","none"); }); }); });
</script>
<body class=“home blog lang-ja footer_mt”>
<section class="v-section" style="background-image: url({{ page.cover_before}})"> </section> <section class="v-section-cover" style="background-image: url({{ page.cover_after}})"></section> <p class="down-arrow">↓↓↓</p> {% if page.title != false %} <section class="home-message js-fadein" style="padding:0;"> <div> <div class="home-message__ttl" style="margin-top:10px"> <h2>{{ page.title }}</h2> </div><!-- .home-message__ttl --> <div class="container"> <div class="row"> {% for paragraph in page.description %} <div class="col-sm"> <p class="u-txt__label"> {{ paragraph }} </p> </div> {% endfor %} </div> </div> <div class="home-message__ttl"> <h2></h2> </div><!-- .home-message__ttl --> <div class="home-message__ttl" id="whiteline"> <h2 id="white"></h2> </div><!-- .home-message__ttl --> <section style="height: 20vh;display: flex;align-items: center;justify-content: center;"> <button type="button" class="btn btn-light btn-lg" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location.href='{{page.download_url}}'"> Download </button> </section> </div> </section> {% endif %} <!--<section class="f-section" id="sec2"> </section>--> {% if page.derivation != false %} <section class="v-section-70" style="background-image: url(.{{ page.derivation_img}})"> <section class="home-message js-fadein"> <div> <div class="home-message__ttl" id="whiteline"> <h2 style="color: white !important;">DERIVATION</h2> </div><!-- .home-message__ttl --> <div class="container"> <div class="row"> {% for paragraph in page.derivation %} <div class="col-sm"> <p class="u-txt__label" > {{ paragraph }} </p> </div> {% endfor %} </div> </div> <div class="home-message__ttl" id="whiteline"> <h2></h2> </div><!-- .home-message__ttl --> </div> </section> </section> {% endif %} {% for sample in page.samples %} <section class="home-message js-fadein"> <div class="album"> <h2 class="u-ttl__02 u-ttl__dot">{{ sample.title }}</h2> <p class="u-txt__label">{{sample.subtitle}}</p> </div> <img class="album" src="{{sample.img_url}}"> <p class="u-txt__label" style="text-align: right;">{{sample.img_text}}</p> </section> {% endfor %} <section style="text-align: center;"> <button type="button" class="btn btn-outline-light btn-lg" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location.href='{{page.download_url}}'"> Download </button> </section>
</body>