Crystal Scroll, Hover & Click Effect (HTML, SCSS, Javascript)
HTML
<div class="wrap">
<a href="#nav" class="btn">Hover & Click</a>
<nav id="nav">
<a href="#"></a>
<body style="background-color:#000">
<div id="crystals">
<div class="crystal_01"></div>
<div class="crystal_02"></div>
<div class="crystal_03"></div>
</div>
</nav>
</div>
SCSS
body {
background-color: #d88dc7;
}
.wrap {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.btn {
position: absolute;
margin: 100px;
width: 230px;
height: 230px;
color: #ece4dc;
font-size: 30px;
line-height: 230px;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
border: 1px solid currentColor;
border-radius: 50%;
display: block;
}
.btn:before, .btn:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 230px;
height: 230px;
border: 1px #ece4dc solid;
border-radius: 50%;
animation: circle 4s linear infinite;
transition: opacity .3s ease;
opacity: 0;
}
.btn:before {
transform-origin: 50% 48%;
}
.btn:after {
transform-origin: 48% 50%;
}
.btn:hover:before,
.btn:hover:after {
opacity: 1;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
nav {
position: fixed;
top: 0;
right: 0;
width: 450px;
height: 100%;
background-color: #000;
transition: transform .5s cubic-bezier(1.000, 0.000, 0.000, 1.000);
background: #000 url("")no-repeat;
background-attachment: fixed;
background-size: 20%;
background-position: right bottom;
#crystals {
position:absolute;
top:0;
left:0;
width:480px;
height:100%;
background:transparent;
}
.crystal_01 {
position:absolute;
width:100%;
height:100%;
background:url(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_01.png)repeat-y;
}
.crystal_02 {
position:absolute;
width:100%;
height:100%;
background:url(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_02.png)repeat-y;
}
.crystal_03 {
position:absolute;
width:100%;
height:100%;
left:50%;
margin-left:-180px;
background:url(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_03.png)repeat-y;
}
}
nav > a {
margin: 10px;
color: #888;
font-size: 22px;
text-decoration: none;
display: block;
}
nav:not(:target) {
transform: translateX(100%);
}
nav:target {
transform: translateX(0);
}
JAVASCRIPT
$(function(){
var $jittery = $('.jiterry'),
aText = $jittery.text().split(''),
letters = '';
for(var i = 0; i < aText.length; i++){
letters += '<span>'+aText[i]+'</span>';
}
$jittery.empty().append(letters);
$.each($('span', $jittery), function(i){
$(this).css('animation-delay', '-'+i+'70ms');
});
});
$(function(){
var posY1 = 0;
var posY2 = 0;
var posY3 = 0;
var imgH = 500;
setInterval(function(){
if (posY1 <= -900) posY1 = 0;
if (posY2 <= -900) posY2 = 0;
if (posY3 <= -1200) posY3 = 0;
posY1 -= 1;
posY2 -= 2;
posY3 -= 3;
$('.crystal_01').css({ backgroundPosition: '0' + posY1 + 'px' });
$('.crystal_02').css({ backgroundPosition: '0' + posY2 + 'px' });
$('.crystal_03').css({ backgroundPosition: '0' + posY3 + 'px' });
},50);
$(window).scroll(function () {
pageNavFunc();
});
pageNavFunc();
});
