body{
cursor: none;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
}
/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%
}
.cursor{
background-color: #fff;
height: 10px;
width: 10px;
z-index: 99999;
box-shadow: 0 0 22px 0 rgba(255,255,255, 0.6);
}
.cursor2,.cursor3{
height: 36px;
width: 36px;
z-index:99998;
opacity: 0;
background: rgba(255,255,255,.03);
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
-webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
transform:scale(2.2) translateX(-25%) translateY(-25%);
border:none;
}
.video-cursor .cursor{
opacity: 0;
}
.logo-cursor .cursor{
opacity: 0;
}
.logo-cursor .cursor2,
.logo-cursor .cursor3{
-webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
transform:scale(2.2) translateX(-25%) translateY(-25%);
border:none;
opacity: 1;
}
.section{
position: relative;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
}
.blur-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 8;
display: block;
background-size: cover;
background-position: center;
background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg");
filter: blur(6px);
}
.blur-img-over{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 10px solid #060606;
z-index: 9;
display: block;
}
/* Video
================================================== */
.wrap-rel {
position: relative;
width: 100%;
display: block;
}
.video-container {
position: absolute;
top: 50%;
left: 0;
width: 100%;
z-index: 10;
display: block;
margin: 0;
padding: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/* #Video wrapper
================================================== */
.video-section {
position: relative;
width:100%;
margin:0 auto;
border-radius: 10px;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.45);
}
.video-wrapper, figure.vimeo, figure.youtube {
margin:0;
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
border-radius: 10px;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure.youtube a img, figure.vimeo a img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
max-width:none;
}
figure.vimeo a:after, figure.youtube a:after {
content:"";
width:60px;
height:60px;
background: #fff;
z-index:9;
position:absolute;
top:50%;
left:50%;
margin:-30px 0 0 -30px;
border-radius:50%;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
cursor: url('http://www.ivang-design.com/svg-load/play.png') 30 30,pointer;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
figure.vimeo:hover a:after, figure.youtube:hover a:after {
box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.1);
}
figure.vimeo:hover a:after, figure.youtube:hover a:after{
opacity: 0;
}
figure.vimeo a:before, figure.youtube a:before {
border-left: 8px solid #212121;
}
figure.vimeo a:before, figure.youtube a:before {
content:"";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
z-index:10;
position:absolute;
top:50%;
left:50%;
margin-left: -3px;
margin-top: -5px;
display:block;
cursor: url('http://www.ivang-design.com/svg-load/play.png') 30 30,pointer;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
figure.vimeo:hover a:before, figure.youtube:hover a:before {
border-color: transparent;
}
figure.vimeo a:hover img, figure.youtube a:hover img {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
figure.vimeo a img, figure.youtube a img {
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 10px;
cursor: url('http://www.ivang-design.com/svg-load/play.png') 30 30,pointer;
}
/* #Link to page
================================================== */
.link-to-portfolio {
position: fixed;
top: 30px;
right: 30px;
z-index: 20;
cursor: pointer;
width: 40px;
height: 40px;
text-align: center;
border-radius: 3px;
background-position: center center;
background-size: cover;
background-image: url('https://ivang-design.com/ig-logo.jpg');
box-shadow: 0 0 0 2px rgba(255,255,255,.3);
transition: opacity .2s, border-radius .2s, box-shadow .2s;
transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
opacity: 0.8;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255,255,255,0);
}
/*! FitVids */
!function(t){"use strict";t.fn.fitVids=function(e){var i={customSelector:null};if(!document.getElementById("fit-vids-style")){var r=document.createElement("div"),a=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0],o="­<style>.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>";r.className="fit-vids-style",r.id="fit-vids-style",r.style.display="none",r.innerHTML=o,a.parentNode.insertBefore(r,a)}return e&&t.extend(i,e),this.each(function(){var e=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com'][src*='video.html']","object","embed"];i.customSelector&&e.push(i.customSelector);var r=t(this).find(e.join(","));r=r.not("object object"),r.each(function(){var e=t(this);if(!("embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){var i="object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height(),r=isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10),a=i/r;if(!e.attr("id")){var o="fitvid"+Math.floor(999999*Math.random());e.attr("id",o)}e.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*a+"%"),e.removeAttr("height").removeAttr("width")}})})}}(window.jQuery||window.Zepto);
(function($) { "use strict";
//Page cursors
document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
t.style.left = n.clientX + "px",
t.style.top = n.clientY + "px",
e.style.left = n.clientX + "px",
e.style.top = n.clientY + "px",
i.style.left = n.clientX + "px",
i.style.top = n.clientY + "px"
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
e.classList.add("hover"), i.classList.add("hover")
}
function s(t) {
e.classList.remove("hover"), i.classList.remove("hover")
}
s();
for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
o(r[a])
}
function o(t) {
t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
$('.video-section').on('mouseover', function(event) {
$('body').addClass('video-cursor');
});
$('.video-section').on('mouseout', function(event) {
$('body').removeClass('video-cursor');
});
$('.link-to-portfolio').on('mouseover', function(event) {
$('body').addClass('logo-cursor');
});
$('.link-to-portfolio').on('mouseout', function(event) {
$('body').removeClass('logo-cursor');
});
$(document).ready(function() {
/* Video */
$(".container").fitVids();
$('.vimeo a,.youtube a').on('click', function (e) {
e.preventDefault();
var videoLink = $(this).attr('href');
var classeV = $(this).parent();
var PlaceV = $(this).parent();
if ($(this).parent().hasClass('youtube')) {
$(this).parent().wrapAll('<div class="video-wrapper">');
$(PlaceV).html('<iframe frameborder="0" height="333" src="' + videoLink + '?autoplay=1&showinfo=0" title="YouTube video player" width="547"></iframe>');
} else {
$(this).parent().wrapAll('<div class="video-wrapper">');
$(PlaceV).html('<iframe src="' + videoLink + '?title=0&byline=0&portrait=0&autoplay=1&color=8c6acc" width="500" height="281" frameborder="0"></iframe>');
}
});
});
})(jQuery);