<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="parent">
<div class="rotate">
<ul class="rotate-ul">
<li data-link="https://www.google.com" class="rotate-ul-li rotate-a"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-b"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-c"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-d"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-e"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-f"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-g"></li>
<li data-link="https://www.google.com" class="rotate-ul-li rotate-h"></li>
</ul>
</div>
</div>
/* ------------------------------- Start General ----------------------------------------- */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0
}
body {background: #e0fff4}
ul, ol {
list-style: none
}
/* ------------------------------- End General ------------------------------------------- */
/* ------------------------------- Start rotate ----------------------------------------- */
.parent {
margin: 50px auto;
}
.rotate .rotate-ul {
position: relative;
}
.rotate .rotate-ul .rotate-ul-li {
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: .3;
border-radius: 10% 10% 0 0;
}
.rotate .rotate-ul .rotate-ul-li:hover {
cursor: pointer;
opacity: 1 !important;
transition: opacity .3s;
z-index: 9999999 !important;
}
.rotate .rotate-ul .rotate-ul-li:first-of-type {background-image: url(https://lh3.googleusercontent.com/-pOVGsJjh8t8/WXhQ9ZRQCNI/AAAAAAAAB4w/fT-_uFQhPAQfeziuN222GzMyowSbADXyACL0BGAYYCw/h236/rotate1.jpg)}
.rotate .rotate-ul .rotate-ul-li:nth-of-type(2) {background-image: url(https://lh3.googleusercontent.com/-uEp8iFrjapc/WXhRAwzXpLI/AAAAAAAAB48/iCjCVKUOrC8TNcPMlEfasKdWhbTy71WHwCL0BGAYYCw/h535/rotate2.jpg)}
.rotate .rotate-ul .rotate-ul-li:nth-of-type(3) {background-image: url(https://lh3.googleusercontent.com/-0jcsfgeZNLk/WXhRCFyKAgI/AAAAAAAAB5A/ZO1H82P1eHU4kgWokPEitbp-TxODoqp3ACL0BGAYYCw/h334/2017-07-26.jpg)}
.rotate .rotate-ul .rotate-ul-li:nth-of-type(4) {background-image: url(https://lh3.googleusercontent.com/-iXZxZW_xvec/WXhRDiew3yI/AAAAAAAAB5E/wwWeHQGddzg0Soxc7Owp55jMHfLSHKRogCL0BGAYYCw/h334/2017-07-26.jpg)}
.rotate .rotate-ul .rotate-ul-li:nth-of-type(5) {background-image: url(https://lh3.googleusercontent.com/-mJlrWRXuaic/WXhRErTYIaI/AAAAAAAAB5I/75fNrd39L4gcjYTO17lRoVUuVxKj7ZjygCL0BGAYYCw/h236/2017-07-26.jpg)}
.rotate .rotate-ul .rotate-ul-li:nth-of-type(6) {background-image: url(https://lh3.googleusercontent.com/-wRgIUpOPMKI/WXhRGCyuitI/AAAAAAAAB5M/oV0oMEfRzQcVzFUJujT8tl7ygs0lmTesACL0BGAYYCw/h334/2017-07-26.jpg)}
.rotate .rotate-ul .rotate-ul-li:nth-of-type(7) {background-image: url(https://lh3.googleusercontent.com/-i12d5GR_PiY/WXhRHrz6iUI/AAAAAAAAB5Q/K42wM4HcfgggvUsmcoR_l8C39qpIGm45gCL0BGAYYCw/h1600/2017-07-26.jpg)}
.rotate .rotate-ul .rotate-ul-li:last-of-type {background-image: url(https://lh3.googleusercontent.com/-dJRlmQZrjcc/WXhRIqvo0NI/AAAAAAAAB5U/2vmj1uTP7bId0zLL2yg-uZuaLzJjoVw0wCL0BGAYYCw/h500/2017-07-26.jpg)}
/* ------------------------------- End rotate ------------------------------------------ */
/* ------------------------------- Start Mediaquery ------------------------------------- */
@media(min-width: 100px) and (max-width: 767px) { /* X Small Screen */
.parent { width: 95% }
}
@media(min-width: 768px) and (max-width: 991px) { /* Small Screen */
.parent { width: 85% }
}
@media(min-width: 992px) and (max-width: 1199px) { /* Medium Screen */
.parent { width: 75% }
}
@media(min-width: 1200px) { /* Larg Screen */
.parent { width: 65% }
}
/* ------------------------------- End Mediaquery --------------------------------------- */
/*global $, jQuery, console, alert, prompt */
$(document).ready(function () {
'use strict';
//-------------------------------------- Start All Variable ---------------------------------------//
var rotate = $('.rotate'),
rotateUl = rotate.find('.rotate-ul'),
rotateUlLi = rotateUl.find('.rotate-ul-li'),
rotateTime = 1000,
hN = 0.5,
scale = 100,
calcWidth,
calcHeight,
bottomZero,
rightZero,
rotateFirstTop,
i,
scaleHeight,
scaleWidth,
scaleHeightAfter,
scaleWidthAfter,
zOndex = 999;
//-------------------------------------- End All Variable -----------------------------------------//
//-------------------------------------- Start All Function ---------------------------------------//
rotateUlLi.on('click', function () {
window.location.href = $(this).data('link');
});
function resetWidthHeight() {
rotate.width(rotate.parent().width()).height(rotate.width() * hN);
rotateUl.width(rotate.width()).height(rotate.height());
rotateUlLi.width(rotate.width() / 3).height(rotate.height() / 1.5);
calcWidth = rotate.width();
calcHeight = rotate.width() * hN;
bottomZero = calcHeight - (calcHeight / 2);
rightZero = calcWidth - (calcWidth / 3);
rotateFirstTop = rotateUlLi.eq(0).offset().top;
scaleHeight = rotateUlLi.height() + scale;
scaleWidth = rotateUlLi.width() + scale;
scaleHeightAfter = scaleHeight - scale;
scaleWidthAfter = scaleWidth - scale;
}
function runRotate() {
rotateUlLi.eq(0).css('z-index', zOndex - 8).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(0).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(0).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(1).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(1).css('z-index', zOndex - 1).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(1).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(2).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).css('z-index', zOndex - 2).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(2).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(2).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(3).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).css('z-index', zOndex - 3).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(3).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(3).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(4).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).css('z-index', zOndex - 4).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(4).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(4).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(5).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).css('z-index', zOndex - 5).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(5).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(5).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(6).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).css('z-index', zOndex - 6).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(6).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(6).animate({border: 'none'}, rotateTime, function () {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
rotateUlLi.eq(7).animate({top: bottomZero - (calcHeight / 8), left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).css('z-index', zOndex - 7).animate({top: bottomZero, left: calcWidth / 3, opacity: 1, height: scaleHeight, width: scaleWidth, marginLeft: -scale / 2, marginTop: -scale}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).animate({top: bottomZero - (calcHeight / 8), left: calcWidth / 6, opacity: 0.3, height: scaleHeightAfter, width: scaleWidthAfter, marginLeft: 0, marginTop: 0}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).animate({left: 0, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).animate({top: calcHeight / 8, left: calcWidth / 6}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).animate({top: 0, left: calcWidth / 3}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).animate({top: calcHeight / 8, left: rightZero - (calcWidth / 6)}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
rotateUlLi.eq(7).animate({left: rightZero, top: calcHeight / 4}, rotateTime, function () {
rotateUlLi.eq(7).animate({border: 'none'}, rotateTime, function () {
zOndex += 10;
runRotate();
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
}
//-------------------------------------- End All Function -----------------------------------------//
//-------------------------------------- Start Public ---------------------------------------------//
resetWidthHeight();
//-------------------------------------- End Public -----------------------------------------------//
//-------------------------------------- Start Slider Rotate --------------------------------------//
rotate.each(function () {
runRotate();
});
//-------------------------------------- End Slider Rotate ----------------------------------------//
//-------------------------------------- Start Window Resize --------------------------------------//
$(window).resize(function () {
resetWidthHeight();
});
//-------------------------------------- End Window Resize ----------------------------------------//
console.log(scaleHeightAfter);
});
// Em An
// 7-2017
// https://codepen.io/collection/AGNJNB/
