Embedded Files
Googleサイトって簡単にホームページの作成ができるけど、飾りの要素がまったくないのですね。なにか事務的な仕上がりでちょっと寂しい感じになってしまいます。
それでしたら、ホームページにアニメーション（文字や画像）などのコードを埋め込んで動きを加えてみはいかがでしょうか。
コードをコピペして埋め込みコードに埋め込むだけなので、簡単にできますよ！
シンプルなアニメーションばかりですが、よろしければコピペしてお使いください。
コード内のピンク色の部分は必要に応じて変えてください。
コード内で重複説明を省略している場合がありますので、なるべく最初のコードからご覧ください。
フェードのアニメーションは繰り返す設定にしていますが、実際のコードでは1回の設定です。
font-sizeは柔軟に変更し、モバイルでのプレビューでしっかりと確認してください。
スクロール方向の反転に関しては、コードの中で解説しています。
NO.1
NO.1 コード
<div class="vertical-scroll">
<span>
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</span>
</div>
<style>
.vertical-scroll {
margin: auto;
width: 100%;
height:2.0em;
background-color: transparent; /* 背景色 */
border: 0px solid gray; /* 枠線 */
border-radius: 0px; /* 枠の丸み */
font-size: 6.0vw; /* 文字の大きさ */
text-align: center; /* leftで文字左詰め */
overflow: hidden; /* 枠からはみ出た部分を非表示 */
list-style: none; /* inside で箇条書きスタイルになります */
}
.vertical-scroll span {
display: inline-block;
white-space: nowrap; /* wrapにすれば改行します */
line-height: 2.0em; /* 行間（高さ） */
animation: scroll 8s linear 1; /* 繰り返しの回数、1であれば1回、infiniteは無限です */
color: green;
font-weight: 400; /* 文字の太さ、boldで太字 */
}
@keyframes scroll {
/* 0と100を入れ替えるとスクロールダウンします */
0% { transform: translateY(2.0em)}
100% { transform: translateY(-6.0em)} /* 2.0X<li>数、行数により変えます */
}
</style>
NO.2
NO.2 コード
<div class="vertical-fade">
<p>sample</p>
</div>
<style>
.vertical-fade {
width: 100%;
background-color: transparent;
/* この下 borderとborder-radiusの2行を .horizontal-fade p { }の中に移動すれば枠線ごとフェードします */
border: 0px solid gray;
border-radius: 0px;
overflow: hidden;
}
.vertical-fade p {
font-size: 6.0vw;
font-weight: 400;
color: #ff4500;
text-align: center;
line-height: 2.0em;
animation-name: vertical-fade;
animation-duration: 2.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-iteration-count: 1; /* 繰り返しの回数、1であれば1回、infiniteは無限です */
}
@keyframes vertical-fade {
0% {
opacity: 0;
/* フェードインの開始位置の指定です */
/* フェードアップ：10から100の間で試してください */
/* フェードダウン：-10から-100の間で試してください */
transform: translateY(50px);
}
100% {
opacity: 1;
/* フェードインの停止位置の指定です */
/* フェードアップ時：0から-20の間で試してください */
/* フェードダウン時：0から20の間で試してください */
transform: translateY(0px);
}
}
</style>
以下のようなコードにすれば、よりきめ細かいアニメーションとなります
@keyframes horizontal-fade {
0% {
opacity: 0;
transform: translateX(50px);
}
30% {
opacity: 0.4;
}
70% {
opacity: 0.8;
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
NO.3
NO.3 コード
<div class="horizontal-scroll">
<p>sample1 sample2 sample3</p>
</div>
<style>
.horizontal-scroll {
width: 100%;
background-color: transparent;
border: 1px solid gray;
border-radius: 0px;
overflow: hidden;
}
.horizontal-scroll p{
font-size: 6.0vw;
font-weight: 400;
color: blue;
display: inline-block;
padding-left: 100%;
white-space: nowrap;
line-height: 1.5em;
animation: scroll 10s linear infinite; /* 繰り返しの回数、1であれば1回、infiniteは無限です */
}
@keyframes scroll{
/* 0と-100を入れ替えれば右にスクロールします */
0% {
transform: translateX(0%)
}
100% {
transform: translateX(-100%)
}
}
</style>
NO.4
NO.4 コード
<div class="horizontal-fade">
<p>sample</p>
</div>
<style>
.horizontal-fade {
width: 100%;
background-color: transparent;
/* この下 borderとborder-radiusの2行を .horizontal-fade p { }の中に移動すれば枠線ごとフェードします */
border: 0px solid gray;
border-radius: 0px;
overflow: hidden;
}
.horizontal-fade p {
font-size: 6.0vw;
font-weight: 400;
color: deeppink;
text-align: center;
line-height: 1.0em;
animation-name: horizontal-fade;
animation-duration: 2.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes horizontal-fade {
0% {
opacity: 0;
/* フェードインの開始位置の指定です */
/* 右から左へフェードイン：+（プラス）の値を指定 */
/* 左から右へフェードイン：-マイナス）の値を指定 */
transform: translateX(50px);
}
100% {
opacity: 1;
/* フェードインの停止位置の指定です */
/* 左へフェードイン時はー、右へフェードイン時は＋の値を入力 */
transform: translateX(0px);
}
}
</style>
以下のようなコードにすれば、よりきめ細かいアニメーションとなります
@keyframes horizontal-fade {
0% {
opacity: 0;
transform: translateX(50px);
}
30% {
opacity: 0.4;
}
70% {
opacity: 0.8;
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
NO.5
NO.5 コード
<div class="fadeup">sample</div>
<style>
.fadeup {
font-size: 6.0vw;
font-weight: 400;
color: black;
font-style: italic; /* 文字を斜体にしています。不要なら削除 */
text-align: center;
animation-name: fadeup;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes fadeup{
from{
opacity: 0;
transform: scale(0.4); /* 拡大率0.4から1.0になっています */
}
to{
opacity: 1;
transform: scale(1.0);
}
}
</style>
NO.6
NO.6 コード
<div class="horizontal-fade">
<p>sample</p>
</div>
<style>
.horizontal-fade {
width: 100%;
background-color: transparent;
/* この下 borderとborder-radiusの2行を .horizontal-fade p { }の中に移動すれば枠線ごとフェードします */
border: 2px solid gray;
border-radius: 0px;
overflow: hidden;
}
.horizontal-fade p {
font-size: 6.0vw;
font-weight: 400;
color: black;
font-style: italic;
text-align: center;
line-height: 1.5em;
animation-name: horizontal-fade;
animation-duration: 3.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes horizontal-fade {
0% {
opacity: 0;
/* 右から左へフェードイン：+（プラス）の値を指定 */
/* 左から右へフェードイン：-マイナス）の値を指定 */
transform: translateX(100px) scale(0.4); /* 文字の拡大率を指定（0.4から1.0など） */
}
100% {
opacity: 1;
/* 停止位置を変える場合は(左へフェードイン時はー、右へフェードイン時は＋の値を入力） */
transform: translateX(0px) scale(1.0);
}
}
</style>
NO.7
NO.7 コード
<p class="blinking">sample</p>
<style>
.blinking {
animation-name: blinking;
animation-duration: 1s; /*点滅1回分の時間の長さ*/
animation-timing-function: ease-in-out;
animation-delay: 0s; /*点滅の開始時間*/
animation-iteration-count: infinite; /* 繰り返しの回数、1であれば1回、infiniteは無限です */
animation-direction: alternate;
}
p {
font-size: 6.0vw;
font-weight: 400;
color: black;
text-align: center;
}
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
NO.8
NO.8 コード
<p class="blinking">sample</p>
<style>
.blinking {
animation-name: blinking;
animation-duration: 1s; /*点滅1回分の時間の長さ*/
animation-timing-function: ease-in-out;
animation-delay: 0s; /*点滅の開始時間*/
animation-iteration-count: infinite; /* 繰り返しの回数、1であれば1回、infiniteは無限です */
animation-direction: alternate;
}
p {
font-size: 6.0vw;
font-weight: 400;
color: black;
text-align: center;
text-shadow: 0 0 5px yellow,0 0 10px yellow;
}
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
NO.9
NO.9 コード
<div class="bb am active">
<font>Sample</font>
</div>
<style>
.am{
font-family: sans-serif;
font-weight: 400;
font-size: 7.0vw;
color: gray;
text-align: center;
padding: 25px 25px;
background-color: transparent;
background-image:
linear-gradient(to bottom, transparent 6px, deeppink 10px, deeppink 8px, transparent 0px),
linear-gradient(to left, transparent 6px, deeppink 10px, deeppink 8px, transparent 0px),
linear-gradient(to top, transparent 6px, deeppink 10px, deeppink 8px, transparent 0px),
linear-gradient(to right, transparent 6px, deeppink 10px, deeppink 8px, transparent 0px);
background-repeat: no-repeat;
background-size: 0% 80%, 80% 0%, 0% 80%, 80% 0%;
background-position: top left, top left, right bottom, right bottom;
&.active{
animation-iteration-count: 1; /* 繰り返しの回数、1であれば1回、infiniteは無限です */
animation-name: a, b, c;
animation-duration: 3.8s, 3.0s, 4.0s;
animation-delay: 0s, 1.8s, 0s;
animation-timing-function: liear;
}
}
.bb{
animation-fill-mode: both;
}
@keyframes a {
50%{
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
100%{
background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
}
}
@keyframes b {
100%{
background-position: right bottom, right bottom, top left, top left;
}
}
@keyframes c{
from{
text-shadow: 0 0 15px gray,0 0 20px gray;
opacity: 1;
}
to{
color:gray;
opacity: 1;
}
}
</style>
NO.10
NO.10 コード
<p class="underline">サンプル サンプル サンプル</p>
<style>
.underline {
font-size: 5.5vw;
letter-spacing: 0.05em;
color: black;
display: inline;
position: relative;
}
.underline::before {
content: "";
width: 0;
height: 30px; /* アンダーラインの高さ */
display: block;
background: linear-gradient(transparent 60%,#eeff1d 60%);
position: absolute;
top: -2px; /* アンダーライン上下位置 */
left: 0;
z-index: -2;
animation: underAnime 3s forwards ease-out infinite;
}
@keyframes underAnime {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
Google Sites
Report abuse