「スマホ対応」タグアーカイブ

Ajax他, CSS, スマホ・パソコン・Web関連

スマホ完全対応、IEも対応のモダンでオシャレなフォトスライダーjQuery

コメントする

スマホPC対応。オシャレなフォトスライダー、モダンスライド

 

モダンスライドのデモはこちら。

CSSとjQueryだけで導入できる。

レスポンシブ完全対応。

スマホのフリック、PCのマウスクリックしながらのスライドアクション、右下のサムネイルクリック、左右の矢印でスライドを動かすことができる。

また、オートスライドも設定可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

中に入っているもので編集するもの

・js/sequence.js
オートプレイ、エフェクトの切り替え、ループなどの設定が行える。

・css/sequence-theme.modern-slide-in.css
画像の大きさ、読み込む画像の名前などを変更できる。

 
 

HTMLの<head>と</head>の間で読み込む

<link href=”css/sequence-theme.modern-slide-in.css” rel=”stylesheet” media=”all”><!– modern-slide –>
<!–[if lt IE 9]>
<script src=”scripts/respond.min.js”></script>
<![endif]–>

respond.min.js　はIE対策用に必要。

順番に注意。
 
 

HTMLのスライダー部分

少し長いが、スライダー3枚分＋右下のサムネイル3個分だ。

<div id="sequence" class="seq">

<div class="seq-screen">
<ul class="seq-canvas">

<li class="seq-in">
<div class="seq-model">
<img data-seq src="images/model1.png" alt="モデル1" />
</div>
<div class="seq-title">
<h2 data-seq>Modern Slide In slide1</h2>
<h3 data-seq>スマホ、タブレット、PCに対応しています。</h3>
</div>
</li>

<li>
<div class="seq-model">
<img data-seq src="images/model2.png" alt="モデル2" />
</div>
<div class="seq-title">
<h2 data-seq>slide2</h2>
<h3 data-seq>スマホのフリックでも、PCのクリックしながらのマウスアクションでもスライドしていきます。</h3>
</div>
</li>

<li>
<div class="seq-model">
<img data-seq src="images/model3.png" alt="モデル3" />
</div>
<div class="seq-title">
<h2 data-seq>簡単インストール</h2>
<h3 data-seq>誰でも簡単にインストールできて、カスタマイズも思うがまま。</h3>
</div>
</li>

</ul>
</div>

<fieldset class="seq-nav" aria-controls="sequence" aria-label="Slider buttons">
<button type="button" class="seq-prev" aria-label="Previous">Previous</button>
<button type="button" class="seq-next" aria-label="Next">Next</button>
</fieldset>

<ul role="navigation" aria-label="Pagination" class="seq-pagination">
<li><a href="#step1" rel="step1" title="slide 1へ"><img src="images/tn-model1.png" /></a></li>
<li><a href="#step2" rel="step2" title="slide 2へ"><img src="images/tn-model2.png" /></a></li>
<li><a href="#step3" rel="step3" title="slide 3へ"><img src="images/tn-model3.png" /></a></li>

</ul>
</div>

 
 

画像はデフォルトでは model1.png model2.png ….としている。

 
 

</body>の直前でjsファイルを読み込む

<script src="scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/hammer.min.js"></script>
<script src="scripts/sequence.js"></script>
<script src="scripts/sequence-theme.modern-slide-in.js"></script>

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

 
モダンスライドのデモはこちら。

Ajax他, CSS, スマホ・パソコン・Web関連

リンクに#を入れてクリックしたら、なめらかにスクロールして移動させる方法

コメントする

コピペOK。これだけで#のリンクをクリックしたら自動でスクロール移動に。もちろんスマホ対応。

リンクをタップしたりクリックしたら、パッと切り替わるのではなく、にゅるーっと動いていく#リンクがある。これを導入する方法を紹介。

なめらかスクロールのデモページはこちら

 
 

用意するもの

・scroll.js
・jQueryファイル(HTMLで直接読み込むなら用意しなくてもいい)
 
 

HTMLへの記述方法

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– scroll –>
<head>
<script type=”text/javascript” src=”js/scroll.js”></script><!– scroll –>
<head>

こんな感じで、jqueryとscroll.jsを読み込む。

あとはリンクで #xxx といつも通り記述するとなめらかにスクロールしていく。

まとめてダウンロードする場合はこちら
・scroll.zip
 
 

jsファイルの内容と簡単な解説

$(document).ready(function(){
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});

上から順に、

a hrefの中に#を使っていた場合
そのハッシュ(#)をターゲットにして
なめらかにスクロールするアニメーションだよ

という意味。

.animate({scrollTop: targetOffset}, 1000);
ここの数字を大きくすればゆっくり動き、小さくすれば早く動く。
この例の1000だと、1000ミリ秒=1秒なので、1秒で目的地に到着する。

なめらかスクロールのデモページはこちら