jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。
scroll-switch-animation
まずはリンク先と、そのソースを見てみてください。 続きを読む
特定の位置までスクロールしたときにアニメーションさせる
コメントをどうぞ
月別アーカイブ: 2014年1月
jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション
2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。
質問１
1つだけならうまくいきますが、２つ設置するとうまくいきません。（同時に作動してしまう。）
質問２
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。
しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。
こういう場合の対処法については、どうしたらいいでしょうか？
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。
製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com
先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。
css図形
2014-01-17 勉強会
今回は先生から急遽病気で行けなくなったとの連絡をもらいましたので、先生ぬきでの勉強会でした。
サイトを見ていて気になるエフェクトってありますよね。そんなときはFireFoxのFireBugでhtmlとcssをコピってしまおう。そんでもってcssの値をかえたり、プロパティ自体をオフにしてみたりする事で理解を深める。「編集ボタン」でhtmlをコピー、cssをコピーしてhtmlファイルにペースト。どのcssをコピーするかは各自のセンスで。知らないプロパティとかが出て来てもとりあえずコピる。動けばとりあえずOK!
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 |
*, *:after, *:before { -moz-box-sizing: border-box; } nav a { color: #FFFFFF; display: inline-block; font-size: 1.35em; font-weight:400; letter-spacing: 1px; margin: 15px 25px; outline: medium none; position: relative; text-decoration: none; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); text-transform: uppercase; } .cl-effect-5 a span { display: inline-block; position: relative; transition: transform 0.3s ease 0s; } .cl-effect-5 a:hover span, .cl-effect-5 a:focus span { transform: translateY(-100%); } .container > section { margin: 0 auto; padding: 10em 3em; text-align: center; } .color-5 { background: none repeat scroll 0 0 #CD4436; } .cl-effect-5 a { height: 1em; overflow: hidden; padding: 0 4px; } .cl-effect-5 a span:before { content: attr(data-hover); font-weight:700; position: absolute; top: 100%; transform: translate3d(0px, 0px, 0px); } |
html
|
1 2 3 4 5 6 7 8 9 |
<section class="color-5"> <nav id="cl-effect-5" class="cl-effect-5"> <a href="#cl-effect-5"><span data-hover="Seraglio">Seraglio</span></a> <a href="#cl-effect-5"><span data-hover="Sumptuous">Sumptuous</span></a> <a href="#cl-effect-5"><span data-hover="Scintilla">Scintilla</span></a> <a href="#cl-effect-5"><span data-hover="Palimpsest">Palimpsest</span></a> <a href="#cl-effect-5"><span data-hover="Assemblage">Assemblage</span></a> </nav> </section> |
質問
・フォントの太さが参考サイトと違うのはなぜ？
・IE/Firefox だと文字の高さをキープするけど、Mac/Firefoxだと文字の高さが（幅も）キープされないのはなぜ？
今日の勉強会は謎をのこしつつ終了しました。
2014-01-10 勉強会
今年最初の勉強会はジェイコさん、キイさんが仕事で製作中のサイトやこれから取りかかるサイト制作の質問など。
あと、前からあるのに意外と知らないテーブルレイアウトについて。
今日ではサイトの見た目をいじるのはCSSでやるのが当たり前ですよね。テーブルでレイアウトした昔のサイトを見ると古くさく思いますよね。テーブルでレイアウトするのは、良くない！とされています。理由は「SEOに有効なマークアップが出来ない」「タグが入れ子になりすぎて見にくい」「面倒くさい」などなどです。
しかし、コンテンツに出てくる内容が表組の場合、テーブルはありです。
例えばhttp://juicyeyes.com/access.html（この場合はdl, dt, ddでも良いと思う）
そのテーブルのレイアウトについてです。
| 役職 | 氏名 | 所属 |
|---|---|---|
| 会長 | 山田 一郎 | 営業 |
| 副会長 | 山田 次郎 | 営業 |
| 幹事 | 野比 ノビタ | 営業 |
| 幹事 | 小山 順三郎 | 営業 |
| 幹事 | 岸野 太郎 | 営業 |
| 幹事補佐 | 来如意 | 営業 |
以下のようにtheadとtbodyに分けると見やすいです。ちなみにtfootというのもあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <thead> <tr> <th>役職</th><th>氏名</th><th>所属</th> </tr> </thead> <tbody> <tr><th>会長</th><td>山田 一郎</td><td>営業</td></tr> <tr><th>副会長</th><td>山田 次郎</td><td>営業</td></tr> <tr><th>幹事</th><td>野比 ノビタ</td><td>営業</td></tr> <tr><th>幹事</th><td>小山 順三郎</td><td>営業</td></tr> <tr><th>幹事</th><td>岸野 太郎</td><td>営業</td></tr> <tr><th>幹事補佐</th><td>来如意</td><td>営業</td></tr> </tbody> </table> |
|
1 2 3 4 |
table{border:1px solid #999;border-collapse: collapse;} th{background:#999;} thead th{background:#fcc;} td{background:#ccc;} |
——————————–
ご覧の皆様、今年もよろしくお願いします！
お仕事
遅くなりましたが、明けましておめでとうございます。
今年の初投稿です。
フリーランスでの仕事探し、ちょっとしたお小遣い稼ぎ、腕だめし、etc….
おもしろそうですよ。
“クラウドワークスなら、アプリ開発・ホームページ・ロゴ・ライティングなど全国のプロフェッショナルと企業がお仕事を気軽に受発注できます！”
という事らしいです。サイトより。