Q&A
ベストアンサー
ご回答ありがとうございます！
回答のように打ちこんでみたのですが、うまく実行されませんでした、、、
どこか入力ミスをしてしまったのでしょうか。
一度見てもらってもよろしいでしょうか。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css">
<style>
.section {
/* text-align: center;*/
font-size: 200%;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
#section1{ background-size: cover;
background-image: url(ari1.jpg);
}
.one{
color: #c5f7fe;
font-family: 'A1 Mincho', serif;
font-size: 80px;
left: 0;
letter-spacing: -0.05em;
line-height: 1;
position: absolute;
/* text-align: center;*/
top: 400px;
width: 100%;
-webkit-box-reflect: below 0 -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.4, transparent), to(rgba(0,0,0,0.5)));
text-shadow: 0 0 10px #fff,0 0 10px #fff;
}
.hide{
display:none;
}
.twoo{
font-size: 20px;
list-style: none;
margin-left: 20px;
text-shadow: 0 0 10px #fff,0 0 10px #fff;
}
#section2{ background-size: cover;
background-image: url(ari2.jpg);
}
#section3{ background-size: cover;
background-image: url(ari3.jpg);
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="1page"><a href="#1page">①</a></li>
<li data-menuanchor="2page"><a href="#2page">②</a></li>
<li data-menuanchor="3page"><a href="#3page">③</a></li>
<li data-menuanchor="4page"><a href="#4page">④</a></li>
<li data-menuanchor="5page"><a href="#5page">⑤</a></li>
<li data-menuanchor="6page"><a href="#6page">⑥</a></li>
</ul>
<div id="fullpage">
<div class="section" id="section1">
<p class="one">The Little Mermaid</p>
</div>
<div class="section" id="section2">
<p class="a"><input id="A" type="button" value="btn"></p>
<ul class="hide">
<li class="twoo">16歳の人魚姫・アリエルは、地上に憧れる少女でした。</li>
<li class="twoo">アリエルは好奇心旺盛で、王国の外の世界を見たくてたまりません。</li>
<li class="twoo">しょっちゅう王国を抜けだしては、外の世界を冒険しました。</li>
</ul>
</div>
<div class="section" id="section3">Some section</div>
<div class="section" id="section4">4 section</div>
<div class="section" id="section5">5 section</div>
<div class="section" id="section6">⑥ section</div>
</div>
<script src="bubbleparticle.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['1page', '2page', '3page','4page','5page','6page'],
menu: '#menu',
sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5'] //ここの''内の色を変えられます。
});
});
$(function() {
$('.one').animate({
'marginLeft': '550px'
},2000);
});
$('#A').click(function(e) {
$('.twoo.hide').removeClass('hide');
$('.twoo').animate({
'marginLeft': '550px'
},2000);
});
</script>
</body>
</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。