I Have Section Overlapping Like This.
function forPageOne() {
document.getElementById('home').style.zIndex = 200;
document.getElementById('about').style.zIndex = -200;
}
function forPageTwo() {
document.getElementById('home').style.zIndex = -200;
document.getElementById('about').style.zIndex = 200;
}
<section
style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #144ddc;
left: 300px;
"
class="page1 home"
id="home"
></section>
<section
style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #dcc114;
left: 300px;
"
class="page2 about"
id="about"
></section>
<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>
If I Click One Button The Section Is Just Overlapping and I Do Not Need This Just Happen.I need to add the Animation part, one section into another section
And I have no idea how to do this.
If You Can Help with this my problem, I am so thankful About That.
Thank You..!
Example - https://animista.net/play/basic/flip-scale/flip-scale-up-ver
I need to add animation like this when my section is overlapping
You can add a class with the animations on click.
const page1 = document.getElementById('home');
const page2 = document.getElementById('about');
function forPageOne() {
page1.style.zIndex = 200;
page2.style.zIndex = -200;
page1.classList.add("animated");
page2.classList.remove("animated");
}
function forPageTwo() {
page1.style.zIndex = -200;
page2.style.zIndex = 200;
page1.classList.remove("animated");
page2.classList.add("animated");
}
#-webkit-keyframes flip-scale-up-ver {
0% {
-webkit-transform: scale(1) rotateY(0);
transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2.5) rotateY(90deg);
transform: scale(2.5) rotateY(90deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
transform: scale(1) rotateY(180deg);
}
}
#keyframes flip-scale-up-ver {
0% {
-webkit-transform: scale(1) rotateY(0);
transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2.5) rotateY(90deg);
transform: scale(2.5) rotateY(90deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
transform: scale(1) rotateY(180deg);
}
}
.animated {
-webkit-animation: flip-scale-up-ver 0.5s linear both;
animation: flip-scale-up-ver 0.5s linear both;
}
<section style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #144ddc;
left: 300px;
" class="page1 home" id="home"></section>
<section style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #dcc114;
left: 300px;
" class="page2 about" id="about"></section>
<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>
Related
I want to basically create a loading spinner for when my page is loading in javascript. Sometimes, the page takes long to load based on connection and I would just like to show a loading spinner while it loads.
I'm not sure where to start, I will show my main HTML/EJS code to show where I would need it. Thanks in advance for the help!
$(window).load(function() {
$('#loading').hide();
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color : #0e086b;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
you can handle it manually. whenever you want to show a spinner you can call
$('#loading').show();
and to hide it after the ajax call use this in the callback function
$('#loading').hide();
The following solution will hide the spinner after 3 seconds, when the page loaded
$(document).ready(function() {
setTimeout(function(){ $('#loading').hide(); }, 3000);
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
simply remove the anim !
on the real DOMContentLoaded event
window.addEventListener('DOMContentLoaded', (event) =>
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
);
sample code :
(simply click on snippet to stop the animation)
document.body.onclick = () => // simulate DOMContentLoaded event
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
#loading {
display : block;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : #040030e7;
z-index : 99;
}
#loading > div {
position : absolute;
top : calc(50% - 32px);
left : calc(50% - 32px);
width : 64px;
height : 64px;
border-radius : 50%;
perspective : 800px;
}
#loading > div > div {
position : absolute;
box-sizing : border-box;
width : 100%;
height : 100%;
border-radius : 50%;
left : 0%;
top : 0%;
border-bottom : 3px solid #f5f125;
}
#loading > div > div:nth-of-type(1) { animation : rotate-1 1s linear infinite; }
#loading > div > div:nth-of-type(2) { animation : rotate-2 1s linear infinite .3s; }
#loading > div > div:nth-of-type(3) { animation : rotate-3 1s linear infinite .6s; }
#keyframes rotate-1 {
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
#keyframes rotate-2 {
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
#keyframes rotate-3 {
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
<div id="loading"> <!-- loading annimation-->
<div> <div></div> <div></div> <div></div> </div>
</div>
I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>
I have a button here And a code for preloader:
Now using JavaScript, I don't want this to load when the page loaded first. Instead I want to load this preloader when I click on the submit button for about 2-3 seconds. So on my Javascript:
submitBtn.addEventListener('ciick', () => {
window.addEventListener('load', function() {
document.querySelector('body').classList.add("loaded")
});
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
background-image: url('https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/1_avatar-512.png');
display: block;
position: relative;
top: 50%;
left: 50%;
width: 120px;
height: 119px;
margin: -75px 0 0 -75px;
border-top-color: white;
border-radius: 100%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<button type="submit" id="submit-btn">Submit</button>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
However, this one did not work. Instead, the loader loads forever and never stops when I load the page. How can I fix this issue and only attain the loading state when the button was click?
When you click on the face of the cube, it turns this face to the user and the animation stops. When you click again, it smoothly returns to its original state. In Opera and Google Chrome , everything works fine. But in Mozilla and Edge there is a jump in the animation like on the gif below. What is the problem how to fix?
Here is the code for codpen and an example of correct work. https://codepen.io/RJDio/pen/rNVmaOo
Firefox
Edge
let open = false;
let changing = false;
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
side1.addEventListener('click', function() {
if (changing) {
return;
}
if (!open && !changing) {
open = true;
changing = true;
this.classList.add('open')
var compTransform = getComputedStyle(cube).getPropertyValue("transform");
cube.style.transform = compTransform;
cube.style.animation = 'none';
cube.classList.add("animateTop");
setTimeout(function() {
cube.style.removeProperty('transform');
}, 50);
setTimeout(function() {
changing = false;
}, 1640);
} else if (open && !changing) {
open = false;
changing = true;
setTimeout(function() {
cube.classList.remove("animateTop");
changing = false;
}, 4999);
cube.style.removeProperty('animation');
}
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
transition: 1.64s;
}
.closeLink {
color: #f7f7f7;
background-color: #333;
font-size: 20px;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube">
<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>
I need to make sure that when you click on one of the faces, the cube rotates smoothly with this face and the animation stops. And when you close the face, the size gradually decreased and the animation continued. Maybe someone did something similar and share an example?
Now done only for the TOP. But how to make a smooth animation I can’t imagine.
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
let closeBtn = document.querySelector('.closeLink');
cube.addEventListener('mouseover', function(){
cube.style.animationPlayState = "paused";
});
cube.addEventListener('mouseout', function(){
cube.style.animationPlayState = "running";
});
side1.addEventListener('click', function(){
cube.classList.remove("animatCube");
cube.classList.add("animateTop");
});
closeBtn.addEventListener('click', function(){
cube.classList.remove("animateTop");
cube.classList.add("animatCube");
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube">
<div class="slide" id="side1"><a class="closeLink" href="">x</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>
When clicking on a face, you can use getComputedStyle(cube).getPropertyValue("transform") to get the current state of transform when clicking on the face.
Then, you appy it in transform property to set that state, remove the animation, add the class to show the face (animateTop) and finally remove the inline transform you just set for the class to take effect.
When going back to normal, you remove inline stopped animation, some the cube animation will happen. After 5 seconds, the animateTop will be removed, then only the animation will continue to run.
I also created two variables for better control: open to check when the face is open or closed. And changing to check when it is transitioning to open or closed.
let open = false;
let changing = false;
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
side1.addEventListener('click', function() {
if (changing) {
return;
}
if (!open && !changing) {
open = true;
changing = true;
cube.classList.add('open')
var compTransform = getComputedStyle(cube).getPropertyValue("transform");
cube.style.transform = compTransform;
cube.style.animation = 'none';
cube.classList.add("animateTop");
setTimeout(function() {
cube.classList.remove('closed')
cube.style.removeProperty('transform');
}, 50);
setTimeout(function() {
changing = false;
}, 1640);
} else if (open && !changing) {
open = false;
changing = true;
cube.classList.remove('open')
setTimeout(function() {
cube.classList.remove("animateTop");
cube.classList.add('closed')
changing = false;
}, 4999);
cube.style.removeProperty('animation');
}
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
transition: 1.64s;
}
#D3Cube.closed:hover {
animation-play-state: paused;
transition: animation 0s;
}
.closeLink {
color: #f7f7f7;
background-color: #333;
font-size: 20px;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube closed">
<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>