ボタンを押した時に文章をフェードイン、フェードアウトさせる。
See the Pen BaLMJaJ by Shotaro Kamimura (@shotarokamimura) on CodePen.
フェードイン・アウトさせる場合
<!DOCTYPE html>
<html>
<head>
<title>fadeIn</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="fadein.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="btn" id = "fadein">fadein</div>
<div id="text">
<p>This is test</p>
<p>This is test button for fade in and fade out</p>
</div>
<script src="fadein.js"></script>
</body>
</html>
.btn {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #2b2929;
border: solid 2px #2b2929;
border-radius: 3px;
transition: .4s;
cursor:pointer;
}
.btn:hover {
background: #2b2929;
color: white;
}
.btn:active {
position: relative;
top: 5px;
box-shadow: none;
}
#text {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}$(function() {
$('.btn').click(function() {
if ($('#text').css('opacity') == 0) {
$('#text').css('opacity', 1);
$('#text').css('transform', 'translateY(' + -5 + 'px)');
}
else {
$('#text').css('opacity', 0);
$('#text').css('transform', 'translateY(' + 5 + 'px)');
}
});
});
フェードインだけさせる場合
See the Pen MWjLjmM by Shotaro Kamimura (@shotarokamimura) on CodePen.
//jsファイルのみ変更
$(function() {
$('.btn').click(function() {
$('#text').css('opacity', 1);
$('#text').css('transform', 'translateY(' + -5 + 'px)');
});
});全体像を把握する
下記にHTMLとCSS、Javascriptを使ったwebサイトの作り方についての記事をまとめた。
-
-
HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ
このページでは、HTMLとCSS、Javascriptを使ったwebサイトの作り方についてまとめていく。 Webサイトの仕組み まずはwebサイトの仕組みなどをわかっておくと、今後の準備がかなり楽にな ...
続きを見る
また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。
-
-
Screen-Shot-2021-06-11-at-11.45.16
続きを見る
