目次
画像をおしゃれに登場させる
ホームページと言えば写真や、画像といっても過言じゃないほど大切です。ただ表示させるだけでなく、どうやったら注目してもらえるかを動きをつけることでオシャレさと、見てもらえるようにしたいと思います。
下から画像を登場させる
下からふわっと画像が上がってくるようにして、やわらかさを出したいと思います。
<div class="slide">
<img class="slide-image" src="/goronouen/images/ランチ.jpg" alt="ランチ">
</div>.slide {
position: relative;
}
.slide-image {
position: absolute;
/* 親の要素の幅に合わせる */
width: 100%;
/* ブロックに変更 */
display: inline-block;
/* keyframesの指定 */
animation-name: fadeup;
/* 終了までの時間指定 */
animation-duration: 2s;
/* 速度の調整 */
animation-timing-function: ease;
/* アニメーション終了時の状態で100%時のスタイル適用 */
animation-fill-mode: forwards;
}
@keyframes fadeup {
0% {
transform: translateY(100px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}画像を左から見えるようにする
次は、画像を左から見えるようにしていきます。
<body>
<div class="slide">
<img class="slide-image" src="/goronouen/images/ランチ.jpg" alt="ランチ">
</div>
</body>.slide {
/* はみ出た部分を隠す */
overflow: hidden;
/* 親の基準位置 */
position: relative;
/* イメージを中央 */
text-align: center;
}
.slide::before {
/* 疑似要素 */
content: '';
/* 親要素の位置 */
position: absolute;
/* アニメーション名前 */
animation-name: kfm-slide;
/* 実行時間 */
animation-duration: 2s;
/* 速度の調整 */
animation-timing-function: ease;
/* アニメーション終了時の状態で100%時のスタイル適用 */
animation-fill-mode: forwards;
/* バックグラウンドカラー */
background: #fff;
/* 画面領域最大 */
top: 0;
right: 0;
bottom: 0;
left: 0;
/* ポインターイベント */
pointer-events: none;
/* 表示順指定 */
z-index: 1;
}
@keyframes kfm-slide {
100% {
transform: translateX(100%);
}
}
コメント