0
応答可能なテキスト「W E L C O M E」を作成できません。私はメディアクエリを試みましたが、失敗しました。スニペットにHTMLとCSSのコードがあり、ここでそれを実行しようとしましたが、いくつか問題があります。 uはいくつかのアニメーションでテキストがある見ることができるように応答性のある部門を作成しようとしています
が、それは「李」などの単一文字で、この方法を行わなければなければならない
#bg1 {
background: url(img/38890540-cosmic-pictures-wallpapers.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bg2 {
background-color: darkgray;
}
#bg3 {
background-color: darkgreen;
}
#bg4 {
background-color: darkslateblue;
}
.fly-in-text {
list-style: none;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.fly-in-text li {
display: inline-block;
margin-right: 50px;
font-family: Quicksand, sans-serif;
font-weight: 300;
font-size: 4em;
color: #fff;
opacity: 1;
transition: all 2.5s ease;
}
.fly-in-text li:last-child {
margin-right: 0;
}
.fly-in-text.hidden li {
opacity: 0;
}
.fly-in-text.hidden li:nth-child(1) {
transform: translateX(-200px) translateY(-200px);
}
.fly-in-text.hidden li:nth-child(2) {
transform: translateX(20px) translateY(100px);
}
.fly-in-text.hidden li:nth-child(3) {
transform: translateX(-150px) translateY(-80px);
}
.fly-in-text.hidden li:nth-child(4) {
transform: translateX(10px) translateY(-200px);
}
.fly-in-text.hidden li:nth-child(5) {
transform: translateX(-300px) translateY(200px);
}
.fly-in-text.hidden li:nth-child(6) {
transform: translateX(20px) translateY(-20px);
}
.fly-in-text.hidden li:nth-child(7) {
transform: translateX(30px) translateY(200px);
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>x</title>
</head>
<body>
<div id="fullpage">
<div class="section" id="bg1">
<ul class="fly-in-text hidden">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<li>M</li>
<li>E</li>
</ul>
</div>
<div class="section" id="bg2"></div>
<div class="section" id="bg3"></div>
<div class="section" id="bg4"></div>
</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
$(function() {
setTimeout(function() {
$('.fly-in-text').removeClass('hidden');
}, 500);
})
</script>
</body>
</html>
レスポンステキストでは何を意味していますか？解像度に応じてフォントサイズを増減する必要がありますか？ – jakob
ええ、常に1行にする必要があります – serengeti