カテゴリー:
Webデザイン
閲覧数:586 配信日:2018-02-02 12:58
気になるパーツ
header背景画像
▼images/portfolios.png
.header__portfolio {
position: absolute;
top: 21px;
left: -10%;
width: 120%;
height: 600px;
background-image: url(images/portfolios.png);
background-repeat: repeat-x;
background-size: auto 600px;
background-position: 0px center;
transform: rotate(-5deg);
animation: portfolioMoving 20s linear infinite;
}headerアイコン画像
▼images/site-hajipion.png
.site__image, .header__siteImage {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background-image: url(images/site-hajipion.png);
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease-in-out;
}header文字列画像
▼images/site-title.png
.site__title, .footer__siteTitle, .header__siteTitle {
opacity: 1;
position: absolute;
background-image: url(images/site-title.png);
background-repeat: no-repeat;
text-indent: -9999px;
transform: scale(1);
filter: blur(0px);
transition: all .25s .75s ease-in-out;
}Ajax処理
詳細不明
▼/wp-admin/admin-ajax.php
Failed to load https://hajipion.com/wp-admin/admin-ajax.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.
100%再現不可
読み込み時の時間差アニメーション
・再現出来ない
・詳細不明
動画と思しき背景
実際はただの一枚png画像
・CSSでキーフレームアニメーションしているだけ
・その際「transform: rotate(-5deg);」で若干の角度を付与している
CSSキーフレームアニメーション
animation: portfolioMoving 20s linear infinite;
・「portfolioMoving」はユーザ定義キーフレーム名@keyframes portfolioMoving{0%{background-position:0px center}100%{background-position:1370px center}}
・メディアクエリで複数定義している「背景」の「背景」に指定
・「position: absolute;」指定することで、「背景グラデーション」のさらに「背景」へ指定している
・背景グラデーションには「z-index」指定