I need to automate this image slideshow on the website I'm creating as an assignment. The automatic slideshow should work while it can also work with the buttons (labels) which are here currently.
Currently, it is only made with HTML and CSS, CSS3 code, even a javascript implementation is okay.
Thanks.
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: gray;
}
.header {
position: absolute;
background-color: black;
padding: 20px 10px;
min-width: 100vw;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.slideshow{
width: 100vw;
height: 90vh;
overflow: hidden;
margin-top: 15px;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #FFFFFF;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #FFFFFF;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.6s;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
#r3:checked ~ .s1{
margin-left: -40%;
}
#r4:checked ~ .s1{
margin-left: -60%;
}
#r5:checked ~ .s1{
margin-left: -80%;
}
.title{
transform: translateY(-50%);
position: relative;
top: 25%;
left:10%;
text-transform: uppercase;
color: white;
font-size: 60px;
font-weight: 400;
white-space: nowrap;
transition: 0.6s;
}
.title i {
font-size: 24px;
font-style: normal;
font-family: montserrat-hairline;
font-weight: 200;
opacity: .7;
}
<body>
<div class="header">
<img src="images/logo2.jpg" alt="logo">
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
</div>
</div>
<div class="slideshow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<div class="title">Brave <i>(2012)</i></div>
<img src="https://images.unsplash.com/photo-1516563670759-299070f0dc54?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="brave">
</div>
<div class="slide">
<div class="title">The Hobbit <i>(2012)</i></div>
<img src="https://images.unsplash.com/photo-1603791239531-1dda55e194a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="hobbit">
</div>
<div class="slide">
<div class="title">The Avengers <i>(2012)</i></div>
<img src="https://images.unsplash.com/photo-1524447466422-e1b709b80a08?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avengers">
</div>
<div class="slide">
<div class="title">The dark knight <i>(2008)</i></div>
<img src="https://images.unsplash.com/photo-1535949228921-80c784a22c9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80" alt="dark-knight">
</div>
<div class="slide">
<div class="title">Pirates of the Caribbean <i>(2003)</i></div>
<img src="https://images.unsplash.com/photo-1564849444446-f876dcef378e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="pirates">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</body>
Use slick carousel it's much easier and optional
Silck Carousel
There is what you need. A carousel made with javascript with previous and next buttons as well as auto slide
Image slider
I have the following HTML/CSS/JS:
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product {
display: inline-block;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
I want to achieve, that the div 'product-details' is displayed in the same line as the image and both of them should take 50% of the place available.
Additionally, i want to stick the checkout div to the bottom of the whole div, it is actually not even shown.
As you see, I used display: inline-block for the product div, but it is not working, I don't know why.
So bascically i want to achieve: image on the left, details on the right.
There is a lot more CSS and HTML, for a better readability I removed them.
The whole body is position: fixed, because it should always take the full page.
This is a MVCE and should work in a jsfiddle or in codepen.
Can someone help me?
First, it looks like some of your selectors weren't even working. Second, you were applying inline-block to the parent, when it really should have been applied to the children.
Either way, I think flexbox is a better solution here. I also made the image shrink or expand to fill the available space.
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.product {
display: flex;
}
.product>div {
width: 50%;
}
.product .prodcut-image {
margin-right: 20px;
}
.product img {
width: 100%;
height: auto;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Try this
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body{
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container{
position: relative;
height: 100%;
width: 100%;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product{
display: inline-block;
width:100%;
}
.cart-preview .body .products-container > .product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container > .product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before{
content: ' \25CF';
font-size: 30px;
}
.prodcut-image{
display:inline-block;
}
.product-details{
display:inline-block;
vertical-align:top;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout > button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left:100px;
}
.taxes{
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total{
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes{
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value{
float: right;
}
.cart-total .label{
float: left;
}
.taxes .value{
float: right;
}
.taxes .label{
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="img.svg" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://fakeimg.pl/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Although html structure should be updated and more refined.
Right now I have an accordion and interactive cycle I made using pure CSS. When a user clicks on a certain box on the cycle it opens up that specific accordion tab. Is it possible using vanilla JavaScript (no JQuery) to have it also scroll down to the specific tab when a user clicks a box on the cycle? Anything helps, cheers.
.container1 {
width: 250px;
height: 250px;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
transform: scale(0.85);
}
.ele,
.arrow,
.circle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#one {
transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
display: inline-block;
background-color: #1f497d;
width: 105px;
height: 50px;
border-width: 2px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
z-index: 3;
}
.ele:hover {
cursor: pointer;
transform: scale(1.019);
border-color: f4f4f4;
background-color: #214d84;
box-shadow: 0px 2px 9px #888888;
zoom: 1.02;
}
.circle {
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #cccfd7;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
z-index: 1;
left: -17px;
}
#two:hover ~ .arrow {
border-top-color: #006850;
transform: rotate(24deg);
}
#three:hover ~ .arrow {
border-top-color: #006850;
transform: rotate(66deg);
}
#four:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
transform: rotate(25deg);
}
#five:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
border-bottom-color: #006850;
transform: rotate(26deg);
}
#six:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
border-bottom-color: #006850;
transform: rotate(66deg);
}
#one:hover ~ .arrow {
border-color: #006850;
}
#one:hover ~ .circle:after {
border-top-color: #006850;
}
.circle:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -96px;
left: -36px;
background: #fff;
background-color: white;
transform: rotate(-120deg);
z-index: 1;
}
.circle:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: -83px;
left: -44px;
transform: rotate(-120deg);
z-index: 2;
}
.text1line {
font-size: 13px;
margin-top: 14%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.text1line:hover {
text-decoration: none;
}
.text2line {
font-size: 13px;
margin-top: 6%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.text2line:hover {
text-decoration: none;
}
.textcircle {
font-size: 15px;
margin-top: 37.5%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.textcircle:hover {
text-decoration: none;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight: bold;
color: #005bab;
}
.top {
margin-top: -20px;
text-align: center;
font-size: 13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
<div class="container1">
<div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div>
<div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div>
<div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div>
<div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
<div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
<div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
<div class="arrow"></div>
<div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span>
</p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Select A Top Team</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox" />
<label class="label" for="tab-two">Get Off To A Great Start</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-train" type="checkbox"/>
<label class="label" for="tab-train">Train For Success</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-manage" type="checkbox"/>
<label class="label" for="tab-manage">Manage Work For Results</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-grow" type="checkbox"/>
<label class="label" for="tab-grow">Grow Careers</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-build" type="checkbox"/>
<label class="label" for="tab-build">Build A Deep bench</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
Use document.getElementById("button_id").addEventListener("click", function); for trigger.
Use window.location.hash = '#div_id';to get focus.
Example:
document.getElementById("bt1").addEventListener("click", getfocus1);
document.getElementById("bt2").addEventListener("click", getfocus2);
document.getElementById("bt3").addEventListener("click", getfocus3);
document.getElementById("bt4").addEventListener("click", getfocus4);
document.getElementById("bt5").addEventListener("click", getfocus5);
function getfocus1(){
window.location.hash = '#tab1';
}
function getfocus2(){
window.location.hash = '#tab2';
}
function getfocus3(){
window.location.hash = '#tab3';
}
function getfocus4(){
window.location.hash = '#tab4';
}
function getfocus5(){
window.location.hash = '#tab5';
}
div{
width:100%;
height:300px;
text-align: center;
}
<button type="button" id = "bt1">Click Me for get focus in div 1!</button>
<button type="button" id = "bt2">Click Me for get focus in div 2!</button>
<button type="button" id = "bt3">Click Me for get focus in div 3!</button>
<button type="button" id = "bt4">Click Me for get focus in div 4!</button>
<button type="button" id = "bt5">Click Me for get focus in div 5!</button>
<div id ="tab1">
Data 1
</div>
<div id ="tab2">
Data 2
</div>
<div id ="tab3">
Data 3
</div>
<div id ="tab4">
data 4
</div>
<div id ="tab5">
data 5
</div>
I hope this is what you want.
It seems like CSS transition: translate() has a conflict with z-index and I can't create a fold effect for my block.
HTML
<div class="card">
<div class="arrow-box">
<span>Destinations</span>
</div>
<div class="choice" style="z-index: 1">
<div class="choice-header">New York</div>
<div class="choice-content" style="background: red"></div>
</div>
<div class="choice" style="z-index: 2">
<div class="choice-header">Boston</div>
<div class="choice-content" style="background: #801566"></div>
</div>
<div class="choice" style="z-index: 3">
<div class="choice-header">Seattle</div>
<div class="choice-content" style="background: green"></div>
</div>
<div class="choice" style="z-index: 4">
<div class="choice-header">Washington</div>
<div class="choice-content" style="background: #1e3180"></div>
</div>
<div class="choice" style="z-index: 5">
<div class="choice-header">San Francisco</div>
<div class="choice-content" style="background: #e5f400"></div>
</div>
</div>
CSS
.choice {
transition: .6s;
margin-bottom: -264px;
z-index: 0;
}
.choice-content {
transition: .6s;
}
.choice-header {
height: 44px;
background: #49647a;
transition: .6s;
transition-timing-function: ease-in-out;
text-align: center;
line-height: 44px;
color: white;
font-size: 22px;
font-family: 'PFBagueSansProLight', sans-serif;
text-transform: uppercase;
cursor: pointer;
}
.choice-header:after {
content: '';
position: absolute;
margin-top: 15px;
right: 22px;
display: inline-block;
width: 18px;
height: 18px;
background: url("/static/pages/img/polygon.png") no-repeat center;
transition: 0.6s;
}
.choice:last-child {
margin-bottom: 0;
}
.choice.selected {
transform: translate3d(0, -265px, 0);
margin-bottom: -265px;
}
.choice.selected > .choice-header:after {
transform: rotate(180deg);
}
.choice-content {
height: 265px;
}
.card {
height: 527px;
background: #ebebeb;
overflow: hidden;
}
.arrow-box {
position: relative;
background: #49647a;
height: 44px;
margin-bottom: 260px;
}
.arrow-box:after {
top: 100%;
left: 50%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(73, 100, 122, 0);
border-top-color: #49647a;
border-width: 16px 165px 0 165px;
border-style: solid;
margin-left: -165px;
}
.arrow-box span {
text-align: center;
vertical-align: middle;
display: block;
height: 44px;
line-height: 44px;
font-size: 22px;
color: white;
}
JavaScript
$('.choice-header').click(function() {
var elem = $(this).parents().eq(1).find('.choice');
var i = $(this).hasClass('selected') ? 0 : 1;
var n = elem.index($(this).parent());
elem.removeClass('selected');
elem.slice(0, n + i).addClass('selected');
});
Codepen
You can see that .choice-content interferes with other .choices during the transition animation. Is there a way to avoid that?
You have assigned z-index to each .choice which is correct but you forgot to give position to them. Codepen
.choice {
transition: .6s;
margin-bottom: -264px;
z-index: 0;
position: relative;
}
Point, Note:
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
Hey i am using the textillate.js plug in for my portfolio and i was testing the animation and it is really slow and laggy. dont know if its my laptop or not. The animation is my heading class and also whenever i did the animation in a separate page with only the header only it worked smoothly. is it possible my pages load time is affecting the animation?
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class = "heading tlt">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading tlt">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
<!------------------------------------------------------------ABOUT ME-------------------------------------------------------------------->
<div class = "about-container">
<div id = "underline">
<h1 class = "title" id = "about-me">About Me</h1>
</div>
<div class = "about-me-wrapper">
<div class = "details selfie wow fadeIn" data-wow-duration="2s"></div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<p id = "sum"><br>Lorem Ipsum </p>
</div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<div id = "details-hobbies">
<div class = "square">
<div class = "square-cont">
<div class = "ion-code ion-cont">
<p class = "under-img">Coding
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-basketball ion-cont">
<p class = "under-img">Basketball
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-people ion-cont">
<p class = "under-img">Family</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-university ion-cont">
<p class = "under-img">School</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------SKILLS------------------------------------------------------------------->
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="3s">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills last">
<div class = "logo">
<div class = "ion-social-angular">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------PORTFOLIO----------------------------------------------------------------->
<div class = "portfolio-container">
<div id = "underline-last">
<h1 class = "title last" id = "portfolio">Portfolio</h1>
</div>
<div class = "portfolio-wrapper">
<a href = "#" class = "tiles wow slideInUp" data-wow-offset="280">
<div class = "port"><img src = "bg.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #1</h3>
<p class="content-text">Dallas Mavericks</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg2.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
</div>
</div>
<!-------------------------------------------------------------CONTACT-------------------------------------------------------------------->
<div id = "contact-container">
<div id = "contact-underline">
<h1 id = "contact-title">Hey Lets Keep In Touch!</h1>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="text" placeholder="email"/>
<input type="text" placeholder="subject"/>
<textarea placeholder="messge" rows = "7" cols = "60"></textarea>
<button>create</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "jquery-3.1.0.js"></script>
<script src="index.js"></script>
<script src = "jquery.lettering.js"></script>
<script src = "jquery.textillate.js"></script>
<script src= "wow.min.js"></script>
<script>new WOW().init();</script>
<!--<script src="viewportchecker.js"></script>-->
</body>
</html>
<!----------------------CSS-------------------------------------------->
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*-----------------------------------------------------------ABOUT ME--------------------------------------------------------------------*/
.about-container{
position: relative;
width: 100%;
height: 700px;
background-color: #ededed;
margin-top: 0;
padding: 0;
}
#underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #0A0A0A;
margin-bottom: 40px;
}
.title{
color: #0A0A0A;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
.about-me-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.details{
position: relative;
width: 370px;
height: 470px;
margin-top: 10px;
}
.details.selfie{
background-image: url(selfie2.png);
background-size: cover;
background-repeat:no-repeat;
border-radius: 10px;
}
#details-hobbies{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square{
width: 50%;
height: 50%;
}
.square-cont{
position: relative;
width: 100%;
height: 100%;
}
.ion-cont{
position: absolute;
color: #0A0A0A;
text-align: center;
font-size: 105px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.under-img{
font-size: 25px;
color: #0A0A0A;
margin-top: -5px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-align: center;
}
/*-------------------------------------------------------------------SKILLS--------------------------------------------------------------*/
.skills-container{
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second{
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
#underline-second{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills{
width: 280px;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last{
border: none;
}
.logo{
width: 265px;
height: 340px;
margin-top: 10px;
}
.ion-social-html5{
text-align: center;
font-size: 280px
}
.des{
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3{
text-align: center;
font-size: 280px
}
.ion-social-javascript{
text-align: center;
font-size: 280px
}
.ion-social-angular{
text-align: center;
font-size: 280px
}
/*--------------------------------------------------------------------PORTFOLIO---------------------------------------------------------*/
.portfolio-container{
position: relative;
width: 100%;
height: 870px;
background-color: #444444;
top: 0;
padding: 0;
}
#underline-last{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #f5f5f5;
margin-bottom: 40px;
}
.title.last{
color:#f5f5f5;
}
.portfolio-wrapper{
position: relative;
max-width: 990px;
height: auto;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.port{
position: relative;
width: 280px;
height: 315px;
margin-top: 15px;
display:inline-block;
background-repeat: no-repeat;
}
.port:hover{
outline: #4169E1 solid 3px;
}
img{
position: relative;
max-width: 100%;
height: 100%;
}
.content-overlay{
background: rgba(0,0,0,0.9);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.port:hover .content-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
font-family: 'Raleway',sans-serif;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.port:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}
/*--------------------------------------------------------------CONTACT ME---------------------------------------------------------------*/
#contact-container{
position: relative;
width: 100%;
height: 650px;
background: rgba(32,157,229,1);
background: -moz-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(32,157,229,1)), color-stop(100%, rgba(32,108,229,1)));
background: -webkit-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -o-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -ms-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: linear-gradient(to right, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209de5', endColorstr='#206ce5', GradientType=1 );
}
#contact-underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #e1e1e1;
margin-bottom: 40px;
padding-top: 20px;
}
#contact-title{
font-family: 'Raleway',sans-serif;
margin-bottom: 10px;
text-align: center;
color: white;
}
.login-page{
width: 400px;
margin: auto;
height: 400px;
}
.form{
position: relative;
background: #FFFFFF;
max-width: 360px;
/*margin: 0 auto 80px;*/
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form textarea{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
outline: 0;
background: #1148a0;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
<!-------------------------------------JS--------------------------------->
$(document).ready(function(){
$('.heading').textillate({
in: {
effect: 'fadeInDown',
delay: 1000,
sync: true
}
});
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});