サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
reiwinn-web.net
3系swiper、4系swiperのオプション記事を以前書いたんだけど、また久しぶりに公式見たら6系まで進んでたから再々記事。 ※この記事は実装方法が解説しているというよりは、オプションを実際触ってみてその効果をひたすら書いた記事になります。 以前のバージョンの記事も需要ありそうだから残しておく。 【4系】こちら 【3系】こちら ※2系以前と5系は記事にしてないです。許して。 5系についてはオススメサイトのリンクを貼っておくのでよければこちら参考に! Web Design Leaves様の5系に関する記事 swiper.jsってなんぞ? swiper.jsの公式サイト 簡単に言うと、スライダー系のJSプラグイン。スライダーはswiper以外にもいくつかあるけど、中でもオプションが多く、更新も多い個人的にはかなり熱いプラグイン。 このswiper.jsのメリットデメリットはこんな感じ。 メリ
これは旧バージョンのswiperのオプションについて書いた記事です。最新版(6系)のオプションについてはこちらにあります 以前もswiper.jsのオプションについて書いた記事を書いたんだけど、久しぶりに公式見たら一新されてて震えたから再度記事として上げる。 swiper.jsってなんぞ? swiper.jsのダウンロードサイト 簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識してる。 このswiper.jsのメリットデメリットはこんな感じ メリット オプションが非常に多い。前に記事したbxsliderより多い。コールバック関数(タッチ、クリックなどをした時に関数を実行するもの)の数が特に多い。 jQueryが不要。なんだかんだプラグインの多くはjQueryが必要になることが多いけど、これは不要。サイ
どうも、レーウィンです。 今回は簡単なものになるけど、順番にアニメーションさせる方法を紹介。jQuery使用。 htmlはこんなん <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> cssはこんなん ul li { opacity: 0; transition: opacity 1s; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; } ul li.active { opacity: 1; } これを1から順番に表示させるコードはどうすればいいか。setTimeoutで1個1個やるのはさすがに手間。 なので、eachとeqを使いましょう。 $(function() { $("ul li").each(function(i) { setT
アニメーション系のプラグインとしては大御所のTweenMax.js。 ちなみに、TweenMax自体はjQuery不要だけどjQuery使用前提で書いてます。 いつものごとく、スムーススクロールとか設置してないからブラウザの検索機能使ってね。 TweenMaxとは 公式サイトはこちら https://greensock.com/tweenmax 世界的に有名なアニメーション系のJavascriptプラグイン。外国の、「このサイトすげえええ!」ってサイトでも使ってたりする。このプラグインすげえええ! 実際問題、アニメーションと聞くとhtmlとcssと簡単なjs(スムーススクロールとか)しかしたことない人にとっては小難しいと感じるかもしれない。 特に、CSS3のanimationやtransitionから入ろうとすると、よくわからないし大したアニメーションが作れない!ってなる。少なくとも自分は
これは旧バージョンのswiperのオプションについて書いた記事です。最新版(6系)のオプションについてはこちらにあります ちょっと機会があって、swiper.js使ったからその時のメモ。 本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく( ブラウザの検索機能を使ってくだしあ。 ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。 あと、例が欲しいところがあれば気まぐれで追記します。 これは旧バージョンのswiperのオプションについて書いた記事です。最新版(6系)のオプションについてはこちらにあります swiper.jsってなんぞ? swiper.jsのダウンロードサイト 簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識し
スライダー系のjsの中でも使いやすくて有名なbxslider.js その中で幾つかオプションがあるんだけど、複数スライドがある時にそれがうまくいかなかった時のあれこれ。 なんか日本語でこれ書いてるところ見つけられなかったから次やる時のメモ。 ※2016年11月29日修正・追記しました。適当に書いたのに結構アクセスくるから。 はじめに bxslider.jsにはdestroySliderとかreloadSliderとかの機能がある。 destroySliderはスライダー削除するやでってやつ。まんま。 reloadSliderはスライドをページ読み込んで最初に表示される状態にすること。 reloadSliderの内部処理的にはdestroySliderした上で再形成している。 で、いろいろ見よう見まねで最初こんな感じにした。 $(window).load(function() { var s
このページを最初にブックマークしてみませんか?
『reiwinn-web.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く