Item design 2
How do I make an item design 2?
2nd option for item design. Button with arrow spin on click. What is a item design 2? How do you make a item design 2? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.
Item design 2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>item design 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body> <div id="mainContainer"> <div class="spacerContainer"></div> <div id="itemContainer"></div> <div class="behindItem"> <div class="item" id="ssItem_1" style="background: url(http://www.harrysadlermusic.com/wp-content/uploads/2014/05/studiomixlogo_200x200.jpg);"> <div class="overlay"> <div class="solidColorDiv"></div> <div class="itemInfoContainer"> <div class="itemInfo">40% off one month membership</div> <div class="itemButton border-for-button" id="button_1"> <!--<span class="downArrow">↓</span>--> <div class="arrow-down-back"></div> <div class="arrow-down-front"></div> </div> </div><!--end item info container--> </div><!--end overlay--> </div><!--end item--> </div><!--end behind item--> </div><!--end mainContainer-->
</body> <script src='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Item design 2 - Script Codes CSS Codes
body { background-color: #390a20;
}
#mainContainer { margin: 25px auto; padding: 0; width: 690px; height: 400px; background: white
}
.spacerContainer { padding: 0; margin: 0; width: auto; height: 20px; overflow: hidden;
}
#itemContainer { background-color: white; margin: 30px 20px 0 20px; width: 650px; height: auto; overflow: hidden;
}
.behindItem { display: inline-block; height: 200px; width: 200px; margin: 0 0 20px 13px; padding: 0; background-color: white; float: left; overflow: hidden;
}
.item { display: inline-block; height: 200px; width: 200px; padding: 0; float: left; overflow: hidden; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 700ms; -moz-transition: all 700ms ; -o-transition: all 700ms ; transition: all 700ms ; -webkit-transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995); -moz-transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995); -o-transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995); transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995);
}
.overlay { height: 200px; width: 200px; background-color:rgba(103,15,17, .9); overflow: hidden; -moz-transform: translatey(200px); -ms-transform: translatey(200px); -o-transform: translatey(200px); -webkit-transform: translatey(200px); transform: translatey(200px); -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s
}
.solidColorDiv { background-color:rgb(159,32,38); height: 200px; width: 200px; position: absolute; z-index:-1; overflow: hidden;
}
.itemSlide { -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0)
}
.keepSlide { -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0)
}
.itemInfoContainer { height: 200px; width: 200px; float: left; overflow: hidden;
}
.itemInfo { height: 45px; margin: 55px 0 auto 0; color: white; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); float: initial; line-height: 18px; text-align: center; padding: 6px; overflow: hidden;
}
.itemButton { background-color: white; border-top: 1px solid rgb(125,125,125); border-right: 1px solid rgb(135,135,135); *border-left: 1px solid rgb(125,125,125); border-radius: 50%; float: initial; height: 41px; width: 41px; margin: 12px auto auto auto; cursor: pointer;
}
.border-for-button { border-top: 0; border-right: 0; border-left: 0; height: 42px; width: 42px; margin: 12px auto auto auto;
}
/*.downArrow { position: absolute; text-align: center; left:46.5%; bottom: 45px; font-family: Arial, Helvetica, sans-serif; font-size: 30px;
}*/
.arrow-down-front { position:absolute; text-align: center; left:46%; bottom: 46px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 14px solid rgb(100,100,100);
}
.arrow-down-back { position:absolute; text-align: center; left:46%; bottom: 47px; width: 0; height: 0;
}
.arrow-move-on-mouse { left: 46%; bottom: 45px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 14px solid rgb(85,85,85);
}
.zeroHeight { max-height: 0
}
.hide { display: none
}
Item design 2 - Script Codes JS Codes
//make overlay transparent on click
$('.itemButton').click(function() { $(this).children('div').css({ transformOrigin: '0px 5px' }) .transition({ perspective: '100px', rotateX: '+=90deg' }); $(this).parent('.itemInfoContainer') .siblings('.solidColorDiv').fadeToggle("fast", 0);
});
//square slide on mouse over
$(".item")
.mouseenter(function() { $(this).children('.overlay').addClass('itemSlide');
})
.mouseleave(function() { $(this).children('.overlay').removeClass('itemSlide');
});
//arrow dark on mouse over
$('.itemButton')
.mouseenter(function() { $(this).removeClass("border-for-button"); $(this).children('.arrow-down-front').addClass("hide"); $(this).children('.arrow-down-back').addClass("arrow-move-on-mouse");
})
.mouseleave(function() { $(this).addClass("border-for-button"); $(this).children('.arrow-down-front').removeClass("hide"); $(this).children('.arrow-down-back').removeClass("arrow-move-on-mouse");
});
Developer | Harry Sadler |
Username | harrysadlermusic |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 3,205 Kb |
Views | 6,072 |
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 |
A hover effect SFS draft | 2,300 Kb |
Page layout | 1,862 Kb |
Change Table Cells with Slider | 2,144 Kb |
Forked to learn rotateY | 2,189 Kb |
A hover effect | 2,142 Kb |
Secret Store - item filter v2 | 5,651 Kb |
Audio Button example | 1,631 Kb |
Simple responsive web layout | 1,840 Kb |
SFS Secret Store | 11,361 Kb |
Simple Javascript Quiz | 3,427 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 |
Practice using Wixel | Emnk | 3,057 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 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!