Currently I'm working on a site where I have a big infinite animation when the user enters the page. Now, on my computer(google chrome) and my phone(safari),
the animation looks fine and behaves correctly. However, when I tried to enter the site from my friend's Samsung Galaxy S8, the website start glitching.
The url for the site is: website
When I scroll the page down on Samsung Galaxy, the animation on the top always takes the focus, so it's impossible to scroll down to the rest of the page.
Here is my styles for the animation:
.static {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
top: -100px;
opacity: 0.05;
z-index: 230;
user-select: none;
user-drag: none;
}
.error {
text-align: center;
font-size: 95px;
font-weight: 700;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
letter-spacing: 3px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
animation: noise 2s linear infinite;
overflow: default;
}
.error::after {
content: 'Philanthropist';
font-size: 95px;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: blue;
animation: noise-1 .2s linear infinite;
}
.error::before {
content: 'Philanthropist';
font-size: 95px;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: red;
animation: noise-2 .2s linear infinite;
}
.info {
text-align: center;
font-size: 30px;
font-style: italic;
text-align: center;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
animation: noise-3 1s linear infinite;
}
#media (max-width: 900px) {
.error,
.error:after,
.error:before {
font-size: 50px;
padding-left: 40px;
}
.info {
top: 140px;
}
}
#media (max-width: 650px) {
.error,
.error::after,
.error::before {
font-size: 40px;
padding-left: 50px;
}
}
#media (max-width: 450px) {
.error,
.error::after,
.error::before {
font-size: 30px;
}
.error {
top: -60px;
}
.info {
font-size: 20px;
}
#logo-section {
.arrow {
margin-bottom: 40px;
}
}
}
#keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
#keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: 6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
#keyframes noise {
0%,
3%,
5%,
42%,
44%,
100% {
opacity: 1;
transform: scaleY(1);
}
4.3% {
opacity: 1;
transform: scaleY(1.7);
}
43% {
opacity: 1;
transform: scaleX(1.5);
}
}
#keyframes noise-3 {
0%,
3%,
5%,
42%,
44%,
100% {
opacity: 1;
transform: scaleY(1);
}
4.3% {
opacity: 1;
transform: scaleY(4);
}
43% {
opacity: 1;
transform: scaleX(10) rotate(60deg);
}
}
And here is the markup for the page:
<% include partials/header %>
<link rel="stylesheet" href="/css/aos.css" />
<link rel="stylesheet" href="/css/landing.css">
<section id="logo-section">
<div class="dark-overlay">
<div class="container h-100">
<div class="row h-100">
<div class="col d-flex flex-column justify-content-center text-center">
<div class="error">Philanthropist</div>
<br />
<br />
<span class="info">The Bedroom</span>
</div>
</div>
</div>
</div>
</section>
<section id="divider">
</section>
<!-- Music Section -->
<section id="music-section" class="py-5">
<div class="dark-overlay">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="display-4 text-center" data-aos-once="true" data-aos-delay="500" data-aos="fade-down" data-aos-duration="900">Music</h2>
<iframe data-aos-once="true" data-aos-delay="500" data-aos="fade-up" data-aos-duration="1100" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/30328335&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=false"
width="70%" data-embed="true" frameborder="no" height="450"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section id="newsletter-section" class="text-dark">
<div class="container">
<div class="row">
<div class="col-md-5 d-flex flex-column mb-5 mx-auto">
<form action="/subscribe" method="POST">
<h3 class="mb-4 text-center mx-auto">Stay Tuned</h3>
<input type="text" class="form-control form-control-lg mb-3" name="name" placeholder="Name">
<input type="text" class="form-control form-control-lg mb-3" name="email" placeholder="Email">
<button class="btn btn-dark btn-lg btn-block">
Subscribe
</button>
</form>
</div>
<div class="col-md-5 mx-auto">
<h3 class="mb-4 text-center mx-auto">Follow</h3>
<div id="social-media" class="d-flex flex-row justify-content-center mb-0">
<a href="https://twitter.com/philanxy" class="mx-2 icon-button twitter" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
data-aos-once="true" target="_blank">
<i class="fa fa-twitter icon-twitter"></i>
<span></span>
</a>
<a href="https://www.facebook.com/philanxyxy/" class="mx-2 icon-button facebook" data-aos-delay="200" data-aos="fade-down"
data-aos-duration="800" data-aos-once="true" target="_blank">
<i class="fa fa-facebook icon-facebook"></i>
<span></span>
</a>
<a href="https://soundcloud.com/philanxy" class="mx-2 icon-button soundcloud" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
data-aos-once="true" target="_blank">
<i class="fa fa-soundcloud icon-soundcloud"></i>
<span></span>
</a>
<a href="https://philanthropist.bandcamp.com/" class="mx-2 icon-button bandcamp" data-aos-delay="200"
data-aos="fade-down" data-aos-duration="800" data-aos-once="true" target="_blank">
<i class="fa fa-bandcamp icon-bandcamp"></i>
<span></span>
</a>
</ul>
</div>
</div>
</div>
</section>
<% include partials/footer %>
<script type="text/javascript" src="/js/aos.js"></script>
<script type="text/javascript" src="/js/landing.js"></script>
<script type="text/javascript" src="/js/navbar-fixed.js"></script>
What could be causing this?
Related
I want to achieve this layout with the items of the carousel:
But this is what I've been able to accomplish:
Here is my code and a fiddle http://jsfiddle.net/xvac9usr/8/:
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Card Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
</head>
<body>
<div class="carousel">
<button class="carousel__icon carousel__prev">
Prev
</button>
<ul class="carousel__list">
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--1">
<h1 class="heading-primary">Wild</h1>
<h2 class="heading-secondary">Nevada</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rocky</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--2">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__active">
<div class="card__image card__image--3">
<h1 class="heading-primary">Refreshing</h1>
<h2 class="heading-secondary">Amazonas</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rainy</div>
<div class="card__tag">Dangerous</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--4">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--5">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
</ul>
<button class="carousel__icon carousel__next">
Next
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
JS:
$(document).ready(() => {
var carousel = $(".carousel__list"),
carouselItems = $(".carousel__item"),
clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
itemWidth =
carouselItems.width() +
parseInt(carouselItems.first().css("marginRight"));
const refreshChildPosition = () => {
for(let i = 0; i < carouselItems.length; ++i){
$(carouselItems[i]).css("left", itemWidth * i);
}
};
refreshChildPosition();
//carousel.width(itemWidth * carouselItems.length);
$(".carousel__next").click(e => {
e.preventDefault();
});
$(".carousel__prev").click(e => {
e.preventDefault();
moveRight();
});
});
CSS:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-family: "Open Sans", sans-serif; }
.card {
overflow: hidden;
width: 50rem;
height: 60vh;
border-radius: 0.8rem;
box-shadow: 0px 122px 264px -115px black;
transition: all 0.3s ease-out; }
.card:hover {
transform: translateY(-1rem);
box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7); }
.card:not(:last-child) {
margin-right: 9rem; }
.card__image {
width: 100%;
height: 100%;
border-radius: inherit;
padding: 3rem 0;
z-index: 1;
position: relative;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out; }
.card__image--1 {
background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
.card__image:hover {
transform: scale(1.03); }
.card__tag-box {
position: absolute;
left: 0;
bottom: 0;
padding: 2rem 3rem;
display: flex;
flex-wrap: wrap; }
.card__tag {
border: solid 1px white;
padding: 3px 5px;
border-radius: 3px;
transition: transform 0.2s, background-position 0.3s ease-out;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #9e9e9e 50%);
background-size: 225%;
display: inline-block;
margin: 0.2rem 0; }
.card__tag:hover {
background-position: 100%;
transform: translateY(-0.2rem); }
.card__tag:not(:last-child) {
margin-right: 1rem; }
.card__active {
transform: translateY(-0.5rem) scale(1.1); }
.card__active:hover {
transform: translateY(-2rem) scale(1.1); }
.card__small {
transform: scale(0.9); }
.card__small:hover {
transform: translateY(-1rem) scale(0.9); }
.carousel {
height: 100vh;
position: relative; }
.carousel__list {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none; }
.carousel__item {
position: absolute; }
.carousel__item:not(:last-child) {
margin-right: 4%; }
.carousel__icon {
cursor: pointer;
position: absolute;
width: 5rem;
height: 5rem; }
.carousel__prev {
left: 0;
top: 50%;
z-index: 100; }
.carousel__next {
right: 0;
top: 50%;
z-index: 100; }
body {
font-family: "Open Sans", sans-serif;
font-size: 1.4rem; }
.heading-primary {
font-weight: 300;
letter-spacing: 1px;
font-size: 2em; }
.heading-secondary {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 1px; }
By subtracting the position by 440 I can seem to get a similar result but it is a hard coded solution and not responsive.
Try removing/comment this piece of css code and test your application
.carousel__item {
position: absolute; }
So what I'm trying is basically rotating a cube by clicking on buttons that are either located right on the cube or floating next to it. For now I keep them floating because I was trying out a lot and it prooved to be easier this way, but placing them on the cube would be no problem at all.
The ACTUAL problem is that not all rotation axes seem to be treated equally. What I mean by that is that if I rotate along X, the Y and Z axes rotate aswell. But if I rotate along Y (or Z), the Z-axis (or Y-axis) rotate BUT the X-axis ALWAYS STAYS THE SAME.
In my code this means that no matter how the cube is rotated, the rotation along the X-axis, triggered by clicking on the red squares "3" or "4" will always rotate the cube up or down whilst the other buttons rotate the cube according to its position.
Don't mind that the numbers 1,2,5 and 6 get switched. This is just the closest I could get to a solution but rotating the cube randomly for a while will always result in strange movement sooner or later.
My code:
var rotationX = 0;
var rotationY = 0;
var rotationZ = 0;
var rotation = 0;
var translate = 0;
function showDebug() {
var deBugInfo = '<p>X: '+rotationX + '</p>';
deBugInfo += '<p>Y: '+rotationY + '</p>';
deBugInfo += '<p>Z: '+rotationZ + '</p>';
$('#deBug').html(deBugInfo);
}
function cubeRotate() {
$('#cube').css('transform', 'rotateX('+rotationX+'deg) rotateY('+rotationY+'deg) rotateZ('+rotationZ+'deg)');
showDebug();
}
/*
function buttonsRotate() {
$('#buttons').css('transform', 'rotate('+rotation+'deg) translate('+0+')');
showDebug();
}
*/
$(function () {
$('#dir1').on('click', function () {
//var myStyle = $('#cube').css('transform');
//console.log(myStyle);
//rotationY = rotationY - 90;
rotationY -= 90;
cubeRotate();
});
$('#dir2').on('click', function () {
rotationY += 90;
cubeRotate();
});
$('#dir3').on('click', function () {
rotationX -= 90;
cubeRotate();
rotation -= 90;
// buttonsRotate();
});
$('#dir4').on('click', function () {
rotationX += 90;
cubeRotate();
rotation += 90;
// buttonsRotate();
});
$('#dir5').on('click', function () {
rotationZ += 90;
cubeRotate();
});
$('#dir6').on('click', function () {
rotationZ -= 90;
cubeRotate();
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
position: absolute;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transition-duration: 0.5s;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div id="deBug">
</div>
<div class='arrow' id='dir3'>X-</div>
<div class='arrow' id='dir4'>X+</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y-</div>
<div class='arrow' id='dir2'>Y+</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
<div id="cube">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="achse achseX"></div>
<div class="achse achseY"></div>
<div class="achse achseZ"></div>
</div>
</body>
</html>
I've tried giving every single element the "transform-style: preserve-3d". Didn't work.
I think it could actually better work with the buttons on the cube but that's a question to be answered later and NOT the subject here.
If anyone has an idea how to get ALL AXES TREATED EQUALLY, please tell me, I'm slowly getting mad af with this cube :D
Thank you!
Edits:
2018_04_18:
Also tied to set the tranform origin without success.
2018_04_19:
Updated the snippet so the buttons don't rotate anymore but are fixed so you can always click them.
2018_04_20:
I found two examples from pencode that could be helpful (they both work by dragging the cube with the mouse, I'm not sure if that's got something to do with the problem)...
https://codepen.io/jordizle/pen/haIdo/
This cube has the nice aspect that the sides automatically rotate so that they can be read properly. However if you rotate it to sides 1 or 6, it shows the same problem as my cube does as it simply won't rotate left or right.
https://codepen.io/ge1doot/pen/PqZKbv
In this example the problem seems to be solved. No matter the cube's position you can always spin it in every direction. (I won't need the function to split it however)
My problem is that I can't really see what's the difference between the scrips they use and therefore I don't know why the second one rotates perfectly but I have a feeling this is the right track. If anyone could compare them and solve this mystery it would be really nice ;)
Your problem is caused by something called Euler Order. Basically, it's in what order the axes are used to calculate the final rotation.
The CSS transform Euler Order is the most common one: X, Y, Z.
The X-axis is computed first, so it's always stuck to its resting position. You cannot change the Euler Order in CSS. Even if you could, the first axis of the Euler Order will always be "not treated equally."
Another problem with Euler Rotation is Gimbal Lock. Click X, click Y, and click Z in your demo. Now try rotating X and Z. They're the same! You've just encountered Gimbal Lock, which is super hard to solve and not possible to fix with just CSS.
RELATIVE ROTATION - AXES ROTATE WITH THE CUBE
function rotate(axis, degrees) {
cube.outerHTML = `<div class='gimbal' id='container' style="transition: all 0.5s; transform-style: preserve-3d; transform: rotate${axis}(0deg); position: relative; transition-timing-function: ease-in-out; width: 0; height: 0; transform-origin: 50vw 50vh;">${cube.outerHTML}</div>`;
window.setTimeout(function () {
container.style.transform = `rotate${axis}(${degrees}deg)`;
container.removeAttribute('id');
}, 10);
}
$('#dir1').on('click', function () {
rotate('Y', '90');
});
$('#dir2').on('click', function () {
rotate('Y', '-90');
});
$('#dir3').on('click', function () {
rotate('X', '90');
});
$('#dir4').on('click', function () {
rotate('X', '-90');
});
$('#dir5').on('click', function () {
rotate('Z', '90');
});
$('#dir6').on('click', function () {
rotate('Z', '-90');
});
rotate('X', '0');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50vh; left: 50vw;
transform-style: preserve-3d;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="cube" class="gimbal">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y+</div>
<div class='arrow' id='dir2'>Y-</div>
<div class='arrow' id='dir3'>X+</div>
<div class='arrow' id='dir4'>X-</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
</body>
</html>
GLOBAL ROTATION - AXES DON'T ROTATE WITH THE CUBE
function rotate(axis, degrees) {
let outermostRotator = $('body > .gimbal').get(0);
outermostRotator.outerHTML = `<div class='gimbal' id='container' style="transition: all 0.5s; transform-style: preserve-3d; transform: rotate${axis}(0deg); position: relative; transition-timing-function: ease-in-out; width: 0; height: 0; transform-origin: 50vw 50vh;">${outermostRotator.outerHTML}</div>`;
window.setTimeout(function () {
container.style.transform = `rotate${axis}(${degrees}deg)`;
container.removeAttribute('id');
}, 10);
}
$('#dir1').on('click', function () {
rotate('Y', '90');
});
$('#dir2').on('click', function () {
rotate('Y', '-90');
});
$('#dir3').on('click', function () {
rotate('X', '90');
});
$('#dir4').on('click', function () {
rotate('X', '-90');
});
$('#dir5').on('click', function () {
rotate('Z', '90');
});
$('#dir6').on('click', function () {
rotate('Z', '-90');
});
rotate('X', '0');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50vh; left: 50vw;
transform-style: preserve-3d;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="cube" class="gimbal">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y+</div>
<div class='arrow' id='dir2'>Y-</div>
<div class='arrow' id='dir3'>X+</div>
<div class='arrow' id='dir4'>X-</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
</body>
</html>
In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker
Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.
I have one very difficult problem for me when finishing my HTML project. The problem is there's a blank space at the bottom of my HTML page. I've tried every way to remove it but then when I try it, the other element will be messy. How to remove the blank space while keeping the other element?
Here's my code:
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
img {
max-width: 100%;
height: auto;
}
ul, ol {
list-style: none;
}
h1, h2, h3 {
font-family: roboto light;
}
p {
font-family: open sans;
}
::-webkit-scrollbar {
width: 17px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(0,0,0.1);
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #3498db;
transition: all .4 linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #2980b9;
}
.container4 {
width: 100%;
height: 600px;
padding-bottom: -1000px;
}
.header4 {
text-align: center;
padding-top: 80px;
color: #424242;
}
/* Flipper */
/* entire container, keeps perspective */
.flip-container {
position: relative;
top: 20px;
left: 50px;
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/* End Flipper */
.tim1 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
margin-left: 25px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim1:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim2 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -489px;
left: 355px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim2:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim3 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -978px;
left: 685px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim3:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim4 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -1468px;
left: 1015px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim4:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
#-webkit-keyframes efekgambar {
0% {
-webkit-filter: contrast(400%) grayscale(0%);
}
100% {
-webkit-filter: contrast(100%) grayscale(100%);
}
}
#-webkit-keyframes terang {
0% {
-webkit-filter: brightness(100%);
}
100% {
-webkit-filter: brightness(125%);
}
}
.orang1, .orang2, .orang3, .orang4 {
animation-name: terang;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
}
.orang1back, .orang2back, .orang3back, .orang4back {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
animation-name: efekgambar;
animation-direction: alternate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.orang1:hover, .orang1back:hover, .orang2:hover, .orang2back:hover,
.orang3:hover, .orang3back:hover, .orang4:hover, .orang4back:hover {
border: 4px solid #EEEEEE;
}
.sosial-media ul {
display: flex;
float: left;
position: relative;
top: 30px;
left: 70px;
}
.sosial-media ul li {
list-style: none;
}
.sosial-media ul li a {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 0 2px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 4px solid #FAFAFA;
z-index: 1;
}
.fb {
background: #507cd3;
}
.tw {
background: #7fc9ff;
}
.gp {
background: #ff6251;
}
.ig {
background: #ff5b79;
}
.sosial-media ul li a .fa {
position: relative;
color: #FAFAFA;
transition: .5s;
z-index: 3;
}
.sosial-media ul li a:hover .fa {
transform: rotateY(360deg);
}
.sosial-media ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
.sosial-media ul li a:hover:before {
top: 0;
}
.sosial-media ul li:nth-child(1) a:before {
background: #3b5999;
}
.sosial-media ul li:nth-child(2) a:before {
background: #55acee;
}
.sosial-media ul li:nth-child(3) a:before {
background: #dd4b39;
}
.sosial-media ul li:nth-child(4) a:before {
background: #e4405f;
}
/* End Container4 */
/* Container5 */
.container5 {
width: 100%;
height: 450px;
position: relative;
top: -1400px;
margin-top: 30px;
background-image: url('1.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header5 {
color: #000;
position: absolute;
top: 30px;
left: 100px;
text-align: center;
padding-top: 40px;
}
.progress {
position: absolute;
top: 125px;
left: 800px;
width: 450px;
height: 100%;
color: #FAFAFA;
}
.bar {
height: 20px;
background: #FAFAFA;
color: #FAFAFA;
text-align: right;
width: 100%;
margin-bottom: 20px;
font-size: 10pt;
font-weight: bold;
}
.level {
height: 20px;
width: 80%;
}
#-webkit-keyframes eighty {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.eighty.start {
width: 0px;
background: #2EA2DB;
animation: eighty 2s ease-out forwards;
-webkit-animation: eighty 2s ease-out forwards;
}
#-webkit-keyframes eightyfive {
0% {
width: 0px;
}
100% {
width: 85%;
}
}
.eightyfive.start {
width: 0px;
background: #2EA2DB;
animation: eightyfive 2s ease-out forwards;
-webkit-animation: eightyfive 2s ease-out forwards;
}
#-webkit-keyframes seventy {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.seventy.start {
width: 0px;
background: #2EA2DB;
animation: seventy 2s ease-out forwards;
-webkit-animation: seventy 2s ease-out forwards;
}
#-webkit-keyframes ninety {
0% {
width: 0px;
}
100% {
width: 90%;
}
}
.ninety.start {
width: 0px;
background: #2EA2DB;
animation: ninety 2s ease-out forwards;
-webkit-animation: ninety 2s ease-out forwards;
}
/* End Container5 */
.container6 {
width: 100%;
height: 800px;
background-color: maroon;
}
<!-- Container4 -->
<div class="container4">
<a id="tim"></a>
<div class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header4">Tim</h1>
<hr width="80px" color="#F16051" style="position: absolute; left: 635px;">
<p align="center" style="margin-top: 10px; margin-bottom: 10px;"><font color="#212121">Dibawah ini adalah para ahli yang siap melayani Anda.</font></p>
</div>
<div class="tim1 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Anas</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">CEO & Founder</font></i></p>
<hr width="110px" height="2px" color="#424242" style="position: relative; top: 10px; left: 95px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penemu sekaligus <i>Leader</i> Jasa Pembuatan Blog Anas. Salah satu Blogger Indonesia dan sangat gemar menulis artikel.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim2 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang2" src="orang1.jpg">
</div>
<div class="back">
<img class="orang2back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Vickri Style</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Desainer</font></i></p>
<hr width="70px" height="2px" color="#424242" style="position: relative; top: 10px; left: 113px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Seorang desainer amatir yang mempunyai kemampuan hebat. Gemar mendekatkan diri dengan alam.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim3 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Adhitya Mahendra</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Penulis</font></i></p>
<hr width="60px" height="2px" color="#424242" style="position: relative; top: 10px; left: 118px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penulis artikel untuk Jasa Pembuatan Blog Anas. Paling tahu dan paling update seputar dunia teknologi.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim4 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Andhika Ramadhan</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Social Marketing</font></i></p>
<hr width="120px" height="2px" color="#424242" style="position: relative; top: 10px; left: 90px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Ahli dalam berbicara dan orang yang mempromosikan Jasa Pembuatan Blog Anas. Sangat gemar bermain game.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<!-- End Container4 -->
<!-- Container5 -->
<div class="container5">
<div class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header5">Skill Kami</h1>
<hr width="140px" color="#2EA2DB" style="position: relative; top: 110px; left: 100px;">
<p style="color: #FAFAFA; position: absolute; top: 130px; left: 100px; margin-right: 700px;">
Tim Jasa Pembuatan Blog Anas terdiri dari 4 ahli professional yang sudah sangat berpengalaman dalam bidang mereka masing-masing. Ketika 4 professional tersebut bersatu maka akan tercipta sebuah pernyataan yang bisa menyimpulkan skill yang dimiliki oleh Jasa Pembuatan Blog Anas. Dan disebelah kanan adalah skill yang kami miliki hingga saat ini dan akan terus berkembang.
</p>
<p style="color: #FAFAFA; position: absolute; top: 280px; left: 100px; margin-right: 700px;">
Dengan skill yang sudah lebih dari standar, dapat dijamin bahwa layanan yang tim Jasa Pembuatan Blog Anas akan memenuhi segala keinginan Anda.
</p>
</div>
<div class="progress wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<p>UX dan UI</p>
<div class="bar">
<div class="level eighty">
<p style="padding-right: 20px;">80%</p>
</div>
</div>
<p>Web Desain</p>
<div class="bar">
<div class="level eightyfive">
<p style="padding-right: 20px;">85%</p>
</div>
</div>
<p>Web Programming</p>
<div class="bar">
<div class="level seventy">
<p style="padding-right: 20px;">70%</p>
</div>
</div>
<p>Search Engine Optimization</p>
<div class="bar">
<div class="level ninety">
<p style="padding-right: 20px;">90%</p>
</div>
</div>
</div>
</div>
<!-- End Container5 -->
Change your starting tag with this
<body style="margin-buttom:-50;">
change -50 according to your need.
You have no margin in the html, body tag. Try to change css line with '*' to html, body and make it padding ang margin 0.
html, body { margin: 0; padding: 0; }
I am trying to toggle a class on the wrapper of a header (that you click to drop the body) and the body. The class changes the visibility, opacity, and max-height of the body to create the drop down effect.
This first item is dropped down by default. When another is open, all currently open items should close.
instead, when I click on a closed one it opens all of them but and closes the first one that is open by default.
here is my code:
$(".template_wrap").first().addClass("open");
$('.templates').find('.template_header').click(function(){
$(this).drop();
$('.template_header').not($(this)).drop();
});
$.fn.drop = function() {
$(this).parent(".template_wrap").toggleClass('open');
};
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center { zoom: 1; } /* IE6 */
*:first-child+html .page_center { zoom: 1; } /* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family:"FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
Also, Something strange happens to the h2s where they move around based on various clicks. Any help would be appreciated.
This should do the trick:
$(".template_wrap").first().addClass("open");
$('.template_header').click(function(){
$('.template_wrap').removeClass("open");
$(this).parent().addClass("open");
})
Fiddle: https://jsfiddle.net/26kasg4t/
The trick here is to make all accordions close and then afterwards make this the only one open:
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
Added a condition, should an accordion be open while it's clicked, it will just close.
SNIPPET
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center {
zoom: 1;
}
/* IE6 */
*:first-child+html .page_center {
zoom: 1;
}
/* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family: "FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>