animation アーカイブ - CodingMania

ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます

yotigory — Thu, 21 Jul 2016 02:28:41 +0000

JSを読み込みます

[main.js]JavaScript

(function($) {

function setimage(){
(function($) {

function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;

$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});

if (win_ratio > 1.5){　//画像の比率が大きかったら
  $(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
  var winwidth = $(".Opening").width();
  var imgheight = winwidth*0.66;
  var winheight = $(".Opening").height();
  var imgtopmargin = (imgheight-winheight)/2;
  $(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){　//画像の比率が小さかったら
  var imgwidth = ((height/800))*1200;
  var winwidth = $(".Opening").width();
  var imgmargin = (winwidth-imgwidth)/2;
  $(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}

  //slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        console.log('resized');
        setimage();
    }, 200);
});

})(jQuery);

HTMl

CSS

/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li img.Opening__text{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
  max-width: inherit;
  width: 100%;
  height: auto;
}

投稿ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えますは CodingMania に最初に表示されました。

ボタンのアウトラインアニメーションでfocusを分りやすくします

yotigory — Fri, 08 May 2015 07:18:25 +0000

HTMl

CSS

/* .btn
-----------------------------------------*/
.btn{
 background-color:#003567;
 color:#FFF;
 cursor:pointer;
 border:none;
 line-height:50px;
 text-align:center;
 width:100px;
 height:50px;
 	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 2px 0px #000;
	-moz-box-shadow:0px 2px 0px #000;
	box-shadow:0px 2px 0px #000;
 outline:2px solid transparent;
 outline-offset:50px;
 transition:0.5s all ease;
}
.btn:focus{
 outline:1px dotted #003567;
 outline-offset:0;
}
.btn:active{
 position:relative;
 top:2px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 0px 0px #000;
	-moz-box-shadow:0px 0px 0px #000;
	box-shadow:0px 0px 0px #000;
}

投稿ボタンのアウトラインアニメーションでfocusを分りやすくしますは CodingMania に最初に表示されました。

マウスオーバーするとtransitionを使って右へ文字を寄せます

yotigory — Thu, 07 May 2015 03:17:04 +0000

HTMl



Before selecting lighting
Lighting basics
The light required for each room
The psychological impressions due to changes in light color(color temperature)
Applying the impact of light
The workings and differences of lights
Types of light sources
Features of principal light sources
Styles of lights
Types and features of principal lighting fixtures

CSS

/* mod_menulist
-----------------------------------------*/
.mod_menulist{
 margin:0 20px 0 20px!important;
}
.mod_menulist ul{
}
.mod_menulist ul li{
 display:block;
 line-height:1.3!important;
}
.mod_menulist ul li a{
 display:table;
 width:100%;
 box-sizing:border-box;
 padding:12px 12px 5px 12px!important;
 -ms-transition:all 0.3s linear 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border-bottom:solid 1px #dfdfdf!important;
}
.mod_menulist ul li a:before{
 font-family: 'FontAwesome';
 content: "\f105";
 font-size:18px!important;
 color:#666666;
 font-weight:bold;
 display:table-cell;
 vertical-align:middle;
 line-height:1;
 width:15px;
 padding:0 14px 5px 12px!important;
}
.mod_menulist ul li a:hover{}
.mod_menulist ul li a:link    {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:visited {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:hover   {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
.mod_menulist ul li a:active  {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}

投稿マウスオーバーするとtransitionを使って右へ文字を寄せますは CodingMania に最初に表示されました。

マウスオーバーするとtransitionを使ってborderを太くします

yotigory — Tue, 14 Apr 2015 07:42:57 +0000

HTMl


会社概要へ



トップページへ戻る



文字が長くなったりセンター位置にしてみたり

CSS

/* mod_btn
-----------------------------------------*/
.mod_btn{
 margin:10px 0 10px 0;
}
.mod_btn-center{
 text-align:center;
}
.mod_btn p{
 border:solid 1px #E73582;
 display:inline-block;
}
.mod_btn p a{
 display:block;
 padding:10px 10px 10px 10px;
 color:#E73582;
 font-size:13px;
 -ms-transition:all 0.3s ease 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border:solid 3px #FFF;
}
.mod_btn p a:after{
 font-family: 'FontAwesome';
 content: "\f101";
 display:inline-block;
 padding:0 0 0 10px;
}
.mod_btn p a:link    {color:#E73582; text-decoration:none;}
.mod_btn p a:visited {color:#E73582; text-decoration:none;}
.mod_btn p a:hover   {color:#E73582; text-decoration:none; border:solid 3px #E73582;}
.mod_btn p a:active  {color:#E73582; text-decoration:none; border:solid 3px #E73582;}

投稿マウスオーバーするとtransitionを使ってborderを太くしますは CodingMania に最初に表示されました。

CSSのアニメーションで画像を回転・切替します。

yotigory — Mon, 16 Feb 2015 03:42:42 +0000

JSを読み込みます

[main.js]JavaScript

jQuery(document).ready(function($){
	var btn = $(".mod_btn .btnMenu");

//click
	$(btn).bind("click", "focus", function(event){
    if($(btn).hasClass("off")){
		$(btn).removeClass("off").addClass("on");
    }else{
		$(btn).removeClass("on").addClass("off");
   }
　});

});

HTMl


メニューを開く

CSS



/* mod_btn
-----------------------------------------*/
.mod_btn p.btnMenu {
 position:relative;
 width:27px;
 height:27px;
 background-color:#006d86;
}
/* text hidden */
.mod_btn .btnMenu span{
 display:block;
 width:1px;
 height:1px;
 overflow:hidden;
}
.mod_btn .btnMenu a{
 display:block;
 color:#FFF!important;
}
.mod_btn .btnMenu.on a{
 background-color:#005467;
}
.mod_btn .btnMenu i{
 position:absolute;
 top:3px;
 left:3px;
 font-size:150%;
}
.mod_btn .btnMenu.on i{
 top:3px;
 left:6px;
}
/* off closeicon 非表示 */
.mod_btn .btnMenu.off i.closeicon{
 opacity:0;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
.mod_btn .btnMenu.on i.closeicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
/* on openicon 非表示 */

.mod_btn .btnMenu.off i.openicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
.mod_btn .btnMenu.on i.openicon{
 opacity:0;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
}

投稿 CSSのアニメーションで画像を回転・切替します。は CodingMania に最初に表示されました。