Hover otating cards folder of OnePiece characters
How do I make an hover otating cards folder of onepiece characters?
A folder of 5 cards that rotate on hover, with an svg screw. Have fun.. What is a hover otating cards folder of onepiece characters? How do you make a hover otating cards folder of onepiece characters? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.
Hover otating cards folder of OnePiece characters - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover otating cards folder of OnePiece characters</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> <g> <defs> <circle id="XMLID_1_" cx="10" cy="10" r="10"/> </defs> <use xlink:href="#XMLID_1_" overflow="visible" fill="#A58E3C"/> <clipPath id="XMLID_3_"> <use xlink:href="#XMLID_1_" overflow="visible"/> </clipPath> </g> <rect x="9" fill="#7B6C28" width="2" height="20"/> </svg> <div class="card infolder one" data-initialrotation="-50" data-card="0"> <img src="http://www.iltourdinibali.it/codepens/sanji.jpg" /> </div> <div class="card infolder two" data-initialrotation="-25" data-card="1"> <img src="http://www.iltourdinibali.it/codepens/frankie.jpg" /> </div> <div class="card infolder three" data-initialrotation="0" data-card="2"> <img src="http://www.iltourdinibali.it/codepens/luffy.jpg" /> </div> <div class="card infolder four" data-initialrotation="25" data-card="3"> <img src="http://www.iltourdinibali.it/codepens/sogeking.jpg" /> </div> <div class="card infolder five" data-initialrotation="50" data-card="4"> <img src="http://www.iltourdinibali.it/codepens/ace.jpg" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hover otating cards folder of OnePiece characters - Script Codes CSS Codes
*, *::before, *::after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
body{ color:white; background-color: rgb(66,66,66);
}
img{ width: 100%; height: auto; z-index: 2; position: relative;
}
.container{ position: relative; width: 300px; margin: 100px 0px 0px 250px;
}
.infolder{ position: absolute; width: 155px; height: 247px; -webkit-transform-origin: 20% 90%; -ms-transform-origin: 20% 90%; transform-origin: 20% 90%; transition: all 0.5s; border: 2px solid white; /*overflow: hidden;*/ z-index: 3; cursor: pointer;
}
.outfolder{ position: absolute; width: 155px; height: 247px; /*overflow: hidden;*/
}
.card{ position: absolute; transition: all 0.5s; border: 2px solid white; /*overflow: hidden;*/
}
.one{ -webkit-transform: rotate(-50deg); -ms-transform: rotate(-50deg); transform: rotate(-50deg);
}
.two{ -webkit-transform: rotate(-25deg); -ms-transform: rotate(-25deg); transform: rotate(-25deg);
}
.three{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);
}
.four{ -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg);
}
.five{ -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform: rotate(50deg);
}
.info{ background: url("http://www.iltourdinibali.it/codepens/onepiecebg.jpg"); width: 151px; height: 243px; position: absolute; top: 0px; left: 0px; color: red; transition: all 1s; z-index: 1;
}
svg{ position: absolute; top: 220px; left: 30px; z-index: 100;
}
.onleft{ transform: translate(153px, 0px);
}
Hover otating cards folder of OnePiece characters - Script Codes JS Codes
$(document).ready(function(){ var initialdeg = [], cardnumber, num,onthat; var whichout = 5, restoreclick, k, clicked; $(".infolder").each(function(i,el){ num = $(el).attr("data-initialrotation"); initialdeg[i] = parseInt(num); }); console.log(initialdeg); $(".infolder").hover(function(){ if( (!$(this).hasClass("outfolder"))){ onthat = $(this); cardnumber = $(this).attr("data-card"); console.log(cardnumber); if( cardnumber >= onthat){ cardnumber++;}; console.log("cardnumber e: "+ cardnumber); $(".infolder").each(function(i,el){ if( cardnumber != i && (!$(this).hasClass("outfolder")) ){ if(cardnumber == 0 ){ if(($(onthat).hasClass("infolder"))){ $(onthat).css({ "transform": "rotate("+(initialdeg[cardnumber]+5)+"deg)", "-webkit-transform": "rotate("+(initialdeg[cardnumber]+5)+"deg)" }); setTimeout(function(){ $(el).css({ "transform": "rotate("+(80+4*i)+"deg)", "-webkit-transform": "rotate("+(80+4*i)+"deg)" }); }, i*150); }; }; if(cardnumber == 1 ){ if(($(onthat).hasClass("infolder"))){ $(onthat).css({ "transform": "rotate("+(initialdeg[cardnumber]-5)+"deg)", "-webkit-transform": "rotate("+(initialdeg[cardnumber]-5)+"deg)" }); setTimeout(function(){ if(initialdeg[i] >= 0){ $(el).css({ "transform": "rotate("+(80+4*i)+"deg)", "-webkit-transform": "rotate("+(80+4*i)+"deg)" }); }else{ $(el).css({ "transform": "rotate("+(-80+4*i)+"deg)", "-webkit-transform": "rotate("+(-80+4*i)+"deg)" }); } }, i*150); }; }; if(cardnumber == 2 ){ if(($(onthat).hasClass("infolder"))){ setTimeout(function(){ if(initialdeg[i] >= 0){ $(el).css({ "transform": "rotate("+(80+4*i)+"deg)", "-webkit-transform": "rotate("+(80+4*i)+"deg)" }); }else{ $(el).css({ "transform": "rotate("+(-80+4*i)+"deg)", "-webkit-transform": "rotate("+(-80+4*i)+"deg)" }); } }, i*150); }; }; if(cardnumber == 3 ){ if(($(onthat).hasClass("infolder"))){ $(onthat).css({ "transform": "rotate("+(initialdeg[cardnumber]-5)+"deg)", "-webkit-transform": "rotate("+(initialdeg[cardnumber]-5)+"deg)" }); setTimeout(function(){ if(initialdeg[i] > 0){ $(el).css({ "transform": "rotate("+(80+4*i)+"deg)", "-webkit-transform": "rotate("+(80+4*i)+"deg)" }); }else{ $(el).css({ "transform": "rotate("+(-80+4*i)+"deg)", "-webkit-transform": "rotate("+(-80+4*i)+"deg)" }); } }, i*150); }; }; if(cardnumber == 4 ){ if(($(onthat).hasClass("infolder"))){ $(onthat).css({ "transform": "rotate("+(initialdeg[cardnumber]-5)+"deg)", "-webkit-transform": "rotate("+(initialdeg[cardnumber]-5)+"deg)" }); setTimeout(function(){ $(el).css({ "transform": "rotate("+(-80+4*i)+"deg)", "-webkit-transform": "rotate("+(-80+4*i)+"deg)" }); }, i*150); }; }; }; }); }}, function(){ k = 0; $(".infolder").each(function(i,el){ if( i == whichout ){k++;} if( (!$(this).hasClass("outfolder"))){ setTimeout(function(){ $(el).css({ "transform": "rotate("+(initialdeg[k])+"deg)", "-webkit-transform": "rotate("+(initialdeg[k])+"deg)" }); }, i*150); k++; }; }); } ); /* closing hover */
});
Developer | Robert Borghesi |
Username | dghez |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 3,131 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
SlamDunk Parallax on MouseMove | 2,512 Kb |
Hover otating cards folder of OnePiece characters | 3,131 Kb |
Opening with auto typing responsive sentences with random background color loop | 5,435 Kb |
Animated title moving on scroll | 6,002 Kb |
Easy parallax header | 3,018 Kb |
Enel brand - logo animation with tweenmax | 127,271 Kb |
Best 3 players on fifa 14 - HOVER THEM | 3,546 Kb |
Simple PureCss dropdown menu with following subnav | 2,966 Kb |
Opening animation from circular avatar | 5,977 Kb |
Text-mask background moving on MouseMove - v2 | 3,050 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Simple content swap | Snografx | 1,859 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Ocean | Gordonnl | 2,817 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!