<div class="custom-cursor">
<i class="fas fa-angle-left fa-lg px-1"></i>
<i class="fas fa-angle-right fa-lg px-1"></i>
</div>
<div class="full-width-module">
<div class="carousel-title">
<p class="design">Design</p>
<p class="">For everybody</p>
<p><span class="mr-5">Showreel</span> <span>About</span></p>
</div>
<div class="custom-carousel active-rotating">
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/jLvmK3k/img1Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/b2V8Lrc/img2Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/DKL5bsF/img3Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/p2B5Jxy/img4Edit.png)"></div>
<div class="carousel-photo-container" style="background-image: url(https://i.ibb.co/NsSvkcL/img5Edit.png)"></div>
</div>
<div class="carousel-info"><i class="fas fa-long-arrow-alt-left mr-5"></i>Drag and scroll carousel<i class="fas fa-long-arrow-alt-right ml-5"></i></div>
</div>
*{
padding: 0;
margin: 0;
}
body{
overflow: hidden;
cursor: none;
}
.full-width-module{
position: relative;
top: 0;
background-color: #000;
}
.custom-carousel{
height: 100%;
position: relative;
z-index:1;
transition: 0.3s all;
transform-origin: 0 0;
transform: rotate(0deg);
}
.carousel-photo-container{
position: absolute;
top: 0;
left: 0;
float: left;
padding: 0 50px;
z-index:2;
user-select: none;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.custom-cursor{
z-index: 3;
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.6);
pointer-events: none;
transform: translate(-50%, -50%);
color: rgba(255,255,255,.6);
font-weight: 100;
}
.custom-cursor > .fa-angle-left{
display: none;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
}
.custom-cursor > .fa-angle-right{
display: none;
position: absolute;
top: 50%;
right: 0;
transform: translate(100%, -50%);
}
.carousel-title{
position: relative;
z-index: 2;
font-size: 48px;
color: #fff;
font-weight: 999;
user-select: none;
}
.carousel-title > p:nth-child(1){
position: absolute;
margin: 40px 0 0 10%;
}
.carousel-title > p:nth-child(2){
position: absolute;
margin: 100px 0 0 10%;
}
.carousel-title > p:nth-child(3){
top: 0;
position: absolute;
right: 0;
margin: 45px 10% 0 0;
font-size: 16px;
color: rgba(255,255,255,.6);
font-weight: 300;
}
.carousel-info{
z-index: 2;
position: relative;
bottom: 0;
transform: translateY(-300%);
color: rgba(255,255,255,.6);
text-align: center;
user-select: none;
}
//Making carousel
function fullHeightFun($el) {
let fullHeight = $(window).outerHeight();
$el.css("height", fullHeight);
}
function carouselPhotoFun($el) {
let fullWidth = $(window).outerWidth();
let fullHeight = $(window).outerHeight();
$el.css({
"width": parseFloat(fullWidth) * 0.3,
"height": parseFloat(fullHeight) * 0.4
});
}
function customCarouselWidth($el, $photo) {
let width = 0;
$photo.each(function () {
width += $(this).outerWidth();
});
$el.css("width", width);
}
function rotatePhoto($photo) {
let currentDegrees = 0;
let degree = 360 / $photo.length;
$photo.each(function () {
$(this).css({
"transform": "translate(-10%, -40%) rotate(" + currentDegrees + "deg)"
});
currentDegrees += degree;
});
}
function makeR() {
return $(window).outerWidth() * 3;
}
function resetValues($photo) {
$photo.css({
"top": "0",
"left": "0"
});
}
function makeCarousel($photo, r, i) {
if (i < $photo.length) {
//console.log(r);
let a = 360 / $photo.length * i;
//r = math.sqrt(x^2+y^2)
//sina = y/r y = sina*r
//cosa = x/r
//tga = y/x
let alfaRadian = a * Math.PI / 180;
let y = Math.round(Math.sin(alfaRadian) * r);
let x = Math.round(Math.cos(alfaRadian) * r);
if (i < $photo.length) {
$photo.eq(i).css({
"top": "-=" + x,
"left": "+=" + y
});
}
i++
makeCarousel($photo, r, i);
} else {
i = 0;
return 0;
}
}
function centerCarousel($el, $photo, r) {
let h = $(window).outerHeight();
let w = $(window).outerWidth();
let photoW = $photo.outerWidth() / 2;
let photoH = $photo.outerHeight() / 2;
$el.css({
"top": r + h / 2,
"left": w / 2 - photoW,
"transformOrigin": '' + photoH + 'px ' + photoH / 4 + 'px ' + '0px'
});
}
//Rotating carousel
function toggleArrows($cursor) {
$cursor.find("i").toggle();
}
function rotateCarousel(e, $photo, $el, $fullWidthModule) {
let a = 360 / $photo.length;
let currentX = e.pageX;
let differnceX = currentX - startX;
startX = currentX;
checkRotate += differnceX;
currentRotateValue += differnceX * 0.02;
$el.css({
"transform": "rotate(" + currentRotateValue + "deg)"
});
}
function rotateUp($photo, $el) {
let a = 360 / $photo.length;
let difference = currentRotateValue % a;
currentRotateValue -= difference;
$el.css({
"transform": "rotate(" + currentRotateValue + "deg)"
});
}
//Custom cursor
function customCursorMove(e, $cursor) {
$cursor.css({
"top": e.pageY,
"left": e.pageX
});
}
//seba
function startSeba($fullWidthModule, $this, $photo){
$this.next().html("Not for Pan Seba");
$fullWidthModule.css({
"background": "linear-gradient(to bottom, #ffff89 0%,#ffff89 9%,#ffff89 13%,#59ff5e 41%,#59ff5e 49%,#eeff07 100%)"
});
$photo.css({
"background-image": "url('https://mdbootstrap.com/img/Photos/Avatars/sebastian%20(1).jpg')"
});
}
$(function () {
const $fullWidthModule = $(".full-width-module");
const $customCarousel = $(".custom-carousel");
const $carouselPhotoContainer = $(".carousel-photo-container");
const $customCursor = $(".custom-cursor");
currentRotateValue = 0;
checkRotate = 0;
//Making carousel
fullHeightFun($fullWidthModule);
carouselPhotoFun($carouselPhotoContainer);
rotatePhoto($carouselPhotoContainer);
var r = makeR($carouselPhotoContainer);
makeCarousel($carouselPhotoContainer, r, 0);
centerCarousel($customCarousel, $carouselPhotoContainer, r);
$(window).on("resize", function () {
fullHeightFun($fullWidthModule);
carouselPhotoFun($carouselPhotoContainer);
r = makeR();
resetValues($carouselPhotoContainer);
makeCarousel($carouselPhotoContainer, r, 0);
centerCarousel($customCarousel, $carouselPhotoContainer, r);
});
//Rotating carousel
$fullWidthModule.on("mousedown", function (e) {
toggleArrows($customCursor);
startX = e.pageX;
$fullWidthModule.on("mousemove", function (e) {
rotateCarousel(e, $carouselPhotoContainer, $customCarousel, $fullWidthModule);
});
});
$fullWidthModule.on("mouseup", function () {
$fullWidthModule.off("mousemove");
rotateUp($carouselPhotoContainer, $customCarousel);
toggleArrows($customCursor);
});
//Custom cursor
$(window).on("mousemove", function (e) {
customCursorMove(e, $customCursor)
});
const sebaExe = $(".design");
sebaExe.on("click", function(){
currentRotateValue+=360;
startSeba($fullWidthModule, $(this), $carouselPhotoContainer);
});
});