There are many ways to rotate a div or a particular block. We can use animate to move a block from one position to another.
Here is a simple way to change the position of a simple block.
HTML:-
<div id="rotator">
<div id="block-1" class="active">
<h2>Subtitle #1</h1>
<div>
<h1>WE DO COOL STUFF</h1>
<img src="spacefrog.jpg" alt="space frog">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="block-2" class="block2_content">
<h2>Subtitle #2</h2>
<div>
<h1>FREQUENTLY ASKED QUESTIONS</h1>
<img src="goblins.jpg" alt="goblins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="block-3" class="block3_content">
<h2>Subtitle #3</h2>
<div>
<h1>WHY WE ARE BUG FREE ?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
CSS:-
#rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }
#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }
#rotator > div {
position: absolute;
overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .block2_content { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .block3_content { top: 170px; left: 620px; height: 130px; width: 320px; }
#rotator h2 {
text-align: center;
line-height: 130px;
}
#rotator .active h2 {
display: none;
}
JAVASCRIPT:-
function rotate() {
if (current == 1) {
$("#block-1").removeClass().addClass("active");
$("#block-2").removeClass().addClass("block2_content");
$("#block-3").removeClass().addClass("block3_content");
} else if (current == 2) {
$("#block-1").removeClass().addClass("block3_content");
$("#block-2").removeClass().addClass("active");
$("#block-3").removeClass().addClass("block2_content");
} else {
$("#block-1").removeClass().addClass("block2_content");
$("#block-2").removeClass().addClass("block3_content");
$("#block-3").removeClass().addClass("active");
}
}
$("#rotator div").click(function() {
current = this.id.substr(6);
rotate();
});
https://jsfiddle.net/cgx6o724/1/
0 Comment(s)