-
お待たせいたしました！
HTMLとCSSを下記コードに変更お願いします！
既存の記述をすべて消した上でペーストしてください！
———-【HTML】———-
<script>
var sbScrollRevealEnqueteWithRevealHiddenCase = sbScrollRevealEnqueteWithRevealHiddenCase || {};
(function(_) {
const classes = {
target: ‘.js-scroll-reveal-enquete-with-reveal’,
questionItem: ‘.questionArea’,
revealArea: ‘.js-reveal’,
}
const setting = {
duration: 600,
}
_.scrollTo = function(end, duration) {
const startTime = Date.now()
const easeOut = (p) => p * (2 – p)
const start = window.pageYOffset
const range = end – start
let position = 0
var move = function() {
const elapsedTime = Date.now() – startTime
const progress = elapsedTime / duration
position = start + range * easeOut(progress)
if (progress < 1) {
window.scrollTo(0, position)
requestAnimationFrame(move)
} else {
window.scrollTo(0, end)
return
}
}
requestAnimationFrame(move)
}
_.setEnquete = function(el) {
const revealArea = el.querySelector(classes.revealArea)
let linkBoxAll = Array.from(el.querySelectorAll(classes.questionItem))
el.addEventListener(‘change’, function(e) {
let checkedLength = 0;
let self = e.target
let current = self.closest(classes.questionItem)
let currentNo = Array.prototype.indexOf.call(linkBoxAll, current)
let next;
let scrollPoint = false;
let noScroll = current.classList.contains(“no-scroll”) ? true : false;
current.classList.remove(‘not-checked’);
const hiddenImages = current.querySelectorAll(‘.hidden-image’);
hiddenImages.forEach((img) => {
img.style.display = ‘none’;
if (img.dataset.sid == self.dataset.show) {
img.style.display = ‘block’;
noScroll = true;
}
});
linkBoxAll.forEach(function(linkBox) {
if (linkBox.querySelector(‘input:checked’)) checkedLength++;
})
if (checkedLength === linkBoxAll.length) {
revealArea.classList.remove(‘is-hidden’)
scrollPoint = revealArea.getBoundingClientRect().top + window.pageYOffset
} else if (linkBoxAll.length === currentNo + 1) {
let notChecked = linkBoxAll.filter(linkBox => !linkBox.querySelector(‘input:checked’));
notChecked.forEach(linkBox => linkBox.classList.add(‘not-checked’));
scrollPoint = notChecked[0].getBoundingClientRect().top + window.pageYOffset;
noScroll = false;
} else {
next = linkBoxAll[currentNo + 1]
if (next) scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;
}
if (scrollPoint && !noScroll) {
_.scrollTo(scrollPoint, setting.duration)
}
})
}
_.init = function() {
Array.from(document.querySelectorAll(classes.target), el => {
_.setEnquete(el);
});
}
})(sbScrollRevealEnqueteWithRevealHiddenCase)
</script>
<script>
document.addEventListener(‘DOMContentLoaded’, sbScrollRevealEnqueteWithRevealHiddenCase.init, false);
</script>
<div class=”question-reveal-scroll js-scroll-reveal-enquete-with-reveal”>
<form name=”form-scroll-enquete”>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item current”>01</li>
<li class=”item”>02</li>
<li class=”item”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q1</span>今の体型を変えたいと思いますか？<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox btn-two”><input id=”q1-1″ type=”radio” name=”q1″ data-show=”q1-1″><label for=”q1-1″>
<div class=”btn”>はい</div>
</label><input id=”q1-2″ type=”radio” name=”q1″ data-show=”q1-2″><label for=”q1-2″>
<div class=”btn”>いいえ</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item current”>02</li>
<li class=”item”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q2</span>一番気になる部位はどこですか？<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q2-1″ type=”radio” name=”q2″ data-show=”q2-1″><label for=”q2-1″>
<div class=”btn”>お腹周り</div>
</label><input id=”q2-2″ type=”radio” name=”q2″ data-show=”q2-2″><label for=”q2-2″>
<div class=”btn”>二の腕</div>
</label><input id=”q2-3″ type=”radio” name=”q2″ data-show=”q2-3″><label for=”q2-3″>
<div class=”btn”>足、太もも</div>
</label><input id=”q2-4″ type=”radio” name=”q2″ data-show=”q2-4″><label for=”q2-4″>
<div class=”btn”>顔まわり</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item”>02</li>
<li class=”item current”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q3</span>痩せることができたら何がしたいですか？<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q3-1″ type=”radio” name=”q3″ data-show=”q3-1″><label for=”q3-1″>
<div class=”btn”>着たかった洋服を着て楽しみたい！</div>
</label><input id=”q3-2″ type=”radio” name=”q3″ data-show=”q3-2″><label for=”q3-2″>
<div class=”btn”>罪悪感なく美味しいものを食べたい！</div>
</label><input id=”q3-3″ type=”radio” name=”q3″ data-show=”q3-3″><label for=”q3-3″>
<div class=”btn”>周りの人から褒められたい！</div>
</label><input id=”q3-4″ type=”radio” name=”q3″ data-show=”q3-4″><label for=”q3-4″>
<div class=”btn”>好きな人にアプローチしたい！</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item”>02</li>
<li class=”item”>03</li>
<li class=”item current”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q4</span>理想の姿になれる医療痩身に興味はありますか？<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.png” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div><a href=”#heading1″>
<div class=”linkbox btn-two”><input id=”q4-1″ type=”radio” name=”q4″ data-show=”q4-1″><label for=”q4-1″>
<div class=”btn”>はい</div>
</label><input id=”q4-2″ type=”radio” name=”q4″ data-show=”q4-2″><label for=”q4-2″>
<div class=”btn”>いいえ</div>
</label></div>
<div class=”step_arr”><span></span><span></span><span></span></div>
</a>
</div>
</form>
</div>
———-【CSS】———-
.question-reveal-scroll {
width: 970px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 20px;
padding: 0;
line-height: 1.5;
box-sizing: border-box;
}
.question-reveal-scroll .questionArea {
display: flex;
flex-direction: column;
}
.question-reveal-scroll .question__numBox {
width: 100%;
height: auto;
}
.question-reveal-scroll .question__numBox .numItems {
width: 100%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0;
}
.question-reveal-scroll .question__numBox .numItems .item {
font-size: 20px;
color: #fff;
background: #ccc;
width: 60px;
height: 60px;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2em;
position: relative;
}
.question-reveal-scroll .question__numBox .numItems .item.current {
background: #EAA8BF;
}
.question-reveal-scroll .question__numBox .numItems .item:after {
content: ‘→’;
position: absolute;
top: 50%;
right: -2em;
color: #ccc;
font-size: 14px;
transform: translateY(-50%);
}
.question-reveal-scroll .question__numBox .numItems .item:last-of-type {
margin-right: 0;
}
.question-reveal-scroll .question__numBox .numItems .item:last-of-type:after {
content: none;
}
.question-reveal-scroll .title {
width: calc(100% – 10px);
color: #fff;
background-color: #EAA8BF;
font-size: 20px;
font-weight: 600;
margin: 0 auto 30px;
padding: 15px 5px;
display: flex;
flex-direction: column;
align-items: center;
}
.question-reveal-scroll .title .mark {
font-size: 34px;
margin-right: 15px;
color: #fff;
line-height: 1.1;
}
.question-reveal-scroll .questionImg,
.questionImg img {
width: 100%;
height: auto;
}
.question-reveal-scroll .linkbox {
width: 100%;
margin: 0 auto 40px;
padding: 0 15px;
text-align: left;
box-sizing: border-box;
}
.question-reveal-scroll input {
display: none;
}
.question-reveal-scroll input+label {
cursor: pointer;
border: none;
display: block;
}
.question-reveal-scroll input:not(:first-of-type)+label {
margin-top: 10px;
}
.question-reveal-scroll input+label .btn {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px 0 20px 50px;
font-weight: bold;
background-color: #eee;
line-height: 1.6;
position: relative;
display: block;
}
.question-reveal-scroll input:checked+label .btn {
background-color: #3498db;
color: #ffffff;
}
.question-reveal-scroll input+label .btn::before {
width: 14px;
height: 14px;
top: 50%;
left: 10px;
margin-top: -8px;
background: #f3f3f3;
border: 1px solid #ccc;
position: absolute;
content: ”;
transition: all 0.2s;
}
.question-reveal-scroll input[type=’radio’]+label .btn::before {
border-radius: 100%;
}
.question-reveal-scroll input+label .btn:focus {
outline: none !important;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn:after {
top: 55%;
left: 13px;
width: 8px;
height: 4px;
margin-top: -8px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
transform: rotate(-45deg) scale(0.5);
position: absolute;
transition: all 0.2s;
content: ”;
opacity: 0;
}
.question-reveal-scroll input[type=’radio’]+label .btn:after {
top: 48%;
left: 13px;
width: 10px;
height: 10px;
margin-top: -4px;
background: #3498db;
transform: scale(2);
border-radius: 100%;
opacity: 0;
position: absolute;
content: ”;
transition: all 0.2s;
}
.question-reveal-scroll input[type=’checkbox’]:checked+label .btn:after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
.question-reveal-scroll input[type=’radio’]:checked+label .btn::after {
opacity: 1;
transform: scale(1);
}
.question-reveal-scroll ::-moz-focus-inner {
border-color: transparent;
}
.question-reveal-scroll .linkbox.btn-two {
text-align: center;
}
.question-reveal-scroll .linkbox.btn-two label {
width: 48%;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
.question-reveal-scroll .linkbox.btn-two .btn {
font-size: 34px;
color: #fff;
background: #3f3f3f;
padding: 10px;
text-align: center;
border: none;
border-radius: 10px;
box-shadow: 0 10px 0 #000;
transition: all 0.2s;
cursor: pointer;
}
.question-reveal-scroll .linkbox.btn-two input:checked+label .btn {
background: #bc0a1f;
box-shadow: 0 10px 0 #7d1521;
}
.question-reveal-scroll .linkbox.btn-two input+label .btn::before,
.question-reveal-scroll .linkbox.btn-two input+label .btn::after {
content: none;
}
.question-reveal-scroll .questionArea.not-checked .linkbox::after {
content: “回答してください”;
font-size: 14px;
color: #ff0000;
display: block;
text-align: right;
padding: 1em;
}
.revealarea {
font-size: 1.2rem;
text-align: left;
margin: 3rem auto 0;
padding: 0;
box-sizing: border-box;
}
.revealarea img {
max-width: 100%;
height: auto;
}
.is-hidden {
display: none;
}
.hidden-image {
display: none;
margin: 10px 0;
}
.hidden-image img {
margin: 0 auto;
}
.linkbox.btn-two.vertical {
display: grid;
width: 80%;
margin: 10px auto;
}
.linkbox.btn-two.vertical label {
display: block;
width: 100%;
}
@media screen and (min-width: 700px) {
.question-reveal-scroll .questionArea {
margin: 50px auto 80px;
max-width: 970px;
}
.question-reveal-scroll .title {
margin: 0 0 20px;
font-size: 24px;
}
.question-reveal-scroll .title .mark {
font-size: 28px;
}
.question-reveal-scroll input+label .btn {
font-size: 24px;
}
.question-reveal-scroll .linkbox {
margin: 70px auto 20px;
}
.question-reveal-scroll input+label .btn::before {
width: 28px;
height: 28px;
top: 41%;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn::before {
top: 39%;
width: 30px;
height: 30px;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn:after {
top: 51%;
left: 16px;
width: 16px;
height: 8px;
border-left-width: 4px;
border-bottom-width: 4px;
}
.question-reveal-scroll input[type=’radio’]+label .btn:after {
top: 43%;
left: 15px;
width: 20px;
height: 20px;
}
.question-reveal-scroll .linkbox.btn-two .btn {
font-size: 50px;
}
}
.step_arr {
position: relative;
padding-top: 22vw;
margin-top: -4vw;
}
.step_arr span {
position: absolute;
top: 0;
left: 50%;
width: 10vw;
height: 10vw;
margin-left: -5vw;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
opacity: 0;
box-sizing: border-box;
}
.step_arr span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.step_arr span:nth-of-type(2) {
top: 4vw;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.step_arr span:nth-of-type(3) {
top: 8vw;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@media screen and (min-width:700px) {
.step_arr {
position: relative;
padding-top: 136px;
margin-top: -25px;
}
.step_arr span {
width: 62px;
height: 62px;
margin-left: -31px;
}
.step_arr span:nth-of-type(2) {
top: 24.8px;
}
.step_arr span:nth-of-type(3) {
top: 49.6px;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}