自分できれいなフォトフレームを作る特効
2777 ワード
フォトフレーム
効果図
picturebox.gif
HTML構造
主要有两个大部分组成一个是承载照片的照片框容器
， 。
CSS
CSS
.wch-scroll-picture{
height: 100%;
width: 100%;
display: block;
box-sizing: border-box;
overflow-y: scroll;
transition:all 2s ease 0.2s;
}
.wch-scroll-picture::-webkit-scrollbar { width: 0 !important }
.wch-scroll-picture { -ms-overflow-style: none; }
.wch-scroll-picture { overflow: -moz-scrollbars-none; }、
プロパティの height: 100%;width: 100%;がコンテナの さを100% に していることをできるだけ しく します.bodyとhtml の さと も100% であることを にします.display: block;box-sizing: border-box;はブロックレベル に され、ボックスモデルはボーダー き モデルに されます.overflow-y: scroll;は、 Yのはみ し がスライド となるように けられている.transition:all 2s ease 0.2s;プロパティのスムーズな の .wch-scroll-picture::-webkit-scrollbar { width: 0 !important }
.wch-scroll-picture { -ms-overflow-style: none; }
.wch-scroll-picture { overflow: -moz-scrollbars-none; }
[ オーバーライド](Force Override)サイドバーの を0に し、サイドバーを にします.
に たのは の ですが、すべての スタイルが なので、ここでは1つだけ ました..wch-picture{
height: 100%;
width: 100%;
background: url(./img/dawn.png) no-repeat 0 0;
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
}
ここで しなければならないのは さと が100%に されていると にbackground-attachment: fixed;が されているという の は、この がページをスライドするときに に にスライドしないことです.
JS
var index = 1;
window.setInterval(function(){
var sc = window.document.getElementsByClassName("wch-scroll-picture")[0];
var height = document.body.clientHeight;
sc.scrollTo({top:height*index,behavior:"smooth"})
index = index +1;
if(index == 4){
index = 0;
}
}, 2000);
こちらはタイマータイミングを ってフォトフレームをそれぞれ う に めするのが で、 で、 も うことはありません.
まとめ
コードリソースはリンクをクリックしてダウンロードできるので、 すべき があります.
ページに さなドットを していない の ページ の を する. が すぎると、 された がページトップに らず、ページが れてしまう.