画像をゆっくり動かして表示させるやつ

大きな画像を全画面に表示させて、ゆ～っくり動かすようなJavascriptです。MacのiPhotoやiMovieにあったKen Burns エフェクトのようなものですね。

最新版を無料ダウンロード

画像をゆっくり動かして表示させるやつの概要

Ken BurnsエフェクトといえばMacをご利用の方であればわかりやすいと思うのですが、じわりじわりとすこ～しづつ拡大したり縮小したり動いたりするスライドショー用のJavascriptです。 無論レスポンシブWebデザインに対応しています。jqueryなどを利用していない軽量なスクリプトですので、場所を選ばずたぶん使えます。

画像をゆっくり動かして表示させるやつの機能

Ken Burns エフェクト風エフェクト
CSSの設定次第にはなりますが、iMoviesやiPhotoのようにKen Burns エフェクト風のスライドショーを表示させる事ができます。

デモサイト

https://lab.synck.com/js/photoObject.js/

最新版を無料ダウンロード

画像をゆっくり動かして表示させるやつの更新履歴

更新日 バージョン 更新内容
2019-07-12 1.0.0

コメント欄

2020-05-08 13:41:23質問者さん
で、設置っていうのかサーバーアップっていうのか、...どうやるのですか？
2020-05-11 14:48:15和田憲幸さん
ご利用のWebサーバにFTPソフトなどを用いてアップロードします。スタンドアロンで利用するスクリプトではないため、Webサイトなどに組み込むためのスクリプトになります。
2021-09-29 13:55:40転校生さん
お世話になっております。ありがたく使用させて頂いております。
質問ですが画像が2枚だけだと一瞬暗転するのですが修正は可能でしょうか？
同じ画像を交互に2回表示させれば解決するのですが、少し気持ちが悪いので質問させて頂きました。
2021-09-29 19:57:32和田さん
> 転校生さま
修正はできるとは思うのですが、対応に時間がかかりそうなので、ご指摘いただいた代替案で運用いただけると幸いです・・・。
2021-09-30 22:36:55転校生さん
了解です！
ご返信ありがとうございました。
2021-10-29 15:47:36転校生さん
以前質問させて頂いた者です。
画像が切り替わる際に一枚目に設定している画像が一瞬映るのですが、修正は可能でしょうか？
▼閲覧環境
Windows 10
chrome,firefox
大変お忙しいとは思いますが、どうぞ宜しくお願いいたします。
2021-10-29 21:16:33和田さん
できなくはないと思うのですが、現在ちょっと仕事が立て込んでおりまして、ババッと対応するのはちょっと難しそうでございます・・・すいません・・・。
2021-10-30 06:13:12転校生さん
ご多用の所、返信をいただき恐縮しております。
自分にできるか分かりませんが修正してみようと思います。
万が一、修正できたら差分ファイルをお送りいたします。
お仕事頑張ってくださいノシ
2021-10-30 14:37:40転校生さん
一枚目に表示する画像が切替時に一瞬表示されるので、一枚目に使用するエフェクトのCSSへ
キーフレームを付けて透明にするようにしています。

div.photoObject span.anime_out_zoomin {
transform: scale(1.2);
animation:ani 10s ease; //キーフレーム設定
animation-fill-mode:forwards; //アニメーションの最後で止める
}

@keyframes ani {
0% { opacity: 1; }
90% {opacity: 1;}
100% { opacity: 0;}
}

ウンコみたいな対応ですが、一応の対応策としてお知らせいたします。
ごめんなさい。
2021-10-31 09:51:58和田さん
> 転校生さま
すいません、解決策までご提示いただきまして！大変たすかります！こちらこそ参考にさせていただきます！