WEB Design . other memo
【cssプロパティ】
・@keyframes
・animation
・transform
・transition
・border-image
・border-radius
・box-shadow
・box-sizing
・text-shadow
【CSS Flexbox】
・flexboxの適応
display: flex;
・flex-direction アイテムの並び順
row 水平方向に左から右
row-reverse
column 垂直方向に上から下
column-reverse
・flex-wrap アイテムの折り返し指定
nowrap 折り返しなし
wrap 上から下
wrap-reverse
・flex-flow アイテムのdirectionとwrapを一括指定
・アイテムの水平位置指定
flex-start 左揃え
flex-end 右揃え
center 中央揃え
space-around 余白ありの中央揃え
space-between 余白ありの中央揃え(両端はなし)
・align-item アイテムの水平位置指定
stretch 上下の余白を埋める
flex-start 上揃え
flex-end 下揃え
center 中央揃え
baseline ベースラインに合わせる
・align-content アイテムの行の垂直位置指定
stretch
flex-start
flex-end
center
space-between
space-around
【nullデータ】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="test">
<div class="contents" id="c1"></div>
<div class="contents" id="c2"></div>
<div class="contents" id="c3"></div>
</div>
<div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</body>
</html>
【背景img固定】
<div id="test">
<div class="fixed-bg bg01"></div>
<div class="scroll-bg"></div>
<div class="fixed-bg bg02"></div>
<div class="scroll-bg"></div>
</div>
.fixed-bg {
min-height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.bg01 {
background-image: url(img/img1.jpg);
}
.bg02 {
background-image: url(img/img2.jpg);
}
.scroll-bg {
height: 100px;
}
【スクロールアニメーション.パターン1(animate.cssを使用)】
・animate.css
https://daneden.github.io/animate.css/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="contents animated bounce(←使いたいアニメーション名)”></div>
</body>
【スクロールアニメーション.パターン2】
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 200){
$(this).addClass('scrollin');
}
});
});
});
</script>
</body>
/* 画面外にいる状態 */
.fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}
【css animation】
@keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#c1 {
animation: fadeIn 3s;
}
【transform / transition / :hover】
#c1 {
transition: all 0.2s ease;
}
#c1 :hover{
transition: all 0.2s ease;
transform:translateX(40px);
}
この記事が気に入ったらサポートをしてみませんか?