授業内容(filter機能を使ったアニメーション(ニューストリッカー)、css3フィルターアニメーション(blur,sepia,saturateなど))
過去の授業内容を踏まえてニューストリッカー(テロップのようなもの)を作りました。
paris1204.hatenablog.com
css3フィルターアニメーション
obomemo.com
※フィルターを使用するときはCan I use でブラウザーが対応しているか確認すること。
今回はchromeを使用したのでベンダープレフィックスの設定をしました。
ブラー
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>filter機能を使ったアニメーション</title> <style> p{-webkit-filter:blur(10px);/*can i use でベンダープレフィックすが必要か確認する。 クロームには必要*/ filter:blur(10px); animation-name:textBlur;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes textBlur { 0%{-webkit-filter:blur(10px); } 20%{-webkit-filter:blur(8px);} 40%{-webkit-filter:blur(6px);} 60%{-webkit-filter:blur(4px);} 80%{-webkit-filter:blur(2px);} 100%{-webkit-filter:blur(0);} } </style> </head> <body> <p><img src="img/typographie.png" alt="#"></p> </body> </html>
ニューストリッカー
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ニューストリッカー</title> <style> @charset "UTF-8"; /* CSS Document *//*reset*/ html,body,ul,li{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; margin:0; padding:0; line-height:1.0;} ul,li{list-style:none;} a{text-decoration:none;} #news{ background:rgba(0,0,0,0.9); animation-name:bgColor;/*アニメーションの名前(名前は何でも良い)*/ animation-duration:10s;/*アニメーションの時間の長さ*/ animation-iteration-count:infinite;}/*ループの数*/ #news{ width:100%;/*文字の数によって可変*/ height:30px;/*3行あるliを1行だけ表示させるため*/ overflow:hidden;/*3行あるliを1行だけ表示させるため*/ margin:100px auto 0; font-size:20px; text-align:center; } #news li{height:24px; line-height:24px; padding:3px; color:white; } .news-ticker{ animation:ticker 10s infinite;/* アニメーションプロパティのショートハンド ①keyframesにつける名前 ②アニメの時間 ③ループの回数*/ } @keyframes ticker { /*1行目*/ 0%{opacity:0;transform:translate(0,0);}/*Yがない場合の括弧はxとy*/ 10%{opacity:1;transform:translate(0,0);}/*※Yは必ず大文字で*/ 20%{opacity:1;transform:translate(0,0);} 33%{opacity:0;transform:translate(-400px,0);} /*2行目*/ 34%{opacity:0;transform:translate(400px,-30px);} 43%{opacity:1;transform:translate( 0,-30px);} 53%{opacity:1;transform:translate(0,-30px);} 65%{opacity:0;transform:translate(-400px,-30px);} /*3行目*/ 66%{opacity:0;transform:translate(400px,-60px);} 76%{opacity:1;transform:translate(0,-60px);} 86%{opacity:1;transform:translate(0,-60px);} 98%{opacity:0;transform:translate(-400px,-60px);} 100%{opacity:0;transform:translate(0,0);} } </style> </head> <body> <div id="news"> <ul class="news-ticker"> <li>おはよう</li> <li>こんにちは</li> <li>こんばんは</li> </ul> </div> </body> </html>
以前作成したキリンサイトを模倣したサイトにニューストリッカーとフィルターアニメーションを導入
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>キリンのサイトのように作る</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slide.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/slide.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"><!--Fontawesome--> <meta name="viewport" content="width=device-width"><!--スマホ用に作る時に必要--> </head> <body> <header> <ul class="nav"> <li><a class="a" href="#">商品情報</a></li> <li><a class="b" href="#">キャンペーン</a></li> <li><a class="c" href="#">エンタメ・レシピ</a></li> <li><a class="d" href="#">CVS活動</a></li> <li><a class="e" href="#">企業情報</a></li> <li><a class="f" href="#">お客様相談</a></li> </ul> </header> <div id="container"> <div class="wideslider"> <ul> <li><a href="#1"><img src="img/slide_01.png" alt="" /></a></li> <li><a href="#2"><img src="img/slide_02.png" alt="" /></a></li> <li><a href="#3"><img src="img/slide_03.png" alt="" /></a></li> <li><a href="#4"><img src="img/slide_04.png" alt="" /></a></li> </ul> </div><!--/.wideslider--> <div id="news"><!--アニメーション--> <ul class="news-ticker"> <li>CAFE DE LA PAIX</li> <li>Le dome</li> <li>CAFE DE FLEUR</li> <li>LES DEUX MAGOTS</li> </ul> </div> <ul class="sp_nav"> <li class="one"><a class="a" href="#">商品情報</a></li> <li><a class="b" href="#">キャンペーン</a></li> <li class="three"><a class="c" href="#">エンタメ・レシピ</a></li> <li><a class="d" href="#">CVS活動</a></li> <li class="four"><a class="e" href="#">企業情報</a></li> <li><a class="f" href="#">お客様相談</a></li> </ul> <ul class="grid"> <li class="big"><a href="#"><img src="img/b_01.png" alt="#"></a></li> <li class="sp_01 midium"><a href="#"><img src="img/m_03_sp.png" alt="#"></a></li> <li class="midium aaa"><a href="#"><img src="img/m_01.png" alt="#"></a></li> <li class="small bbb"><a href="#"><img src="img/s_01.png" alt="#"></a></li> <li class="small "><a href="#"><img src="img/s_02.png" alt="#"></a></li> <li class="midium ddd"><a href="#"><img src="img/m_02.png" alt="#"></a></li> <li class="small"><a href="#"><img src="img/s_03.png" alt="#"></a></li> <li class="small fff"><a href="#"><img src="img/s_04.png" alt="#"></a></li> <li class="small"><a href="#"><img src="img/s_05.png" alt="#"></a></li> <li class="small hhh"><a href="#"><img src="img/s_06.png" alt="#"></a></li> <li class="small iii"><a href="#"><img src="img/s_07.png" alt="#"></a></li> <li class="sp_02 small"><a href="#"><img src="img/s_08.png" alt="#"></a></li> </ul> </div><!--#container--> <footer> <div class="inner_sp"> <div class="hako"> <p class="selected">商品情報<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> <ul> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> </div> <div class="hako"> <p>キャンペーン<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> <ul> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○</a></li> </ul> </div> <div class="hako"> <p>エンタメ・レシピ<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> <ul> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> </div> <div class="hako"> <p>CVS活動<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> <ul> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> </ul> </div> <div class="hako"> <p>企業情報<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> <ul> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> </div> <div class="hako"> <p>お客様情報<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> <ul> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> </ul> </div> </div> <script> $(function(){ var w =$(window).width();//ブラウザの幅を取得 var x = 767;//ブレークポイントを設定 if(w <= x){ $('.inner_sp ul').hide(); $('p').on('click',function(){ $('.selected').removeClass(); $(this).addClass('selected') $('footer ul').slideUp('slow'); $('+ul:not(:animated)',this).slideDown('slow'); return false; });//クリックの閉じ }; });//1つ目の$functionの閉じ </script> </footer> </body> </html>
/*reset*/ html,body,h1,h2,ul,li,div,header,footer,p{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; margin:0; padding:0; line-height:1.0;} ul{list-style:none;} a{text-decoration:none;} img{vertical-align:bottom;} body{font-size:16px;} #container{background:#C1BABA; margin:0 auto; } /*ナビゲーション設定*/ ul.nav{width:960px; margin:30px auto 0; overflow:hidden; height:50px; background:#FFFFFF;} ul.sp_nav{display:none;} ul.nav li{width:160px; border-left:1px solid black; box-sizing:border-box; height:30px; float:left;} ul.nav li:last-child{border-right:1px solid black; box-sizing:border-box; } ul.nav a.a {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_pc.png) no-repeat 0 0; } ul.nav a.a:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 0; line-height:47px; border-bottom:3px red solid;} ul.nav a.b {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_pc.png) no-repeat 0 -50px; } ul.nav a.b:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -50px; line-height:47px; border-bottom:3px blue solid;} ul.nav a.c {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_pc.png) no-repeat 0 -100px; } ul.nav a.c:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -100px; line-height:47px; border-bottom:3px yellow solid;} ul.nav a.d {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_pc.png) no-repeat 0 -150px; } ul.nav a.d:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -150px; line-height:47px; border-bottom:3px green solid;} ul.nav a.e {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_pc.png) no-repeat 0 -200px; } ul.nav a.e:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -200px; line-height:47px; border-bottom:3px aqua solid;} ul.nav a.f {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_pc.png) no-repeat 0 -250px; } ul.nav a.f:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -250px; line-height:47px; border-bottom:3px violet solid;} #news{ background:rgba(0,0,0,1.0); }/*ループの数*/ #news{ width:100%;/*文字の数によって可変*/ height:30px;/*3行あるliを1行だけ表示させるため*/ overflow:hidden;/*3行あるliを1行だけ表示させるため*/ font-size:20px; text-align:center; margin-bottom:30px; position:absolute; top:450px; z-index:1000; } #news li{height:24px; line-height:24px; padding:3px; color:white; } .news-ticker{ animation:ticker 20s infinite;/* アニメーションプロパティのショートハンド ①keyframesにつける名前 ②アニメの時間 ③ループの回数*/ } @keyframes ticker { /*1行目*/ 0%{opacity:0;transform:translate(0,0);}/*Yがない場合の括弧はxとy*/ 10%{opacity:1;transform:translate(0,0);}/*※Yは必ず大文字で*/ 20%{opacity:1;transform:translate(0,0);} 24%{opacity:0;transform:translate(-400px,0);} /*2行目*/ 25%{opacity:0;transform:translate(400px,-30px);} 35%{opacity:1;transform:translate( 0,-30px);} 45%{opacity:1;transform:translate(0,-30px);} 49%{opacity:0;transform:translate(-400px,-30px);} /*3行目*/ 50%{opacity:0;transform:translate(400px,-60px);} 60%{opacity:1;transform:translate(0,-60px);} 70%{opacity:1;transform:translate(0,-60px);} 74%{opacity:0;transform:translate(-400px,-60px);} /*4行目*/ 75%{opacity:0;transform:translate(400px,-90px);} 85%{opacity:1;transform:translate(0,-90px);} 95%{opacity:1;transform:translate(0,-90px);} 99%{opacity:0;transform:translate(-400px,-90px);} 100%{opacity:0;transform:translate(0,0);} } .sp_01,.sp_02{display:none;} ul.grid{width:940px; position:relative; padding:10px; overflow:hidden; margin:0 auto; background:rgba(0,0,0,0.8); } .grid li{float:left; margin:10px;} .ddd a:hover,.big a:hover{ -webkit-filter:sepia(100%); animation-name:sepia;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes sepia { 0%{-webkit-filter:sepia(100%); } 20%{-webkit-filter:sepia(80%);} 40%{-webkit-filter:sepia(60%);} 60%{-webkit-filter:sepia(40%);} 80%{-webkit-filter:sepia(20%);} 100%{-webkit-filter:sepia(0);} } .grid li a:hover{ -webkit-filter:saturate(100%); animation-name:saturate;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes saturate { 0%{-webkit-filter:saturate(100%); } 20%{-webkit-filter:saturate(120%);} 40%{-webkit-filter:saturate(180%);} 60%{-webkit-filter:saturate(240%);} 80%{-webkit-filter:saturate(270%);} 100%{-webkit-filter:saturate(300%);} } .grid li.bbb a:hover{ -webkit-filter:invert(100%); animation-name:invert;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes invert { 0%{-webkit-filter:invert(100%); } 20%{-webkit-filter:invert(80%);} 40%{-webkit-filter:invert(60%);;} 60%{-webkit-filter:invert(50%);;} 80%{-webkit-filter:invert(40%);;} 100%{-webkit-filter:invert(0);;} } .grid li.ccc a:hover{ -webkit-filter:grayscale(100%); animation-name:grayscale;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes grayscale { 0%{-webkit-filter: grayscale(100%); } 20%{-webkit-filter: grayscale(80%);} 40%{-webkit-filter: grayscale(60%);} 60%{-webkit-filter: grayscale(40%);} 80%{-webkit-filter: grayscale(20%);} 100%{-webkit-filter: grayscale(0);} } .grid li.eee a:hover{ -webkit-filter: opacity(0.2); animation-name: opacity;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes opacity { 0%{-webkit-filter: opacity(0.2); } 20%{-webkit-filter: opacity(0.5);} 40%{-webkit-filter:opacity(0.6);} 60%{-webkit-filter: opacity(0.7);} 80%{-webkit-filter: opacity(0.8);} 100%{-webkit-filter: opacity(1.0); } } .grid li.fff a:hover{ -webkit-filter: contrast(150%); animation-name: contrast;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes contrast { 0%{-webkit-filter: contrast(200%); } 20%{-webkit-filter: contrast(180%);} 40%{-webkit-filter:contrast(160%);} 60%{-webkit-filter: contrast(140%);} 80%{-webkit-filter: contrast(120%);} 100%{-webkit-filter: contrast(100%); } } .grid li.ggg a:hover{ -webkit-filter: contrast(150%); animation-name: blur;/*アニメーションを動かすための名前*/ animation-duration:3s;/*アニメーションの長さ*/ animation-timing-function:linear; animation-iteration-count:1;/*アニメーションを繰り返す回数*/ animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/ } @keyframes blur { 0%{-webkit-filter: blur(10px);; } 20%{-webkit-filter: blur(7px);} 40%{-webkit-filter: blur(5px);} 60%{-webkit-filter: blur(3px);} 80%{-webkit-filter: blur(1px);} 100%{-webkit-filter: blur(0px); } } .big{width:356px; } .midium{width:356px; } .small{width:168px; } /*フッター*/ footer{height:200px;} .inner_sp{width:960px; display:block; margin:0 auto; } div.hako{float:left; width:160px; } @media screen and (max-width:959px){ #container{width:100%;} /*ナビゲーション*/ ul.nav{width:100%; } ul.nav li{width:16.66%; } ul.nav a.a { background:url(../img/css_sprite_tablet.png) no-repeat 0 0; } ul.nav a.a:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 0; } ul.nav a.b {display:block; line-height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; background:url(../img/css_sprite_tablet.png) no-repeat 0 -50px; } ul.nav a.b:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -50px; line-height:47px; border-bottom:3px blue solid;} ul.nav a.c { background:url(../img/css_sprite_tablet.png) no-repeat 0 -100px; } ul.nav a.c:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -100px; } ul.nav a.d { background:url(../img/css_sprite_tablet.png) no-repeat 0 -150px; } ul.nav a.d:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -150px; } ul.nav a.e { background:url(../img/css_sprite_tablet.png) no-repeat 0 -200px; } ul.nav a.e:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -200px; } ul.nav a.f { background:url(../img/css_sprite_tablet.png) no-repeat 0 -250px; } ul.nav a.f:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -250px; } img{max-width:100%;}/*imgを拡大・縮小させる時は必須*/ .sp_01,.sp_02{display:none;} ul.grid{width:98%;/*940/960*/ padding:1%;/*10/940*/ } .grid li{ margin:1%;/*10/940*/ } .big{width:37.6%;/*356/940*/ } .midium{width:37.87%; } .small{width:17.87%; } /*フッター*/ .inner_sp{width:100%; display:block; margin:0 auto; } div.hako{float:none; width:100%; } } @media screen and (max-width:767px){ /*ナビゲーション*/ ul.sp_nav{display:block; width:100%; } ul.nav{display:none; } ul.sp_nav li{width:50%; background:white; border-bottom:1px solid #333333; height:50px; line-height:30px; float:left; box-sizing:border-box;} ul.sp_nav li a{ display:block; border-left:3px solid red; margin:10px 0 0 20px; padding-left:5px;} .one,.three,.four{border-right:1px solid #333333; height:50px;} ul.sp_nav li a.a:hover{border-left:3px solid red;} ul.sp_nav li a.b:hover{border-left:3px solid blue;} ul.sp_nav li a.c:hover{border-left:3px solid yellow;} ul.sp_nav li a.d:hover{border-left:3px solid green;} ul.sp_nav li a.e:hover{border-left:3px solid aqua;} ul.sp_nav li a.f:hover{border-left:3px solid violet;} /*2カラムに設定する*/ .sp_01,.sp_02{display:block;} .big{display:none;} img{max-width:100%;}/*imgを拡大・縮小させる時は必須*/ ul.grid{width:98%;/*940/960*/ padding:1%;/*10/940*/ } .grid li{ margin:1%;/*10/940*/ } .big{width:98%; } .midium{width:98%; } .small{width:48%;/*168/940*/ } img{width:100%;}/*今回は画像の大きさが小さいので画像をliの大きさに引伸ばす*/ /*フッター*/ footer{height:200px;} footer .inner_sp p{background:#D4C8C8; border-bottom:1px solid black; text-align:center; line-height:50px;} footer .inner_sp ul{float:none; text-align:center; width:100%; } footer .inner_sp ul li{ line-height:50px; background:#E3DEDE; border-bottom:1px solid black; } footer .inner_sp p{position:relative; font-size:16px;} footer .inner_sp p i{position:absolute; padding-top:17px; right:5%;} }