「jquery」タグアーカイブ

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関連

画面をスクロールしていくと、画像がフワッと動きながら出てくるエフェクト

コメントする

画面スクロールに合わせて画像がフワッと動きながら出てくるエフェクト

 

スクロールで画像がフワッと動きながら出てくるエフェクトのデモページ
はこちら。

CSSとjQueryだけで簡単に実現できる。

 
 

用意するもの

・moveinimg.js
・moveinimg.css

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

moveinimg.zip

moveinimg.js　の中身

$(function(){
$(‘.moveinimg’).css(“opacity”,”.1″);
$(window).scroll(function (){
$(‘.moveinimg’).each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos – windowHeight + 200){
$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
}
});
});
});

 
適当な解説：
.moveinimg のclassがついている時にまず画像を半透明にセットする。

(“opacity”,”.1″);　の数字を変更することで透過度を変更できる。

if (scroll > imgPos – windowHeight + 200){　これで、画像まで200pxのところまでスクロールすると実行。

$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
で、marginを0pxに、更に透過度を透過なしに、1秒で変更。

 
 

moveinimg.css　の中身の必要な部分だけ

.movein {
position: relative;
min-height: 210px;
display: block;
}
.moveinimg {
margin-left: -100px;
}

絶対に必要なのが 親要素の .movein にposition:relative;
.moveinimgの初期位置をずらしておく。→ のちのちjQueryで margin:0;に移動させる。

 
 

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

<link rel=”stylesheet” type=”text/css” href=”css/moveinimg.css” /><!– moveinimg –>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script><!– moveinimg –>
<script type=”text/javascript” src=”js/moveinimg.js”></script><!– moveinimg –>

先ほどの、moveinimg.cssとmoveinimg.jsとjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div class=”movein”>
<p class=”moveinimg”><img src=”img/image1.jpg” alt=”image1″ /></p>

画像は準備すること。

div class=”movein” の画像が最初は、半透明で、margin -100px セットされているが、スクロールするとふわっと表示される。

 
 

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

moveinimg.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

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

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

コメントする

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

・sudden.js
・sudden.css

sudden.js　の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css　の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

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

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.cssとsudden.jsとjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
この部分は任意の内容に変更可能。

 
 

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

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。