Tag Archives: jquery

jQuery Hover3d

DEMO DOWNLOAD HOW TO USE

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

HTML

<div class="project">
<div class="project__card">
<!-- Content element goes here -->
</div>
</div>

CSS

.hover-in{
transition: .3s ease-out;
}
.hover-out{ transition: .3s ease-in; }

JS

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>
<script> $(".project").hover3d({ selector: ".project__card" }); </script>

simple responsive tabs jquery

Prev

1st

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

2nd

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

3rd

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

4rd

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

HTML

<div id="simple-responsive-tab-jquery"><ul class="tab">
<li class="active"><a href="#tab1">1st</a></li>
<li><a href="#tab2">2nd</a></li>
<li><a href="#tab3">3rd</a></li>
<li><a href="#tab4">4th</a></li>
</ul>
<div id="tab1" class="tab active">
<h1>1st</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div>
<div id="tab2" class="tab none">
<h1>2nd</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div>
<div id="tab3" class="tab none">
<h1>3rd</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div>
<div id="tab4" class="tab none">
<h1>4rd</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div></div>

CSS


#simple-responsive-tab-jquery ul.tab {
padding: 0;
margin: 0px;
}
#simple-responsive-tab-jquery ul.tab li {
display: inline-block;
list-style: outside none none;
width: 24.7%;
}
#simple-responsive-tab-jquery ul.tab li a {
padding: 13px 0;
text-align: center;
font-weight: bold;
background: #454545 none repeat scroll 0 0;
color: #fff;
text-decoration: none;
display: block;
}
#simple-responsive-tab-jquery ul.tab li.active a {
background: #cb0000 none repeat scroll 0 0;
}
#simple-responsive-tab-jquery div.tab {
background: #111;
padding: 10px;
margin-bottom:50px;
color:#fff;
}
#simple-responsive-tab-jquery div.tab.none {
display:none;
}
.clear {
clear: both;
}
#simple-responsive-tab-jquery div.tab.active {
border: 2px solid #cb0000;
}

JS


$(document).ready(function(){
$("#simple-responsive-tab-jquery ul.tab li a").click(function(event){
event.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
var tab = $(this).attr("href");$("div.tab").not(tab).css("display", "none");
$(tab).fadeIn().addClass("active");
});
});