Home/ Questions/Q 8787013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:46:43+00:00

I have two lots of the same divs on seperate pages – Is there

  • 0

I have two lots of the same divs on seperate pages – Is there a way to animate them to from the start position landing page to the postion on the 2nd page and open the first content div (blue) so basically animate left to make a vertical line instead of the cube.

so from here http://www.crazyedits.co.uk/

to here http://www.crazyedits.co.uk/home.php# and open the first coloured div?

I am just starting to learn so try to keep it simple peeps (sorry if my question is obvious) – but i have tried for 5 hours to find a solution and nothing seems to work.

landing page button

<div class="button1">
    <div id="icon"><img src="Images/home.png" width="200" height="160" /></div>
    <div id="title">HOME</div>
</div>

content page button

<div>   <div class="content_button1">
    <div ="icon"><a href="#home_page" ><img src="Images/home.png" width="200" height="160" style="border:none;" /></a></div>
    <div id="title"><li><a href="#home_page" >HOME</a></li></div>
    <div id="home_page" class="contain"></div> </div>
</div>

CSS

I think the issue i have is i have had to set 2 different css sets for the buttons on each page – one aligning them in the center and one aligning them left. So if there is a way that i could use the same class and still get the 4 in the square as they are and something to do with an absolute position then i would be a step closer to making it work

/******page buttons*******/

.content_button1{width:199px; height:199px; margin:0px 0px 19px 0px; background-color:#09C;} 
.content_button2{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#C00;} 
.content_button3{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#F60;} 
.content_button4{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#093;} 

/*****landing page buttons*****/

.button1{width:199px; height:199px; float:left; margin:20px ; background-color:#09C;} 
.button2{width:199px; height:199px; float:left; margin:20px ; background-color:#C00;} 
.button3{width:199px; height:199px; float:left; margin:20px ; background-color:#F60;} 
.button4{width:199px; height:199px; float:left; margin:20px ; background-color:#093;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t really make an animation between 2 pages wecause the page 2 is loaded in the browser and animation is done via JS. The best solution is to make your stuff in a single page and play with absolute position.

    I write a piece of code that could be a little complicated, but I commented a lot, in order to explain you all the stuff.

    The four square are first place at the center of the page and re positionned when you resize the window.

    Then, when you click on one of four square, an animation is launched and the corresponding content appear.

    After that, clicking on another square make appear the corresponding content.

    Good luck !

    http://fiddle.jshell.net/4SZXT/11/ <– The code is here

    • 0