MEFILAS.

ss_note

2018年2月21日 10:46

MEFILAS｜東京・大阪のWebサイト制作会社
https://mefilas.com/
株式会社メフィラスは、デジタルブランディングを主軸としたWebサイトの企画・制作を行うクリエイティブ集団です。

Twitterで流れて来たのでチェック。

良い点
インパクトがすごい。

テキストをマウスオーバーすると背景で映像が流れる仕組み。
触りたくなるし、見入ってしまう。
（内容が頭に入ってくるかは別だけど。あとマウスオーバーって気づかなかった。スクロールに応じて流れてるのかと思った）

シンプルだけど、クレバーに印象付ける手法、なんとなく日本ぽい気がする。
他の事例が思いつかないが。

思ったこと
意外とマウスオーバーしてそれぞれ別の動画を流すって、
見たことなかったかも。
おしゃれだし、印象深い。
だけど、文字と映像がごちゃってなって見づらいのも事実。

映像はjsで制御している。
見た目はシンプルだけど、しっかりと記述されている…
とても書けそうにないが…参考にさせていただきます…

_selfIndex.Vision = {
Init : function Init(){
var _self = Index;
var _this = this;

_self.PARAM.$ELE.Vision = new Object();
_self.PARAM.$ELE.Vision.isReady = false;
_self.PARAM.$ELE.Vision.id = $('#Vision');
_self.PARAM.$ELE.Vision.area = $('#Vision div.inline');
_self.PARAM.$ELE.Vision.hover = $('#Vision div.inline em.point');
_self.PARAM.$ELE.Vision.navi = $('#GlobalNavi');

_self.PARAM.$ELE.Vision.Movie = new Object();
_self.PARAM.$ELE.Vision.Movie.id = $('#MoveBackground');
_self.PARAM.$ELE.Vision.Movie.iframe = '';

_self.PARAM.Vision = new Object();
_self.PARAM.Vision.eq = -1;
_self.PARAM.Vision.ratio = 16/9;
_self.PARAM.Vision.count = 0;
_self.PARAM.Vision.isMP4 = (($.browser() == 'chrome') || ($.browser() == 'gecko')) ? false : true;
_self.PARAM.Vision.movie = [
{type:1, player:'', ready:false, end:0}, // 人が動く
{type:0, player:'', ready:false, end:0}, // 笑顔を生む
{type:0, player:'', ready:false, end:0}, // 気持ちいいモーション
{type:0, player:'', ready:false, end:0}, // 絶妙なバランス
{type:0, player:'', ready:false, end:0}, // さじ加減
{type:0, player:'', ready:false, end:0}, // 感覚の体験
{type:0, player:'', ready:false, end:0}, // 積み上げた実績
{type:0, player:'', ready:false, end:0}, // ウェブサイト
{type:1, player:'', ready:false, end:0}, // 価値を与えるコミュニケーション
{type:1, player:'', ready:false, end:0}, // とにかくやってみる
{type:1, player:'', ready:false, end:25.03}, // 耳をかたむける
{type:0, player:'', ready:false, end:0}, // アイディアを積み上げ
{type:0, player:'', ready:false, end:0}, // 問題発見
{type:0, player:'', ready:false, end:0}, // 時間を大切にする
{type:0, player:'', ready:false, end:0}, // 自然発生
{type:0, player:'', ready:false, end:0} // 評価する
];

if(LIB.PARAM.IsDevice == 'PC'){
_this.Set();
}
},
Set : function Set(){
var _self = Index;
var _this = this;
var outout = '';

for(var i in _self.PARAM.Vision.movie){
var num = (Number(i)<9) ? '0'+(Number(i)+1) : (Number(i)+1);

outout += '<video id="Player_'+i+'" class="player" autobuffer '+(($.browser()=='safari') ? 'preload="none"' : '')+'>';
outout += '<source type="video/webm" src="movie/'+num+'.webm">';
//outout += '<source type="video/ogg" src="movie/'+num+'.ogv">';
outout += '<source type="video/mp4" src="movie/'+num+'.mp4">';
outout += '</video>';
}
_self.PARAM.$ELE.Vision.Movie.id.append(outout);
_self.PARAM.$ELE.Vision.Movie.iframe = $('#MoveBackground .player');

for(var i in _self.PARAM.Vision.movie){
_self.PARAM.Vision.movie[i].player = $('#Player_'+i).get(0);
if(!_self.PARAM.Vision.isMP4) _this.Load(i);
}
if(_self.PARAM.Vision.isMP4) _this.load_mp4();
},
load_mp4 : function(){
var _self = Index;
var _this = this;
var NUM = _self.PARAM.Vision.count;
var isIE = (($.userAgent().search(/msie/i) != -1) || ($.userAgent().search(/trident/i) != -1)) ? true : false;
var loadType = (isIE) ? 'loadstart' : 'suspend';

if(NUM < _self.PARAM.Vision.movie.length){
_self.PARAM.$ELE.Vision.Movie.iframe.eq(NUM).attr('preload','auto');
_self.PARAM.Vision.movie[NUM].player.addEventListener(loadType,function(){
_this.Ready(NUM);
_this.load_mp4();
});
_self.PARAM.Vision.movie[NUM].player.addEventListener('timeupdate', function(){_this.MovieCheck(NUM);});
_self.PARAM.Vision.movie[NUM].player.addEventListener('playing', function(){if(_self.PARAM.Vision.movie[NUM].ready) _this.Show();});
}
},
Load : function Load(NUM){
var _self = Index;
var _this = this;

_self.PARAM.Vision.movie[NUM].player.addEventListener('suspend', function(){_this.Ready(NUM);});
_self.PARAM.Vision.movie[NUM].player.addEventListener('timeupdate', function(){_this.MovieCheck(NUM);});
_self.PARAM.Vision.movie[NUM].player.addEventListener('playing', function(){if(_self.PARAM.Vision.movie[NUM].ready) _this.Show();});
_self.PARAM.Vision.movie[NUM].player.addEventListener('error', function(e){console.error(e)});
},
Ready : function Ready(NUM){
var _self = Index;
var _this = this;

if(!_self.PARAM.Vision.movie[NUM].ready){
_self.PARAM.Vision.count++;
_self.PARAM.Vision.movie[NUM].ready = true;

_this.Action(NUM);

_this.Resize(NUM);
$(window).resize(function(){_this.Resize(NUM);});

//console.log(NUM);
if(_self.PARAM.Vision.count >= _self.PARAM.Vision.movie.length){}
}
},
Resize : function Resize(NUM){
var _self = Index;
var _this = this;

if(LIB.PARAM.window.size.ori.width / _self.PARAM.Vision.ratio < LIB.PARAM.window.size.ori.height){
_self.PARAM.$ELE.Vision.Movie.iframe.eq(NUM).css({
'width' : Math.ceil(LIB.PARAM.window.size.ori.height * _self.PARAM.Vision.ratio),
'height' : LIB.PARAM.window.size.ori.height,
'top' : 0,
'left' : (LIB.PARAM.window.size.ori.width - Math.ceil(LIB.PARAM.window.size.ori.height * _self.PARAM.Vision.ratio)) / 2
});
}else{
_self.PARAM.$ELE.Vision.Movie.iframe.eq(NUM).css({
'width' : LIB.PARAM.window.size.ori.width,
'height' : Math.ceil(LIB.PARAM.window.size.ori.width / _self.PARAM.Vision.ratio),
'top' : (LIB.PARAM.window.size.ori.height - Math.ceil(LIB.PARAM.window.size.ori.width / _self.PARAM.Vision.ratio)) / 2,
'left' : 0
});
}
},
Action : function Action(NUM){
var _self = Index;
var _this = this;
var timer = '';

_self.PARAM.$ELE.Vision.hover.eq(NUM).css({'cursor':'pointer'}).on({
'mouseenter' : function(){
_self.PARAM.Vision.eq = _self.PARAM.$ELE.Vision.hover.index($(this));

_this.MovieStart();
_this.MouseOn();
},
'mouseleave' : function(){
_self.PARAM.Vision.eq = _self.PARAM.$ELE.Vision.hover.index($(this));

_this.MovieEnd();
_this.Hide();
_this.MouseOut();
}
});
},
MovieStart : function MovieStart(){
var _self = Index;
var _this = this;

_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.currentTime = 0;
_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.play();
if(_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].end == 0){
_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].end = _self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.duration - 0.5;
}
},
MovieCheck : function MovieCheck(){
var _self = Index;
var _this = this;
var getTime = 0;
var MOVIE = _self.PARAM.Vision.movie[_self.PARAM.Vision.eq];
var deff = (_self.PARAM.Vision.isMP4) ? 0 : 1000;

if(_self.PARAM.Vision.eq >= 0){
getTime = Math.floor(_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.currentTime * 1000);

if(getTime >= ((MOVIE.end*1000) - deff)){
if(MOVIE.type > 0){
_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.currentTime = 0;
_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.play();
}else{
_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.pause();
}
}
}
},
MovieEnd : function MovieEnd(){
var _self = Index;
var _this = this;

_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.pause();
_self.PARAM.Vision.movie[_self.PARAM.Vision.eq].player.currentTime = 0;
},
Show : function Show(){
var _self = Index;
var _this = this;
var delay = 0;

_self.PARAM.$ELE.Vision.Movie.iframe.eq(_self.PARAM.Vision.eq).alpha(1);
},
Hide : function Hide(){
var _self = Index;
var _this = this;

_self.PARAM.$ELE.Vision.Movie.iframe.alpha(0);
},
MouseOn : function MouseOn(){
var _self = Index;
var _this = this;
var EQ = _self.PARAM.Vision.eq;

_self.PARAM.$ELE.Vision.id.find('h2').addClass('none');
_self.PARAM.$ELE.Vision.id.find('p.ruby').addClass('none');
_self.PARAM.$ELE.Vision.area.find('strong').addClass('none');
_self.PARAM.$ELE.Vision.area.find('h3').addClass('no-border');
_self.PARAM.$ELE.Vision.area.find('em.point').not(':eq('+EQ+')').addClass('none');
_self.PARAM.$ELE.Vision.area.find('em.point').eq(EQ).addClass('active');
_self.PARAM.$ELE.Vision.navi.addClass('none');
},
MouseOut : function MouseOn(){
var _self = Index;
var _this = this;
var EQ = _self.PARAM.Vision.eq;

_self.PARAM.$ELE.Vision.id.find('h2').removeClass('none');
_self.PARAM.$ELE.Vision.id.find('p.ruby').removeClass('none');
_self.PARAM.$ELE.Vision.area.find('strong').removeClass('none');
_self.PARAM.$ELE.Vision.area.find('h3').removeClass('no-border');
_self.PARAM.$ELE.Vision.area.find('em.point').removeClass('none');
_self.PARAM.$ELE.Vision.area.find('em.point').eq(EQ).removeClass('active');
_self.PARAM.$ELE.Vision.navi.removeClass('none');
}
};

↑引用でくくったら消えてしまう。なんで？

この記事が気に入ったらサポートをしてみませんか？