スタッフブログ

最新のブログ更新情報RSS

>> ブログの一覧へ

次へ>>

WEB作成備忘録 ~jquery編~ [ちっち♡とtanaka

投稿日時:2017/07/04(火) 16:22

CSS3 Animate It

要素にclassを指定するだけで、簡単実装出来るおすすめjQueryプラグインです。

配布サイトと利用できるアニメーションの一覧はこちら 

スライド、フェードなど種類もかなり沢山あって、ちょっと面白い動きのものもあります。



<設置方法>
animations.cssをheadで読み込み
css3-animate-it.jsをbodyの最後で読みこませました。

<基本的な動かし方>

動かしたい要素に「.animated」と「.与えたいアニメーション効果のclass名」を付けて、

その親要素に「.animatedParent」を付けるとOKです。

<スクロールに合わせて、動きをずらしたい場合>

親要素にanimatedParentと 「data-sequence=”〇〇”」で秒を指定
「.animated」と「.与えたいアニメーション効果のclass名」を付けた動かしたい要素に 「data-id=”1”」
と番号をふる






 

コメント(0)>> 続きを読む

WEB作成備忘録 ~スライダー編~ [ちっち♡とtanaka

投稿日時:2017/06/08(木) 14:35

松岡建設のもう一つのHPをようやくリニューアル致しました。

Googleから、モバイルフレンドリーではありませんと
表示され、早くなんとかしなくちゃ~と
焦りながらも、なかなか手を付けられずにいましたが、
ようやく、リニューアル。

色々検討した結果、HTML4.01からHTML5へ。

時短と知識不足を補うためbootstrapを使って作成。

ようやくレシポンシブ化致しました。

作成者は素人でございます

実際見て頂けると分かりますが、多少不具合もあります・・ツッコミ所満載です。

・・が、大きな心で見て頂けたら嬉しいかな~、と。

でもって、もし、『その直し方知ってるよ~』って方がいらしたら

ご教示頂けたら、超嬉しゅうございます

取りあえずは、自分のための備忘録としてすこしずつまとめて行く予定です。


<レシポンシブ対応 スライダー編(色々試しましたので。)>

1.flex slider 結局はこれにしました。
やはり有名スライダーだけに解説サイトが多いし、設置も簡単。
ただし、カルーセルスライダーにすると、動きが変。
(エンドレスで回るようには出来ず)
MITライセンス 商用利用OK

2.bxSlider
こちらも有名どころですね。
対応プラウザも多いし、flexsliderとこちらで悩みました。今度作る時はこれかな。
MITライセンス 商用利用OK

2.iView Slider
キャプションの動きにスピードがあってかっこいい!!
エフェクトも種類が豊富。 思ったより設置も簡単で、キャプションの位置、動き、背景色など
細かくカスタマイズも出来る。クールなサイトにはオススメ。

3.SLIT SLIDER REVISED
画面、真ん中から左右、上下にパカッと割れるという超個性的なスライダー。
ちょっと変わったサイトを作りたい、インパクト狙いなら有かも。
MITライセンス

4. slick
オプションが豊富なので、実際に使うには勝手がいいかな。
MITライセンス

5.ElasticSlideshow
画像とキャプションがふわっと変わります。上品な感じに仕上げたい時に使いたいかな。
ライセンス不明

6.Rotating Image Slider
女性向き?(デモ画像のせいかもしれませんが)画像四枚がカタカタと扇状に動き変わります。
おしゃれなサイト向け。
ライセンス不明

7.Parallax Content Slider
パララックスで文字と画像が動きます。動きがアニメチックで個性的です。
他のサイトと差を付けたい時にいいかも。

8.Skitter
画像のエフェクトがかっこいい。
画像を魅せたい時にはいいと思う。
ライセンス 不明



番外編

CSS3FullscreenSlideshow

jQueryを使わずcssで背景画像を切り替えられます。
設置は簡単でした。シンプルに画像切替だけならこれも有りかな。
  


 

コメント(0)>> 続きを読む

福岡県立三池高校100周年記念行事 [ちっち♡とtanaka

投稿日時:2017/05/26(金) 11:21

だんだんと日差しが強くなって来ましたね~汗っかきの私にとってはつらい季節です

子供が通う高校が2月22日で百周年を迎えた記念行事の一つ
三池工業高校との野球招待試合が大牟田球場で行われ、球場集合だったらしく
おれごんでランチしたみたいです(パスタ大好きなんです

        201706091136_1-250x0.jpg   201706091136_2-219x188.jpg

美味しかったけどまだ食べたいとLINEきましたおなか一杯にならなかったのかな?www

試合は父母も見に行けたのですが仕事でしたので断念しましたが、多くの方がいらしてたらしいです
結果は三池工業高校が勝利したそうですが楽しめたそうです。次は運動会やね

   201706091136_3-200x0.jpg     201706091136_4-298x249.jpg




         

コメント(0)>> 続きを読む

ジャニーズWEST!!24魂DVD♡ [ちっち♡とtanaka

投稿日時:2017/05/23(火) 16:03

今日はフラゲ日フラゲ日私も参戦した
1stドームツアー24魂DVDのフラゲ日
京セラドームオーラスに参戦したんですもーー
照くん最高虹色ジャス民ですが🌈やっぱ照史やな
BADの時から好きでした歌も、演技も、笑顔も、ぽっちゃりな所も
ゆっくり見ましょ笑って泣いて感動する事でしょう

 ジャニスト最高 

               201706071628_1-302x336.jpg
       

コメント(0)>> 続きを読む

タカガールデイ♡♡♡観戦第三弾!! [ちっち♡とtanaka

投稿日時:2017/05/15(月) 15:05

いやーホークス話が続くとは
         
今回は下の子がお友達と5月14日タカガール観戦してきました。
昨年はチケとれたんですがダメで(宗りん効果?)かな?
子供もなかなか天神までお出かけできないので今回は楽しみにしてて
試合の随分前に2人で出かけて行きました

下の子、ごはんよりパンが好きでして天神にお気に入りのパン屋
ハートブレットアンティークというお店があるんですこちらの
アップルパイパン?かな?おいしいの価格もお手頃
ここがモーニングしているみたいで201706071552_1-232x333.jpg
今度いこーねと、LINE

パンの話が長くなりましたが試合も盛り上がり外野席はコールがすごく
テレビ観戦でもコールしてる(かわいい)楽しかったけど・・・2-9で
楽天イーグルスに負けちまった

                   201706081129_1-300x0.jpg
        
        
 

コメント(0)>> 続きを読む

次へ>>