CSSとjQueryでヘッダーをスライドアニメさせてみました。
こんな風に。
まず、htmlはこちらのような感じです。
※赤字がヘッダー部分＆アニメーションの記述です
<html>
<head>
<title>URL Library | moko's web application</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script>
$(function() {
$(".click").click(function() {
$(this).toggleClass("clicked");
});
});
</script>
</head>
<body>
<header>
<hr size="2" color="#97BE38">
<div class="box click">
<hr size="25" color="#5E5C61">
</div>
</header><div class="container">
<%= yield %>
</div>
</body>
</html>
そしてこちらがCSSの記述です。
クリックした際にプロパティの一部を変化させています。
header {
text-align: center;
background: #5E5C61;
margin: 0;
}header hr {
margin: 0;
}.box {
height: 200px;
background-color: #5E5C61;
padding: 0;
margin: 0;
transition: 1s;
background-image: url(title_logo.png);
background-size:377px 180px;
background-repeat: no-repeat;
background-position: center center;
}.box.click.clicked {
height: 25px;
opacity: 0;
}
こんなシンプルな記述でいけるんですね。
ただ、ページ遷移するとクリックが効かなくなったりなど不具合があるのでさらに手を入れていく必要がある感じでした。
