Animation for blocks. Spining cubes alike
<?php /* "Services" Section */
if ($services_section_two['show_this_section']==true): ?>
<section class="TWLA-services-section-2">
<div class="container TWLA-full-width">
<div class="row no-gutters">
<div class="TWLA-services col-lg-8 col-md-12 col-sm-12 col-xs-12 matchHeight">
<?php if (!empty($services_section_two['services'])){ ?>
<?php foreach ($services_section_two['services'] as $unit){ ?>
<div class="TWLA-unit col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="TWLA-cube">
<div class="TWLA-unit-wrap-default">
<img src="<?= get_post_thumbnail_url($unit->ID, 'medium'); ?>" alt="" />
<h4><?= $unit->post_title; ?></h4>
<span class="TWLA-gradient"></span>
</div>
<div class="TWLA-unit-wrap-hover">
<div><?= $unit->post_content; ?></div>
<span class="TWLA-gradient"></span>
</div>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
<div class="TWLA-wrap col-lg-4 col-md-12 col-sm-12 col-xs-12 visible-lg-block matchHeight">
<?php if ($services_section_two['title']!=''){ ?><h2 class="TWLA-title"><?= $services_section_two['title']; ?></h2><?php } ?>
<?php if ($services_section_two['content']!=''){ ?><div class="TWLA-content"><?= $services_section_two['content']; ?></div><?php } ?>
</div>
</div>
</div>
</section>
<?php endif; ?>
.TWLA-services-section-2 { background: #122f56; }
.TWLA-services-section-2 .container { padding: 0; }
.TWLA-services-section-2 .TWLA-services { position: relative; }
.TWLA-services-section-2 .TWLA-unit {
background: #000000;
border-color: #000000;
border-style: solid;
border-width: 3px 3px 0 0;
height: 50%;
min-height: 475px;
padding: 0;
position: relative;
text-align: center;
}
.TWLA-services-section-2 .TWLA-unit:nth-child(1),
.TWLA-services-section-2 .TWLA-unit:nth-child(2),
.TWLA-services-section-2 .TWLA-unit:nth-child(3),
.TWLA-services-section-2 .TWLA-unit:nth-child(4) { border-top: none; }
.TWLA-services-section-2 .TWLA-unit .TWLA-cube {
backface-visibility: hidden;
height: 100%;
margin: 0 auto;
min-height: 250px;
position: relative;
width: 100%;
}
.TWLA-services-section-2 .TWLA-gradient {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.TWLA-services-section-2 .TWLA-unit-wrap-default {
background: #234e7b;
background: -moz-linear-gradient(top, #234e7b 0%, #122f56 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#234e7b), color-stop(100%,#122f56));
background: -webkit-linear-gradient(top, #234e7b 0%,#122f56 100%);
background: -o-linear-gradient(top, #234e7b 0%,#122f56 100%);
background: -ms-linear-gradient(top, #234e7b 0%,#122f56 100%);
background: linear-gradient(to bottom, #234e7b 0%,#122f56 100%);
backface-visibility: hidden;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#234e7b', endColorstr='#122f56',GradientType=0 );
height: 100% !important;
left: 0;
padding: 160px 15px 15px;
position: absolute;
top: 0;
-webkit-transform-origin: 100% 50% 0px;
-moz-transform-origin: 100% 50% 0px;
-ms-transform-origin: 100% 50% 0px;
-o-transform-origin: 100% 50% 0px;
transform-origin: 100% 50% 0px;
-webkit-transform: translateX(0%) rotateY(0deg);
-moz-transform: translateX(0%) rotateY(0deg);
-ms-transform: translateX(0%) rotateY(0deg);
-o-transform: translateX(0%) rotateY(0deg);
transform: translateX(0%) rotateY(0deg);
width: 100% !important;
}
.TWLA-services-section-2 .TWLA-unit-wrap-default .TWLA-gradient {
background: #000000;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYjJiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000000), color-stop(100%, #2b2b2b));
background: -webkit-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: -o-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: -ms-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: linear-gradient(to right, #000000 0%, #2b2b2b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#2b2b2b', GradientType=1);
opacity: 0;
transition: all 0.6s;
}
.TWLA-services-section-2 .TWLA-unit-wrap-hover {
background: #183a5c;
background: -moz-linear-gradient(top, #183a5c 0%, #061525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183a5c), color-stop(100%,#061525));
background: -webkit-linear-gradient(top, #183a5c 0%,#061525 100%);
background: -o-linear-gradient(top, #183a5c 0%,#061525 100%);
background: -ms-linear-gradient(top, #183a5c 0%,#061525 100%);
background: linear-gradient(to bottom, #183a5c 0%,#061525 100%);
backface-visibility: hidden;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#183a5c', endColorstr='#061525',GradientType=0 );
height: 100% !important;
left: 0;
/* Separate padding for smooth animation. Don't minify */
padding-bottom: 15px !important;
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 160px;
position: absolute;
top: 0;
-webkit-transform: translateX(100%) rotateY(90deg);
-moz-transform: translateX(100%) rotateY(90deg);
-ms-transform: translateX(100%) rotateY(90deg);
-o-transform: translateX(100%) rotateY(90deg);
transform: translateX(100%) rotateY(90deg);
-webkit-transform-origin: 0% 50% 0px;
-moz-transform-origin: 0% 50% 0px;
-ms-transform-origin: 0% 50% 0px;
-o-transform-origin: 0% 50% 0px;
transform-origin: 0% 50% 0px;
width: 100% !important;
}
.TWLA-services-section-2 .TWLA-unit-wrap-hover .TWLA-gradient {
background: #000000;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYjJiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000000), color-stop(100%, #2b2b2b));
background: -webkit-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: -o-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: -ms-linear-gradient(left, #000000 0%, #2b2b2b 100%);
background: linear-gradient(to left, #000000 0%, #2b2b2b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#2b2b2b', GradientType=1);
opacity: 1;
}
.TWLA-services-section-2 .TWLA-unit img {
margin: 0 0 30px;
max-width: 150px;
}
.TWLA-services-section-2 .TWLA-unit h4 {
color: #ffffff;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.TWLA-services-section-2 .TWLA-unit div {
color: #ffffff;
font-size: 21px;
line-height: 1.4;
}
.TWLA-services-section-2 .TWLA-wrap { background: #e0e0e0; padding: 40px !important; }
.TWLA-services-section-2 .TWLA-title {
color: #000000;
font-size: 60px;
font-weight: 700;
line-height: 1.1;
margin: 0 0 30px;
text-transform: uppercase;
}
.TWLA-services-section-2 .TWLA-content {
color: #000000;
font-size: 22px;
line-height: 1.5;
}
.TWLA-services-section-2 .TWLA-content p { margin: 0 0 30px; }
$('.TWLA-services-section-2 .TWLA-unit').hover(function(){
cubeSlider(1,['X','Y'],$(this).find('.TWLA-unit-wrap-hover')[0],$(this).find('.TWLA-unit-wrap-default')[0],$(this).find('.TWLA-cube')[0], $.noop);
},function(){
cubeSlider(-1,['X','Y'],$(this).find('.TWLA-unit-wrap-default')[0],$(this).find('.TWLA-unit-wrap-hover')[0],$(this).find('.TWLA-cube')[0],function(){
ianIt($(this).find('.TWLA-unit-wrap-default')[0],{'transform':''});
});
});
function cubeSlider(_dir,orientation,next,now,cont,cb){
var OriginNow, OriginNext, dir, deg_dir
perspective=1000;
if(orientation[0]=='X'){
dir=_dir;
deg_dir=_dir;
OriginNow = (dir==1) ? '100% 50%' : '0% 50%';
OriginNext = (dir==1) ? '0% 50%' : '100% 50%';
} else if (orientation[0]=='Y'){
dir=_dir;
deg_dir=(-1)*_dir;
OriginNow = (dir==1) ? '50% 100%' : '50% 0%';
OriginNext = (dir==1) ? '50% 0%' : '50% 100%';
}
ianIt(next,{'transform':'translate'+orientation[0]+'('+dir*100+'%) rotate'+orientation[1]+'('+deg_dir*90+'deg)','transform-origin':OriginNext});
ianIt(now,{'transform-origin':OriginNow});
ianIt(cont,{'perspective':perspective+'px','transform-style': 'preserve-3d','z-index':500});
setTimeout(function(){
anIt(cont,{'transform':'scale(0.9)'},animBaseTime/5,0,ease.Out,function(){
anIt(cont,{'transform':'scale(1)'},animBaseTime-animBaseTime/5,0,ease.Out,function(){
});
});
anIt(next,{'transform':'translate'+orientation[0]+'(0%) rotate'+orientation[1]+'(0deg)'},animBaseTime,0,ease.Out,function(){
});
$(now).find('.TWLA-gradient').css({'visibility':'visible'});
anIt($(now).find('.TWLA-gradient')[0],{'opacity':1},animBaseTime,0,ease.Out);
anIt($(next).find('.TWLA-gradient')[0],{'opacity':0},animBaseTime,0,ease.Out,function(){
$(next).find('.TWLA-gradient').css({'visibility':'hidden'});
});
anIt(now,{'transform':'translate'+orientation[0]+'('+(-1*dir*100)+'%) rotate'+orientation[1]+'('+(-1*deg_dir*90)+'deg)'},animBaseTime,0,ease.Out,function(){
cb();
ianIt(cont,{'perspective':perspective+'px','transform-style': 'preserve-3d','z-index':1000});
});
},0);
}
Add pre_load.js and modernizr.js. Delete jQuery.noConflict(); from jQuery library.
sugurugetos
titsay
pixelskylines
andulkaphoto
gamechangershow
romaincrisis
blakekathryn
2087