Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
179
rated 0 times [  180] [ 1]  / answers: 1 / hits: 18696  / 11 Years ago, fri, february 14, 2014, 12:00:00

I'm trying to create a replica of this site:



http://liko0312.wix.com/wildfireimages



I've made it to slide in and out from the same direction using CSS and placing the div outside with 100% and then bringing it in with 0, very much a toggle effect.



However, I'm trying to make the pages slide in and out just like in the model site but CSS does not allow me to. I have good skills with HTML/CSS but am low on Javascript. So far I found this fiddle, but it's a toggle animation while I need it to slide in from the right and slide out to the left and after it has to reset. Also, the animation of the current div sliding out and the next div sliding in have to be in the same time.



Here is Fiddle with code as requested





.panel{
width:0px;
height:0px;
overflow: hidden;
position:relative;
left:100%;
background: none;
z-index: 2;
-moz-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
-webkit-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
-o-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
transition: all .8s ease;
transition-delay:0s;
margin:0px;

}

.panel:target{
width:100%;
height:auto;
margin:0px 0 0;
padding:0;
background-color: transparent;
position:relative;
left:0;
z-index:3;

}

<div id=overall-wrap>
<!-- Header with Navigation -->

<div id=header>
<a href=#home><img class=header src=images/logo.png width=133 height=86 alt=Wildfire Images></a>
<nav>
<ul id=navigation>
<li><a class=scroll href=#home>Home</a></li>
<li><a class=scroll href=#about>About Us</a>
<ul>
<li><a class=scroll href=#contact>Contact Us</a></li>
</ul>
</li>
</ul>
</nav>
<div class=clearfix></div>
</div>


<div class=clearfix></div>



<div id=home class=panel></div>

<!-- About Us -->

<div id=about class=panel>
<div class=content>
<div class=bg-about effect2>
<div class=about-wrapper>
<div class=about-text>
<h2> About Us</h2>
<p>Wildfire Images is a Sydney based boutique Portrait Photography Studio dedicated to candidly capturing all that is beautiful, fun and elegant about you and your loved ones.</p>
<p>At Wildfire Images, we tailor every shoot to you, your trade mark smile, your rapturous laugh, your devotion to those you love, the cheeky, the serious and all those gorgeous things in between that will always be unmistakably you.</p>
<p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
<p class=strong>Contact us today on 9150 6275.</p>
</div>
<div class=about-image><img src=images/aboutme.jpg width=200 height=300 alt=WildFire Studios></div>
</div>
</div>
<!-- ... -->
</div>
<div class=clearfix></div>
</div>

<!-- /About Us -->

<!-- Contact -->

<div id=contact class=panel>
<div class=content>
<div class=bg-contact effect2>
<img src=images/contact-image.jpg width=900 height=419 alt=Contact Wildfire/>

<div id=form-wrapper>
<div id=form-outer>
<div id=text-wrap>
<div id=contact-left>
<h2>Contact</h2>
<div id=phone>
<h3>Phone</h3><p>9150 6275</p></div>
<div id=email>
<h3>Email</h3><p>[email protected]<p></div>
</div>
<div id=contact-right><h3>Address</h3><p>Studio 18,</p><p>442-444 King Georges Rd</p><p>BEVERLY HILLS NSW 2209</p></div>
</div>
<div class=clear></div>
<div id=form-inner>
<form name=contact action=contact.php method=post onBlur=MM_validateForm('name','','R','email','','RisEmail','subject','','R','message','','R');return document.MM_returnValue>
<input name=name type=text class=field id=name placeholder=Name/>
<input name=email type=email class=field id=email placeholder=Email/>
<input name=subject type=text class=field id=subject placeholder=Subject />
<textarea name=message class=field_textarea id=message placeholder=Message></textarea>
<input type=submit value=Send name=submit class=submit/>
</form>
</div>
</div>
</div>

</div>
<!-- ... -->
</div>
</div>
<!-- /Contact -->

<!-- Portraits -->
<div id=portraits class=panel>
<div class=content>
<div class=gallery-big effect2>
<div id=gallery-big-text-wrap>
<h2>Portraits</h2>
<p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
<p>Contact us today on 9150 6275.</p>
</div>
<!--k gallery start-->
<img src=images/baby-06-portrait-gallery.jpg width=798 height=531>
<img src=k/ki_galleries/all-about-me/AEP_0486.jpg width=798 height=1200>
<img src=k/ki_galleries/all-about-me/AEP_0653.jpg width=798 height=1200>
<img src=k/ki_galleries/all-about-me/DSC_0548.jpg width=799 height=1200>
<img src=k/ki_galleries/all-about-me/DSC_2652-edit.jpg width=799 height=1200>
<img src=images/family.jpg width=798 height=532>
<img src=k/ki_galleries/all-about-me/DSC_4052.jpg width=799 height=1200>

</div>
</div>
</div>
<!-- /Portraits -->
</div>





Also, the new site can be seen at wixwebsite.seobrasov.com



Please note that the slide in and out should work for more than two divs and be able to jump from tiv 1 to div 3 without showing div 2.


More From » html

 Answers
27

Check this update: JS Fiddle updated! (http://jsfiddle.net/jPneT/2705/)




  • Uses 3 views

  • you have a default view

  • Easy methods to navigate.



Js file:



$(document).ready(function(){
var currentPageI = -1;
var pages = [
$('div.l1'),
$('div.l2'),
$('div.l3'),
];
var viewsWidth = 200;
var showPage = function(index){
if(index === currentPageI){return;}
var currentPage = pages[currentPageI];
if(currentPage){
currentPage.stop().animate({left: -viewsWidth})
}
var nextPage = pages[index];
nextPage
.stop()
.css({left: viewsWidth})
.animate({left: 0})
currentPageI = index;
}
// show default page
showPage(0);
$('a.l1').click(showPage.bind(null, 0));
$('a.l2').click(showPage.bind(null, 1));
$('a.l3').click(showPage.bind(null, 2));

$('.left-right').mouseover(function(){
$('.slider').stop().animate({
right: 0
}, 400);
}).mouseout(function(){
$('.slider').stop().animate({
right: '-200px'
}, 400);
});

});


HTML:



<a class=l1>1</a><a class=l2>2</a><a class=l3>3</a>

<div class=left-right>
<div class=l1>L1 view</div>
<div class=l2>L2 view</div>
<div class=l3>L3 view</div>
</div>


CSS:



.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
clear: left;
}
div.l1,div.l2,div.l3 {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
color:#fff;
}
a.l1,a.l2,a.l3 {
display: block;
width: 50px;
height: 50px;
float: left;
cursor: pointer;
opacity: 0.6;
}
a:hover {
opacity: 1
}

.l1{
color: red;
background-color:red;
}
.l2{
color: green;
background-color:green;
}
.l3{
color: blue;
background-color:blue;
}

[#72529] Wednesday, February 12, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
martin

Total Points: 405
Total Questions: 93
Total Answers: 93

Location: Mexico
Member since Sun, Jul 25, 2021
3 Years ago
martin questions
Wed, Jun 16, 21, 00:00, 3 Years ago
Mon, May 24, 21, 00:00, 3 Years ago
Mon, Jan 11, 21, 00:00, 3 Years ago
;