jQueryでレスポンシヴ|画面いっぱいに表示するスライダー
タグ別アーカイブ: jQuery
府中でホームページ制作
自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。
http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html
特定の位置までスクロールしたときにアニメーションさせる(jQueryとcss)
2014-01-31と2014-02-07の2週にわたり勉強会でやった「特定の位置までスクロールしたときにアニメーションさせる」というのを自分なりにやってみました。
オブジェクトの数だけif文を書くという面倒なやり方ですが、理解しました。オブジェクトの数だけif文を書かなくて済む方法も先生に教わりましたが、まだちょっと難しいので理解していません。
とりあえず自分のサイトにアップしました。
http://nobu-69.com/others.html
授業に参加したみなさんは、どれくらい理解しましたか?
僕は理解するのに結構いじくりまわしました。時間も費やしました。授業で先生の説明を聞いただけで技術はモノになりません。聞いた事を基に家でいろいろやらないとダメです。
なので、細かい説明はしません。自分でやってみてつまずいた箇所があったら教えて下さい。分かる範囲でお答えします。
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
html,body { margin: 0; padding: 3em; } section{ padding:30em 0 } /*1つめ*/ .box { height: 10em; margin: 0 1em 2em 0; position: relative; border: 2px solid #333; } .box:before { content: "1回転して3倍に拡大"; display: block; position: absolute; left: 45%; top : 45%; background-color:pink; transition: 0.5s; } .on.box:before { transform: scale(3) rotate(1turn); background-color:purple; color:#fff; } /*2つめ*/ .box2 { height: 10em; margin: 0 1em 2em 0; position: relative; border: 2px solid #333; } .box2:before { content: "半回転して2倍に拡大"; display: block; position: absolute; left: 45%; top : 45%; background-color:indianred; transition: 0.5s; } .on.box2:before { transform: scale(-2) rotate(1turn); background-color:skyblue; } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function(){ var scrollBottom; var wHeight; var sec1Top = $("#sec1 .box").offset().top;//1つめ varの関数名はif文で使われる 動かしたいオブジェクトの数だけこの行も必要 var wowwow = $("#sec2 .box2").offset().top;//2つめ varの関数名はif文で使われる function getScrollTop(){ wHeight = Math.floor($(window).height() * 0.5);//0.5は画面の真ん中、0はTOP、1はBOTTOMで変化 scrollBottom = $(window).scrollTop() + wHeight; //動かしたいオブジェクトの数だけifとelse(2つでワンセット)がある if(scrollBottom >= sec1Top){ $("#sec1 .box").addClass("on"); } else{ $("#sec1 .box").removeClass("on"); } if(scrollBottom >= wowwow){ $("#sec2 .box2").addClass("on"); } else{ $("#sec2 .box2").removeClass("on"); } } $(window).on("load scroll", getScrollTop); }); //.offset() .scrollTop() .addClass .removeClassはjQueryの変数なので「ヌー」で調べられる。 //仕組みは、ある位置(ここでは0.5に来た時)にcssが入れ替わる。.boxから.box onに。 //変化する矩形は疑似要素でcssのtransformでアニメーションしている。 |
html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section id="sec1"> <div> <h1>Sec1</h1> <div class="box"></div> </div> </section> <section id="sec2"> <div> <h1>Sec2</h1> <div class="box2"></div> </div> </section> |
jQueryのエラーチェック
2014-01-31 勉強会の議事録です。
この日もいろいいろな事を学びました。その中の1つをまとめました。
jQueryのスムーススクロールってありますよね。ページ内リンクで、しゅるしゅる〜って移動するやつ。私がずっと前から使っていたものは、jQuery本体とトリガーのみで実装する簡単にできるやつでした。それを設置しているページに別の新しいjQueryを入れました。そしたら、それが動きません!jQuery本体のバージョンが古いのかなあ?と思い最新版にしました。jQuery本体1.5.1を1.10.2にバージョンアップしました。それで、新しいjQueryは動きましたが、今度はなんと!スムーススクロールが動きません。
そういう場合は、FireBugのコンソールでチェックです。先生にチェックの仕方を教わりましたが、こちらのサイトにもありますので、見て下さい。Firebugでできること: ソースコードのエラー解析
これで、エラーが出ていたらその箇所を修正すれば良いのです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//スムーススクロール $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000;// ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); |
コンソールチェックで下から4行目の $.browser がエラーですよ!と出ていたので。それを直します。
先生のアドバイスで、下から4行目を下記のように書きかえました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//スムーススクロールzzzzzzzz $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000;// ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); |
これで直りました!やったー。
jQuery-1.9から「jQuery.browser」が完全にサポートされなくなっていたようです。jQuery $.browseで検索すると出て来ます。
jQueryがうまくいかないという事はよくあります。原因はさまざまですが、今回紹介したようにまずはエラーチェックをするのが良いでしょう。
特定の位置までスクロールしたときにアニメーションさせる
jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。
scroll-switch-animation
まずはリンク先と、そのソースを見てみてください。 続きを読む
jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション
2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。
質問1
1つだけならうまくいきますが、2つ設置するとうまくいきません。(同時に作動してしまう。)
質問2
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。
しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。
こういう場合の対処法については、どうしたらいいでしょうか?
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。
製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com
先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。
ドロワーメニュー・css/jQ
2013-11-15 勉強会の議事録です。
cssでドロワーメニュー をやりました。(jQuery versionもやりました。)
僕のサイトhttp://nobu-69.com/others.htmlに書きましたのでご覧下さい。
「cssでドロワーメニュー(jQuery versionもあるよ!) 2013/11/15」をクリックして下さい。
Drawer(ドロワー)とは机とかの引き出しという意味です。基本的には表示領域が小さいスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。
スマートフォン向け jQuery touch slide swipeで画像表示させる その2(解決)
前回質問したスマートフォン向け jQuery touch slide swipeで画像表示させるについて、ひとまず解決したので内容を書きます。
これは、カラーミーの商品詳細ページ(スマートフォンのテンプレート)で使用しました。
カラーミーはプランによって、商品詳細ページに掲載できる画像の枚数が決まっています。
私は4枚までのプランなので、今回は4枚の画像をスワイプさせました。
カラーミーショップは独自タグがあって画像を読み込む為に、if文?が使われています。
これがカスタマイズする時に、探し出すのが少し難しいのです。
今回は1枚目の画像とカラーミーのデフォルトで、<商品画像その他>とわかれている部分を4枚連続で表示できるようにhtmlを変更してます。そこに、下記のCSSを使用しました。CSSはコメントアウトしてる部分を変更しました。
※今回の大事な所
.deviceを100%
.swiper-containerにmax-width
他にも大事な指定はあると思いますが、ここが大事なのかな?と思います。
スマホを縦にした時は全体画像が見えて、画像の上に矢印が見えるようになります(矢印にz-indexを指定)。
横にスマホを回転した時は画像の大きさはそのままで、.deviceが100%になります。
画像の大きさを100%にすると横に回転した時に、商品の全体画像の一部が表示されて全体画像が見えないので、画像サイズは固定したほうが見やすいと思いました。
公開したページ(スマートフォン用)こちら
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!--商品画像--> <div class="device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><{if $product.img_url != ""}> <img id="swipe_image" src="<{$product.img_url}>" alt="<{$product_name}>の画像"> <{else}> <img id="swipe_image" src="http://img.shop-pro.jp/tmpl_img/13/now200.gif" alt="NOW PRINTINGの画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot1_url != ""}> <img src="<{$product.ot1_url}>" alt="<{$product_name}>の画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot2_url != ""}> <img src="<{$product.ot2_url}>" alt="<{$product_name}>の画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot3_url != ""}> <img src="<{$product.ot3_url}>" alt="<{$product_name}>の画像"> <{/if}></div> </div> </div> <div class="pagination"></div> </div> <!--/商品画像--> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
/* =============================================================== Basic Swiper Styles ================================================================*/ .swiper-container { margin:0 auto; position:relative; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; /* Fix of Webkit flickering */ z-index:1; } .swiper-wrapper { position:relative; width:100%; -webkit-transition-property:-webkit-transform, left, top; -webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0); -webkit-transition-timing-function:ease; -moz-transition-property:-moz-transform, left, top; -moz-transition-duration:0s; -moz-transform:translate3d(0px,0,0); -moz-transition-timing-function:ease; -o-transition-property:-o-transform, left, top; -o-transition-duration:0s; -o-transform:translate3d(0px,0,0); -o-transition-timing-function:ease; -o-transform:translate(0px,0px); -ms-transition-property:-ms-transform, left, top; -ms-transition-duration:0s; -ms-transform:translate3d(0px,0,0); -ms-transition-timing-function:ease; transition-property:transform, left, top; transition-duration:0s; transform:translate3d(0px,0,0); transition-timing-function:ease; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { float: left; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } /* Demo Syles */ body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .device { width: 100%;/*-----外枠のBOXサイズ-----*/ height: 300px;/*-----高さ指定-----*/ padding: 30px 0; background: #f2f2f2; margin: 5px auto; position: relative; } .device .arrow-left { background: url(http://micco.pupu.jp/js/Swiper/img/arrows-2.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; z-index: 4;/*-----矢印を画像の上に表示させる-----*/ } .device .arrow-right { background: url(http://micco.pupu.jp/js/Swiper/img/arrows-2.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; z-index: 4;/*-----矢印を画像の上に表示させる-----*/ } .swiper-container { margin:0 auto; height: 100%; max-width: 300px;/*-----画像をスマートフォンを横にしても画像サイズが変わらないように指定-----*/ } .content-slide { padding: 20px; color: #fff; } .pagination { position: absolute; left: 0; text-align: center; bottom:5px; width: 100%; } .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999; box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer; } .swiper-active-switch { background: #fff; } |
こんなに長くなりましたが、まとめてみました。
足りない所があると思います。
まだまだこれからも、カラーミーショップのテンプレート(PCとスマートフォン)をカスタマイズしていくつもりです。
また、宜しくお願いします!
ありがとうございまいた。
スマートフォン向け jQuery touch slide swipeで画像表示させる
Android、iphone、ipadなどで、スワイプ(フリック)操作による画像切り替えをしたいです。
2013-10-18 Friday 勉強会の議事録
jQuery Slide Panel
真中さんのサイトを参考に、jQuery本体を読み込む方法をやりました。
jQuery carousel
スワイプの参考サイトはhttp://www.idangero.us/sliders/swiper/demos.php
DemosのDefaultを参考にしています。
スワイプ(フリック)操作による画像切り替えをするまではできました。
作業中のページは商品詳細ページ
できれば、スマホで見て下さい。m(-..-)m
.device(外枠の黒い部分)width 100%にしました。
画像を読み込んだのですが、画像サイズの指定がうまくいきません。
画像をきちんと表示させるには、%で指定するのでしょうか?
CSSの問題ですよね?その場合、paddingやmarginの事を考えて指定しなければいけないですよね?
雑ですみませんが、画像でまとめてみました。(~_~)
他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか?これだと、表示画像が小さくなりますよね?
宜しくお願いします。
2013-6-7 勉強会
今日は、高橋先生がお菓子(by カバヤ)をたくさん提供してくれました。
ランサーしょうじさん、sa-kaさんは今日もお休みです。。。寂しいな。。。待ってます。。。
勉強会の概要
- 真中さんの質問:jsが動作しない
- 真中さんの質問:WordPressへのYouTube動画の貼付け方
- パソコン倶楽部りんご運営について
- html5で作るWPオリジナルテーマ:2
画像スライド アニメーション
下記のサイトのトップページ中央の画像スライド?アニメーション?
http://www.chanterelle.jp/index.html
これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。(分らないけど)
出来たら本日の勉強会のお題としてお願いします。
—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます!
僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html
html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css3でアニメ</title> <style> .anime { background: url("home.png") repeat-x scroll 0 0 #FFFFFF; width:100%; height:86px; animation:scr1 infinite 30s linear; position:absolute; z-index:10; opacity:0.9; } .anime2 { background: url("cloud.png") repeat-x scroll 0 0; width:100%; height:25px; animation:scr2 infinite 40s linear; position:absolute; z-index:20; opacity:0.9; } @keyframes scr1 { 0% {background-position:0 0;} 100% {background-position:1000px 0;} } @keyframes scr2 { 0% {background-position:0 0;} 100% {background-position:-703px 0;} } h1{font-size:15px;color:#666;} </style> </head> <body> <h1>css3でアニメーション</h1> <div class="anime"></div> <div class="anime2"></div> </body> </html> |
キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。
1 2 3 4 5 6 7 8 |
@keyframes scr1 { 0% {background-position:0 0;} 100% {background-position:1000px 0;} } @keyframes scr2 { 0% {background-position:0 0;} 100% {background-position:-703px 0;} } |
画像が重なっているのは、
position:absolute;
z-index
が効いているからです。
もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。
レッツ チャレンジ!
※ie9.ie8.ie6では動きません。
真中のぶ 備忘録
2013.03.22の勉強会にて
①グローバルメニューを横並びする際にliにフロートしないでli aにフロートしてしまうので、liをフロートする事!これは癖で何度もやってしまうので注意する事!
②バナーサイズに国際標準規格というのがあるのを知りました。
http://www.bana-wave.com/banner/info/bannersize.html
③メディアクエリでスマホやタブレットの大きさに対応する際にブレイクポイントは、横幅600pxだけでいいかも。たくさんやるときりがない。あと、やるなら800。800以下は、横幅%指定。800以上はpx指定。
④cssアニメーション
タブレット、モバイルはie10,firefox,safari,chromeなので問題ない。
デスクトップは、ie9以下は効かないから、ヘッドにif ieでjQueryを実装、または静止画を一枚表示。
サイト制作
ただいま制作中のサイトです。
http://nobu-69.com/manakaa/sample2/
全体的にまだ大まかな状態です。ちいさい突っ込みはいれないように!w
試しに全文モリサワWEBフォントにしてみました。