うつ病WEBデザイナーがうつ病を克服するため独学で学んだことをアウトプットして共有するためのブログ

うつWEB

CSS WEBデザイン

画像のゆっくりズームイン/ズームアウトはJavaScriptじゃなくてCSS3のアニメーション

2018年12月18日

どうもWEBデザイナーやって約20年、皆川(@minagawa_osamu)です。

画像のゆっくりズームイン/ズームアウトはJavaScriptじゃなくてCSS3のアニメーション

当サイトのトップページ https://minagawa.design/  の全面イメージ画像はゆっくりズームイン・ズームアウト(拡大縮小)を繰り返しながらスライドさせているのですが、JavaScriptやjQueryで大きさを変えるのではなく、CSS3のtransform:scale()使用しています。その方法を解説します。

スライダー部分のHTML

<div id="slider">
<div class="slidewrap"><img src="images/topimage01.jpg" alt="" class="nosp"></div>
<div class="slidewrap"><img src="images/topimage02.jpg" alt="" class="nosp"></div>
<div class="slidewrap"><img src="images/topimage03.jpg" alt="" class="nosp"></div>
</div>

スライダーはjQueryプラグインのbxsliderを使用していますので、bxsliderの設置手順に沿って画像を配置すればよいです。

bxsliderの詳しい設置方法は下記のサイトなどを参照して下さい。


通常は <div id="slider"> タグの中に imgタグを入れれば画像が順番にスライドするのですが、今回は画像一つ一つを <div class="slidewrap">というクラス付きのタグで括っておきます。画像がズームしたときにエリアからはみ出した部分を隠すために使用します。

CSSの記述

/*bxsliderの外側部分の記述*/
#slider{
width:100%;
height:100%;
vertical-align: middle;
overflow: hidden;
z-index:-999;
}

/*bxsliderに配置する画像のプロパティ*/
#slider img{
	width:100%;
	height:100%!important;
	line-height: 100%;

	/*30秒かけてズームイン・アウトを永遠に繰り返す*/
	animation: animationZoom 30s ease-in-out 0s infinite normal;
}

.bx-viewport{
height: 100%!important;
}

/*拡大した画像のはみ出した部分を隠すためのクラス*/
.slidewrap{
	width:100%;
	height:100%!important;
	overflow: hidden;
}

/*イメージをズームさせるCSS3アニメーション*/
@keyframes animationZoom {
	50%{ transform:scale(1.1); }        
}

animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。

/*イメージをズームさせるCSS3アニメーション*/
@keyframes animationZoom {
	50%{ transform:scale(1.1); }        
}

この部分でアニメーションを設定。animationZoomとは任意の名前なので、好きな名前を付けて大丈夫です。
50%{transform:scale(1.1); とは、アニメーション尺の50%のときに縮尺を1.1倍にするという指定です。
#slider img の指定箇所で

animation: animationZoom 30s ease-in-out 0s infinite normal;

@keyframe で指定した 'animationZoom' を30秒でイーズインアウト、ゼロ秒後に開始し永遠に繰り返す。指定します。

詳しくはkeyframe や animation について詳しく知りたい方はリファレンスサイトなどを参照して頂きたいのですが、上記数値をいろいろ変えて試してみるとなんとなく概要が掴めると思います。

難しいことはわかんないけど、おんなじように画像をズームさせたい!ってだけならコピーしてもっていってくださいw。

オンラインスクールなら自宅で無料体験もできます

「現場のことは現場で学べ」といいますけど、まずある程度の知識がないと現場でも質問の仕方や何を学びとったらいいのかがわからないこともあると思います。
独学で知ることができないことは現場以外にもWEBデザインのスクールなどでも学べますが、オンラインで自宅にいながらリモートで学習できるという環境も増えてきていますので、自分のライフスタイルに合えばそういう選択もありですね。

【TechAcademy】は、オンライン完結のスクールで、 「最短4週間で未経験からプロを育てる」とのこと。
あくまで「最短」なので、もっと学びたいと思えば学ぶことも出来るでしょう。

WEBデザインコース以外にも

・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・Pythonコース ・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース
・Javaエンジニアコース
・ブロックチェーンコース
・Node.jsコース
・Scalaコース

など多岐にわたってWEB関係の開発の技術を学習できるので、WEBデザイナーとして成熟したあとも、WEBエンジニアとしてさらに活躍の場を広げたいという場合にもいいんじゃないでしょうか。

もし興味があれば、無料体験もできるのでまずは無料で、自分のライフスタイルや性格にフィットするか試してみてはどうでしょう?

-CSS, WEBデザイン
-, ,

Copyright© うつWEB , 2020 All Rights Reserved Powered by AFFINGER5.