Develop Reference

Spacing between navbar and first section

When I start to scroll down, the section home moves down and in between is a weird space which I don't know how to get rid of.
Any tips on how to fix this problem?
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
background-color: white;
width: 1280px;
height: 4000px;
margin-left: auto;
margin-right: auto;
}
body {
background-color: grey;
margin: 0px;
}
/* Navigation */
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 32px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 18px;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 18px;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* fixed nav Ende */
#spacer {
height: 128px;
border-bottom: 4px solid;
}
#Home {
height: 1000px;
border-style: solid;
}
#UberUns {
height: 1000px;
border-style: solid;
}
#Aktionen {
height: 1000px;
border-style: solid;
}
#Terminvereinbarung {
height: 1000px;
border-style: solid;
}
#Infos {
height: 1000px;
border-style: solid;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<div id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<ul>
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</div>
<div id="spacer"></div>
<section id="Home" class="section">
<p>Home</p>
</section>
<section id="UberUns" class="section">
<p>section 2</p>
</section>
<section id="Aktionen" class="section">
<p>section 3</p>
</section>
<section id="Terminvereinbarung" class="section">
<p>section 4</p>
</section>
<section id="Infos" class="section">
<p>section 5</p>
</section>
</div>
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>

Something is creating a margin-top when you scroll down
try add:
#Home {
margin-top: 0 !important;
}

Looking at your code I found a couple of issues.
if(st > navTop ){
$('#navbar').addClass('fix');
$('.section:eq(0)').css({'margin-top':navHeight});//fix scrolling issue due to the fix nav bar
}
st is defined to be the current scrolling position of your browser.
This is in your scrolling code, meaning as soon as st is bigger than navTop, it will set margin-top to navHeight. But the issue is that a little bit up you defined navTop as followed: var navTop = $('#navbar').offset().top;
navTop is always 0. Meaning that whenever you scroll any amount it will add the margin-top. I'd start there with finding your problem.
Andrea's solution is but a solution for a problem that you introduced yourself.

try add:
#Home {
margin-top: 0 !important;
}

Only one out of five divs transitions correctly

After clicking the button the elements should move to their second positions. It only seems to work with the last element where I used !important which I don't want to use. Here is my code:
let ruch = document.querySelectorAll('.menu');
let myArray = Array.from(ruch);
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
myArray.forEach(function (item) {
if (item == myArray[0]) {
item.classList.add('run1');
} else if (item == myArray [4]) {
item.classList.add('run2');
} else {
item.classList.add('run');
}
});
});
body {
background-color: #302e2e;
font-size:22px;
}
#btn{
position: absolute;
left: 914px;
top: 180px;
}
.wrapper{
position: relative;
width:600px;
margin: 0 auto;
}
.container{
position:absolute;
top:250px;
width:0px;
}
.menu{
padding:5px;
border:1px solid #323232;
width:100px;
height:100px;
background:#46f4a0;
border-radius:20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2){
left:105px;
}
.menu:nth-child(3){
left:210px;
}
.menu:nth-child(4){
left:315px;
}
.menu:nth-child(5){
left:420px;
}
.run{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
top:110px;
}
.run1{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:-110px;
}
.run2{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:530px!important;
}
<button id="btn">
Kliknij
</button>
<div class="wrapper">
<div class="container ">
<div class="menu ">About</div>
<div class="menu ">My Projets</div>
<div class="menu ">Some stuff</div>
<div class="menu ">Werid shits</div>
<div class="menu ">Contact</div>
</div>
</div>
Thanks for your help

Like this? (complementary CodePen)
let menuItems = Array.from(document.querySelectorAll(".menu"));
document.getElementById("btn").addEventListener("click", function() {
menuItems[0].classList.add("run1");
menuItems[4].classList.add("run2");
menuItems.slice(1, 4).forEach(function(item) {
item.classList.add("run");
});
});
body {
background-color: #302e2e;
font-size: 22px;
}
#btn {
position: absolute;
left: 914px;
top: 180px;
}
.wrapper {
position: relative;
width: 600px;
margin: 0 auto;
}
.container {
position: absolute;
top: 250px;
width: 0px;
}
.menu {
padding: 5px;
border: 1px solid #323232;
width: 100px;
height: 100px;
background: #46f4a0;
border-radius: 20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2) {
left: 105px;
}
.menu:nth-child(3) {
left: 210px;
}
.menu:nth-child(4) {
left: 315px;
}
.menu:nth-child(5) {
left: 420px;
}
.menu.run {
opacity: 0;
transition: 3s ease-in-out;
transform: translateY(110px);
}
.menu.run1 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(-110px);
}
.menu.run2 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(110px);
}
<button id="btn">Kliknij</button>
<div class="wrapper">
<div class="container">
<div class="menu">About</div>
<div class="menu">My Projets</div>
<div class="menu">Some stuff</div>
<div class="menu">Werid shits</div>
<div class="menu">Contact</div>
</div>
</div>
Please also look into your CSS again. You should avoid working with absolute positioning and pixel values only since it will look different on every device.

U need to move transition to '.menu' and it should look like that:transition:3s transform ease-in-out;. And in '.run', '.run1', '.run2' when left replace with: transform: translateX(/*value*/px);. And when top replace with: transform: translateY(/*value*/px);.

SVG animation doesnt work on mozilla, but works on chrome and safari

Title explains itself.
I don't know what to do anymore. On my PC, it even blocks my pc when i open the URL, or even when i open file locally.
It is a heavy animation, but still, i think mozilla should open it.
I tried to use 'px' on stroke-width attribute, but still it didnt work.
any idea?
>website url here<
var all = document.querySelectorAll('.circle');
for (var i = 0; i < all.length; i++) {
var c = all[i].getAttribute("data-color");
var s = parseInt(all[i].getAttribute("data-step"));
var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.03" /></svg>\')';
var end = 180 / s;
for (var j = 1; j < end; j++) {
b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.03" /></svg>\')';
}
all[i].style.setProperty("--b", b);
all[i].querySelector('span').style.setProperty("background", c);}
$(document).ready(function(){
$("span").css("background-color","white");
$( document ).trigger( "click" );
});
<style>
.food{
color:#0073b3!important;
}
.food:hover{
background-color:#0073b3!important;
color:white!important;
transition: all .5s;
}
.line{
color:#FBAF17!important;
background-color:#white!important;
}
.line:hover{
background-color:#FBAF17!important;
color:white!important;
transition: all .5s;
}
.music{
color:#F15E42!important;
background-color:#white!important;
}
.music:hover{
background-color:#F15E42 !important;
color:white!important;
transition: all .5s;
}
.air{
color:#ED1C24!important;
background-color:#white!important;
}
.air:hover{
background-color:#ED1C24 !important;
color:white!important;
transition: all .5s;
}
.story{
color:#3EA472!important;
background-color:#white!important;
}
.story:hover{
background-color:#3EA472 !important;
color:white!important;
transition: all .5s;
}
#font-face {
font-family: 'MyWebFont';
src: url('FranklinGothicLT-BookCnd.eot'); /* IE9 Compat Modes */
src: url('FranklinGothicLT-BookCnd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FranklinGothicLT-BookCnd.woff2') format('woff2'), /* Super Modern Browsers */
url('FranklinGothicLT-BookCnd.woff') format('woff'), /* Pretty Modern Browsers */
url('FranklinGothicLT-BookCnd.ttf') format('truetype') /* Safari, Android, iOS */
}
html, body, span, p {
font-family:'MyWebFont'
};
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: right;
}
.footer a{
float:right;
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle-food span{
width:220px!important;
height:220px!important;
display:block;
margin:0px auto;
position:absolute;
left:-60%;top:-60%;
}
.circle-story span{
width:350px!important;
height:350px!important;
display:block;
margin:0px auto;
position:absolute;
left:-126%;top:-126%;
}
.circle-line span{
width:300px!important;
height:300px!important;
display:block;
margin:0px auto;
position:absolute;
left:-105px;top:-105px;
}
.circle-air span{
width:125px!important;
height:125px!important;
top: -15px;
position: absolute;
left: -15px;
}
.circle-music span{
width:225px!important;
height:225px!important;
top: -65px;
position: absolute;
left: -65px;
}
.circle span {
text-align:center;
position:relative;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
color:#fff;
}
.circle:after {
content: "";
z-index: -1;
position: absolute;
top: -5000%;
left: -5000%;
right: -5000%;
bottom: -5000%;
background-image: var(--b);
background-size: 100% 100%;
animation: animate 90s infinite linear;
opacity: 0.8;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
{margin:0;
background-color:#FFFCE4;
}
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
top: 0;
width: 100%;
}
.navbar .wrapp {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-right:100px;
}
.navbar .wrapp a{
text-decoration: none;
color:black;
margin-left:10px;
font-size:20px;
font-weight:700;
}
.navbarb {
overflow: hidden;
background-color: transparent;
position: fixed;
bottom: 0;
width: 100%;
}
.navbarb .wrapp {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-right:100px;
}
.navbarb .wrapp a{
text-decoration: none;
color:black;
margin-left:10px;
font-size:20px;
font-weight:700;
}
.footer {
padding: 20px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="navbar">
<div class="wrapp" style="float:left !important;margin-left:50px;" >
<img style="height:20px;width:auto;" src="assets/images/png-03.png">
</div>
<div class="wrapp">
CONTACT
</div>
</div>
<div class="circle circle-food" style="left:30%;top:25%;" data-color="#0073B3" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-color="#FBAF17" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>
<div class="circle circle-music" style="right:15%;top:20%;" data-color="#F15E42" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>
<div class="circle circle-air" style="right:15%;bottom:15%;" data-color="#ED1C24" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>
<div class="circle circle-story" style="right:40%;bottom:40%" data-color="#3EA472" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>
<div class="navbarb">
<div class="wrapp" style="margin-right:100px!important;">
<img style="height:20px;width:auto;" src="assets/images/png-02.png">
<img style="height:20px;width:auto;" src="assets/images/png-04.png">
</div>
</div>
Code snippet available now, go fullpage to see it clearly.

I've been cleaning up your code, geting rid of all the data urls. Instead, the SVG content is positioned inline and appended dynamically. The sizing is set in such a way that it always covers the whole screen, but does not need huge offscreen areas. Color definitions have been moved to CSS, the data-step attribute is still there. On my Firefox installation, the animation is far from smooth, but it runs and uses no more than 50MB.
window.onload = function () {
document.querySelectorAll('.circle').forEach(function (circle, i) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', "0 0 200 200");
svg.setAttribute('preserveAspectRatio', "xMidYMid slice");
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.id = 'line' + i;
line.setAttribute('x1', "100");
line.setAttribute('x2', "100");
line.setAttribute('y1', "-300");
line.setAttribute('y2', "300");
svg.append(line);
var s = parseInt(circle.getAttribute("data-step"));
var end = 180 / s;
for (var j = 1; j < end; j++) {
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#line' + i);
use.setAttribute('transform', 'rotate(' + s * j + ', 100, 100)');
svg.append(use);
}
circle.append(svg);
});
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle span {
text-align:center;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
background-color:white;
margin:0px auto;
position:absolute;
}
.circle span:hover {
color:white;
transition: all .5s;
}
.food{
color:#0073b3;
}
.food:hover{
background-color:#0073b3;
}
.line{
color:#FBAF17;
}
.line:hover{
background-color:#FBAF17;
}
.music{
color:#F15E42;
}
.music:hover{
background-color:#F15E42;
}
.air{
color:#ED1C24;
}
.air:hover{
background-color:#ED1C24;
}
.story{
color:#3EA472;
}
.story:hover{
background-color:#3EA472;
}
.circle-food span{
width:220px;
height:220px;
left:-60%;
top:-60%;
}
.circle-story span{
width:350px;
height:350px;
left:-126%;
top:-126%;
}
.circle-line span{
width:300px;
height:300px;
left:-105px;
top:-105px;
}
.circle-air span{
width:125px;
height:125px;
top: -15px;
left: -15px;
}
.circle-music span{
width:225px;
height:225px;
top: -65px;
left: -65px;
}
svg {
opacity: 0.8;
position: absolute;
z-index: -1;
left:calc(50% - 100vw);
top:calc(50% - 100vh);
width: 200vw;
height: 200vh;
animation: animate 90s infinite linear;
transform-origin: center;
}
.circle-food svg {
stroke: #0073B3;
}
.circle-line svg {
stroke: #FBAF17;
}
.circle-music svg {
stroke: #F15E42;
}
.circle-air svg {
stroke: #ED1C24;
}
.circle-story svg {
stroke: #3EA472;
}
line {
stroke-width: 0.05;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="circle circle-food" style="left:30%;top:25%;" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>
<div class="circle circle-music" style="right:15%;top:20%;" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>
<div class="circle circle-air" style="right:15%;bottom:15%;" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>
<div class="circle circle-story" style="right:40%;bottom:40%" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>

How do I make this animate properly?

I am attempted to make the red box expand to 1000px and fill in green side after it vanishes. I want to make it animate smoothly instead of suddenly filling in when I click the image with the words "Ethan" on it. I also need to do this on the other side, but I don't care if the image suddenly moves.
My HTML template is
<div class="container">
<div id="ethan">
<div id="eitem1">
<img id="item2o5" onclick="ethanclick()" src="http://i.imgur.com/VrCjYJv.png">
</div>
</div>
<div id="avery">
<div id="aitem1">
<img id="item2o5" onclick="averyclick()" src="http://i.imgur.com/ODB7VQP.png">
</div>
</div>
</div>
CSS code is below
body {
background-position: fixed;
}
.container {
position: relative;
text-align: center;
margin: 0 auto;
width: 1000px;
height: 1000px;
background-image: url(http://i.imgur.com/ikSWEO3.gif);
border: dotted;
overflow-x: hidden;
overflow-y: hidden;
}
#eitem1 {
position: absolute;
padding-top: 10px;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 27px;
background-color: rgba(255,0,0,0);
transition: background-color 1s;
text-align: left;
}
#eitem1:hover {
background-color: rgba(255,0,0,0.3);
}
#aitem1 {
position: absolute;
padding-top: 10px;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 10px;
background-color: rgba(0,0,0,0);
transition: background-color 1s;
}
#aitem1:hover {
background-color: rgba(0,255,0,0.3);
}
#item2o5 {
width: 300px;
}
#ethan {
width: 500px;
position: absolute;
height: 1000px;
z-index: 1;
background-color: rgba(255,0,0,0.3);
opacity: 1;
}
#avery {
width: 500px;
height: 1000px;
left: 500px;
position: absolute;
z-index: 1;
opacity: 1;
background-color: rgba(0,255,0,0.3);
}
#keyframes eslide {
0% {
width: 500px;
}
100% {
width: 1000px;
}
}
.ethanslide {
animation-name: eslide;
animation-duration: 3s;
}
Javascript code is
function ethanclick() {
var ethan = document.getElementById("ethan");
ethan.style.left = "0px";
ethan.className = "ethanslide";
document.getElementById("avery").style.display = "none";
}
function averyclick() {
var avery = document.getElementById("avery");
avery.style.width = "1000px";
avery.style.left = "0px";
document.getElementById("ethan").style.display = "none";
}

Update your ethanclick() function as
function ethanclick() {
var ethan = document.getElementById("ethan");
var avery = document.getElementById("avery");
ethan.className = "ethanslide";
//Added slide Out Animation In CSS3
avery.className = "ethanslideout";
//Once the animation is done applying properties permanently
avery.addEventListener('webkitAnimationEnd', function(event) {
avery.style.display = 'none';
ethan.style.width = "1000px";
}, false);
}
In your CSS add these lines
#keyframes slideOut {
0% {
left: 500px;
}
100% {
left: 1000px;
}
}
.ethanslideout {
animation-name: slideOut;
animation-duration: 3s;
}
Now click on Ethan you will get your desired animation
Click here to see in action

simple transition, and changing the container classname
function ethanclick() {
container.className = 'container ethanslide';
}
function averyclick() {
container.className = 'container averyslide';
}
fiddle code

HTML
<!DOCTYPE html>
<html style=" width=100%; height=1280px">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body>
<div class="container">
<div id="ethan">
<div id="eitem1"> <img id="item2o5" src="http://i.imgur.com/VrCjYJv.png"
onclick="ethanclick()">
</div>
</div>
<div id="avery">
<div id="aitem1"> <img id="item2o5" src="http://i.imgur.com/ODB7VQP.png"
onclick="averyclick()">
</div>
</div>
</div>
<div> </div>
</body>
</html>
CSS
<style>
body {
background-position:fixed;
}
.container {
position:relative;
text-align:center;
margin: 0 auto;
width:1000px;
height:1000px;
background-image:url("http://i.imgur.com/ikSWEO3.gif");
border:dotted;
overflow-x:hidden;
overflow-y:hidden;
}
#eitem1 {
position:absolute;
padding-top:10px;
padding-right:100px;
padding-left:100px;
padding-bottom:27px;
background-color:rgba(255, 0, 0, 0);
transition: background-color 1s;
text-align:left;
}
#eitem1:hover {
background-color:rgba(255, 0, 0, 0.3);
}
#aitem1 {
position:absolute;
padding-top:10px;
padding-right:100px;
padding-left:100px;
padding-bottom:10px;
background-color:rgba(0, 0, 0, 0);
transition: background-color 1s;
}
#aitem1:hover {
background-color:rgba(0, 255, 0, 0.3);
}
#item2o5 {
width:300px;
}
#ethan {
width:500px;
position:absolute;
height:1000px;
z-index:1;
background-color:rgba(255, 0, 0, 0.3);
opacity:1;
}
#avery {
width:500px;
height:1000px;
left:500px;
position:absolute;
z-index:1;
opacity:1;
background-color:rgba(0, 255, 0, 0.3)
}
#keyframes eslide {
0% {width:500px;}
100% {width:1000px;}
}
#keyframes aslide {
0% {left:50%}
100% {
left:100%;
display:none;}
}
.ethanslide {
animation-name:eslide;
animation-duration:3s;
}
.averyslide {
animation-name:aslide;
animation-duration:3s;
}
</style>
JAVASCRIPT
<script>
function ethanclick() {
var ethan = document.getElementById("ethan");
var avery = document.getElementById("avery");
ethan.style.left = "0px";
avery.style.right = "0px";
avery.className = "averyslide";
setTimeout(function(){
avery.style.display = "none";
ethan.className = "ethanslide";
ethan.style.width = "100%";
}, 2900);
}
function averyclick() {
var avery = document.getElementById("avery");
avery.style.width="1000px";
avery.style.left="0px";
document.getElementById("ethan").style.display="none";
}
</script>

Content of div should be at their initial position after mouse remove

Here it is a code pen URL. I want content at the initial position after mouse remove from <div> Rather than one single <div> I have 6 different <div> 3 in one row. The transform should be same on every <div>.

Remove Style Attr
$(".card").on("mouseleave",function(e) {
card.removeAttr('style')
});
LINK

Tried an animated reverting on mouse leave.
http://codepen.io/anon/pen/raQWLO?editors=110
// why it doesn't work on firefox?
var card = $(".card");
$(".card").on("mousemove",function(e) {
var ax = -($(window).innerWidth()/2- e.pageX)/20;
var ay = ($(window).innerHeight()/2- e.pageY)/10;
card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
});
$(".card").on("mouseleave",function(e) {
card.attr("style", "transform: rotateY("+0+"deg) rotateX("+0+"deg);-webkit-transform: rotateY("+0+"deg) rotateX("+0+"deg);-moz-transform: rotateY("+0+"deg) rotateX("+0+"deg);-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;");
});
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body{
background: #edf2f4;
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
height: 100vh;
font-family: "Playfair Display",georgia,serif;
}
.card{
//pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
border-radius: 5px;
width: 400px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
box-shadow: 0 0 5px rgba(0,0,0,.1);
//position: relative;
&:after{
content:" ";
position: absolute;
width: 100%;
height: 10px;
border-radius: 50%;
left:0;
bottom:-50px;
box-shadow: 0 30px 20px rgba(0,0,0,.3);
}
.card-content{
margin: auto;
text-align:center;
transform-style: preserve-3d;
}
h1{
transform: translateZ(100px);
}
p{
transform: translateZ(50px);
display: block;
&.related{
transform: translateZ(80px);
font-style: italic;
}
}
a{
color:#69c6b8;
pointer-events: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<div class="card-content">
<h1>Just hover around</h1>
<p><small>by Ariona, Rian</small></p>
<p class="related"><strong>See also: </strong>Animated highlight text</p>
</div>
</div>