Update Koneko integration
This commit is contained in:
137
resources/public/vendor/hover3d/source/js/jquery.hover3d.js
vendored
Normal file
137
resources/public/vendor/hover3d/source/js/jquery.hover3d.js
vendored
Normal file
@ -0,0 +1,137 @@
|
||||
/*
|
||||
jQuery Hover3d
|
||||
=================================================
|
||||
Version: 1.1.0
|
||||
Author: Rian Ariona
|
||||
Website: http://ariona.net
|
||||
Docs: http://ariona.github.io/hover3d
|
||||
Repo: http://github.com/ariona/hover3d
|
||||
Issues: http://github.com/ariona/hover3d/issues
|
||||
*/
|
||||
|
||||
(function($){
|
||||
|
||||
$.fn.hover3d = function(options){
|
||||
|
||||
var settings = $.extend({
|
||||
selector : null,
|
||||
perspective : 1000,
|
||||
sensitivity : 20,
|
||||
invert : false,
|
||||
shine : false,
|
||||
hoverInClass : "hover-in",
|
||||
hoverOutClass : "hover-out",
|
||||
hoverClass : "hover-3d"
|
||||
}, options);
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
var $this = $(this),
|
||||
$card = $this.find(settings.selector);
|
||||
currentX = 0;
|
||||
currentY = 0;
|
||||
|
||||
|
||||
if( settings.shine ){
|
||||
$card.append('<div class="shine"></div>');
|
||||
}
|
||||
var $shine = $(this).find(".shine");
|
||||
|
||||
// Set perspective and transformStyle value
|
||||
// for element and 3d object
|
||||
$this.css({
|
||||
perspective: settings.perspective+"px",
|
||||
transformStyle: "preserve-3d"
|
||||
});
|
||||
|
||||
$card.css({
|
||||
perspective: settings.perspective+"px",
|
||||
transformStyle: "preserve-3d",
|
||||
});
|
||||
|
||||
$shine.css({
|
||||
position : "absolute",
|
||||
top : 0,
|
||||
left : 0,
|
||||
bottom : 0,
|
||||
right : 0,
|
||||
transform : 'translateZ(1px)',
|
||||
"z-index" : 9
|
||||
});
|
||||
|
||||
// Mouse Enter function, this will add hover-in
|
||||
// Class so when mouse over it will add transition
|
||||
// based on hover-in class
|
||||
function enter(event){
|
||||
$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
|
||||
currentX = currentY = 0;
|
||||
setTimeout(function(){
|
||||
$card.removeClass(settings.hoverInClass);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Mouse movement Parallax effect
|
||||
function move(event){
|
||||
|
||||
var w = $card.innerWidth(),
|
||||
h = $card.innerHeight(),
|
||||
currentX = Math.round(event.pageX - $card.offset().left),
|
||||
currentY = Math.round(event.pageY - $card.offset().top),
|
||||
ax = settings.invert ? ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
|
||||
ay = settings.invert ? -( h / 2 - currentY)/settings.sensitivity : ( h / 2 - currentY)/settings.sensitivity,
|
||||
dx = currentX - w / 2,
|
||||
dy = currentY - h / 2,
|
||||
theta = Math.atan2(dy, dx),
|
||||
angle = theta * 180 / Math.PI - 90;
|
||||
|
||||
|
||||
if (angle < 0) {
|
||||
angle = angle + 360;
|
||||
}
|
||||
|
||||
|
||||
$card.css({
|
||||
perspective : settings.perspective+"px",
|
||||
transformStyle : "preserve-3d",
|
||||
transform : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
|
||||
});
|
||||
|
||||
$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,var(--light-rgba-0) 80%)');
|
||||
}
|
||||
|
||||
// Mouse leave function, will set the transform
|
||||
// property to 0, and add transition class
|
||||
// for exit animation
|
||||
function leave(){
|
||||
$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
|
||||
$card.css({
|
||||
perspective : settings.perspective+"px",
|
||||
transformStyle : "preserve-3d",
|
||||
transform : "rotateX(0) rotateY(0)"
|
||||
});
|
||||
setTimeout( function(){
|
||||
$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
|
||||
currentX = currentY = 0;
|
||||
}, 1000 );
|
||||
}
|
||||
|
||||
// Mouseenter event binding
|
||||
$this.on( "mouseenter", function(){
|
||||
return enter();
|
||||
});
|
||||
|
||||
// Mousemove event binding
|
||||
$this.on( "mousemove", function(event){
|
||||
return move(event);
|
||||
});
|
||||
|
||||
// Mouseleave event binding
|
||||
$this.on( "mouseleave", function(){
|
||||
return leave();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
270
resources/public/vendor/hover3d/source/sass/style.scss
vendored
Normal file
270
resources/public/vendor/hover3d/source/sass/style.scss
vendored
Normal file
@ -0,0 +1,270 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before, &:after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: karla, sans-serif;
|
||||
line-height: 1.8;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-family: Hind, sans-serif;
|
||||
color: var(--dark--200);
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: lighten(blue,30%);
|
||||
}
|
||||
|
||||
.site-content{
|
||||
width: 990px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 100px 0;
|
||||
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title{
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.align-center{
|
||||
text-align: center;
|
||||
h1{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.share{
|
||||
margin-bottom: 50px;
|
||||
span, a, iframe{
|
||||
vertical-align: middle;
|
||||
|
||||
span{
|
||||
vertical-align: middle!important;
|
||||
width: 130px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo{
|
||||
margin: 100px 0;
|
||||
|
||||
h2{
|
||||
margin-bottom: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
}
|
||||
.demo-1{
|
||||
text-align: center;
|
||||
}
|
||||
.demo-2{
|
||||
text-align: left;
|
||||
|
||||
.section-title{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.columns{
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
|
||||
.column{
|
||||
width: 50%;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
pre{
|
||||
background-color: #fbfbfb;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
// Demo 1 : Project Hover Effect
|
||||
.project{
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 15px;
|
||||
|
||||
&-list{
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
}
|
||||
|
||||
&__image{
|
||||
display : block;
|
||||
position : relative;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after{
|
||||
content : " ";
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
position : absolute;
|
||||
left : 0;
|
||||
top : 0;
|
||||
background : linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.4));
|
||||
transition : opacity .3s ease;
|
||||
opacity : 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__card{
|
||||
position : relative;
|
||||
transition : box-shadow .3s ease;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0);
|
||||
|
||||
&.hover-in{
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
&.hover-out{
|
||||
transition : transform .2s ease-in;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover{
|
||||
|
||||
.project{
|
||||
|
||||
&__card{box-shadow: 0 10px 30px rgba(0,0,0,.4);}
|
||||
&__image:after{ opacity: 1; }
|
||||
&__detail{
|
||||
border-width : 10px;
|
||||
box-shadow : 0 10px 30px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
&__title, &__category{
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&__title{
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__detail{
|
||||
position : absolute;
|
||||
left : 30px;
|
||||
right : 30px;
|
||||
top : 30px;
|
||||
bottom : 30px;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content : center;
|
||||
text-align : center;
|
||||
transform : translateZ(30px);
|
||||
border : 0 solid #00BCD4;
|
||||
transition : border .4s ease;
|
||||
}
|
||||
|
||||
&__title{
|
||||
margin : 0 0 10px;
|
||||
font-size : 36px;
|
||||
font-weight : 700;
|
||||
transition : .4s ease;
|
||||
opacity : 0;
|
||||
transform : translateY(40px) scale(0);
|
||||
will-change : transform;
|
||||
|
||||
a{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__category{
|
||||
opacity : 0;
|
||||
transition : .4s ease;
|
||||
transition-delay : .1s;
|
||||
transform : translateY(40px) scale(0);
|
||||
will-change : transform;
|
||||
a{
|
||||
color : rgba(white,.8);
|
||||
font-size : 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Demo 2 : AppleTV Icon Effect
|
||||
.movie{
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
|
||||
&-list{
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
}
|
||||
|
||||
&__card{
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
[class*="layer"]{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.layer-1{
|
||||
background-image: url(dist/images/deadpool-bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.layer-2{
|
||||
background-image: url(dist/images/deadpool.png);
|
||||
background-size: cover;
|
||||
transform: translateZ(30px);
|
||||
}
|
||||
.layer-3{
|
||||
background-image: url(dist/images/deadpool-title.png);
|
||||
background-size: cover;
|
||||
transform: translateZ(50px);
|
||||
}
|
||||
.shine{
|
||||
border-radius: 10px
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user