[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード
2022-02-02 02:29:45
この記事の例はアプレットで書かれていますが、実現する機能には影響ありません。
wxml
画像の入ったボックスをもう一回コピーして、ループしている画像の最初と最後をつなげます。
<view class="scrollbox dis-flex">
<view class="imgItem dis-flex" style="animation: {{computedAni}};">
<image src=". /img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
</view>
<view class="imgItem dis-flex" style="animation: {{computedAni}};">
<image src=". /img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
</view>
</view>
wxss
.dis-flex {
display: flex;
display: -webkit-flex;
}
.scrollbox {
margin: 30px;
text-align: center;
border: 1px solid blue;
height: 220rpx;
align-items: center;
overflow: hidden;
}
.imgItem {
animation: 24s rowup linear infinite normal;
}
.imgItem image {
width: 200rpx;
height: 200rpx;
margin: 0 20rpx;
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-1000px, 0, 0);
transform: translate3d(-1000px, 0, 0);
}
}
js
速度を調整するポイントは、アニメーションのタイミングがループ内のアイテムの数によって動的に制御されることです
Page({
data: {
images: new Array(4),
computedAni: ''
},
onLoad: function () {
this.setAniSpeed(this.data.images.length)
},
setAniSpeed (num) {
let time = Math.ceil(num / 5 * 15) // Here is the animation time of 15s for 5 images, you can adjust it yourself
this.setData({
computedAni: `${time}s rowup linear infinite normal`
})
}
})
コードスニペットを見るにはここをクリック
https://developers.weixin.qq.com/s/4gGngEm67Zlh
水平方向の無限スクロールのサンプルコードを達成するために純粋なCSS3のこの記事は、これに導入され、より関連するCSS3水平方向の無限スクロールの内容は、以前の記事のスクリプトのホームを検索したり、次の関連記事を閲覧し続け、私はあなたが将来的に多くのスクリプトのホームをサポートして願っています!.
関連
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法
-
左上または右上にリマインダーのドットを表示するCSS3サンプルコード[CSSチュートリアル
-
[CSSチュートリアル】2要素ブレンド効果(スティッキー効果)を実現するCSS)
-
css3]アニメーションとトランジションの違いについて
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。
-
[CSSチュートリアル】CSS疑似要素を使って、連続する複数の要素のスタイルを制御する