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 Previews
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 |
Do you need developer help for Hover otating cards folder of OnePiece characters?
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!
Robert Borghesi (dghez) Script Codes
| Name | Size |
| Fullscreen slice hero slider | 9,370 Kb |
| Animated title moving on scroll | 6,002 Kb |
| Continuous scrolling background of sticky header | 5,109 Kb |
| Pure Css Loader - Square | 2,498 Kb |
| Envato Remix Contest Challenge | 5,017 Kb |
| SlamDunk Parallax on MouseMove | 2,512 Kb |
| Text-mask background moving on MouseMove - v2 | 3,050 Kb |
| Enel brand - logo animation with tweenmax | 127,271 Kb |
| Opening animation from circular avatar | 5,977 Kb |
| Opening with auto typing responsive sentences with random background color loop | 5,435 Kb |
Create amazing love letters with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| BabyStore | Pablo-Ai | 3,807 Kb |
| This in constructor context | _shree33 | 1,718 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Eunice A | Ejbronze | 2,203 Kb |
| Blog | Rottingroom | 1,430 Kb |
| Pure CSS read more toggle | Idered | 2,344 Kb |
| Css or Czz.. | Judag | 4,111 Kb |
| RAQuote | Naderk007 | 4,412 Kb |
| Client-side Email Validation | Collizo4sky | 1,538 Kb |
| Myprofile | SoufianeAbid | 2,451 Kb |
Do you want hide your ip address?
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!