WEB Design . other memo

Haneda

2020年3月29日 22:35

【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/

【スクロールアニメーション.パターン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);
}

この記事が気に入ったらサポートをしてみませんか？