0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

Animate effect on template pages

Last Post
Search Topic

  • Animate effect on template pages

    Posted 11 years 2 weeks ago
    • Hi all,

      With RocketTheme's permission, I'd like to re-create the slider animation that is used here on the Anacron template page.

      This image is hidden for guests.
      Please log in or register to see it.


      When the page is loaded, the two browser windows and iPad slide into view. I know how to re-create the browser windows and iPad but don't completely understand how to animate. My guess is that translateX() and translate3d() were used but how is everything timed?

      I put this code into rt_anacron-custom.css to re-create the browser windows and iPad but of course they are static and lacking the animate bit:
      /** Showcase **/
.rt-details .showcase {
position: relative;
height: 510px;
margin-top: 25px;
}
.rt-details .showcase .front-frame {
background-size: 100%;
width: 420px;
height: 539px;
background: url('/images/slideshow/showcase-front-frame.png') 0 0 no-repeat;
position: absolute;
top: 10px;
right: -70px;
}
.rt-details .showcase .front-frame .inner {
overflow: hidden;
border-radius: 3px;
top: 70px;
left: 65px;
width: 273px;
height: 363px;
}
.rt-details .showcase .inner {
overflow: hidden;
position: relative;
}
.rt-details .showcase .center-frame {
background: url('/images/slideshow/showcase-center-frame.png') 0 0 no-repeat;
background-size: 100%;
width: 963px;
height: 567px;
position: absolute;
top: 0;
left: 50%;
margin-left: -481px;
}
.rt-details .showcase .center-frame .inner {
width: 620px;
height: 407px;
top: 59px;
left: 174px;
border-radius: 0 0 5px 5px;
}
.rt-details .showcase .inner {
overflow: hidden;
position: relative;
}
.rt-details .showcase .back-frame {
background: url('/images/slideshow/showcase-back-frame.png') 0 0 no-repeat;
background-size: 100%;
width: 777px;
height: 500px;
position: absolute;
top: 85px;
left: -140px;
overflow: hidden;
}
.rt-details .showcase .back-frame .inner {
width: 500px;
height: 306px;
top: 61px;
left: 139px;
border-radius: 0 0 5px 5px;
}
.rt-details .showcase .inner {
overflow: hidden;
position: relative;
}
.rt-details .showcase .back-frame img {
max-width: 100%;
width: 100%;
left: 1px;
top: 1px;
}

      My site can be viewed at http://m3.mcubedinfo.com/

      Thanks all,
    #1103261
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13498
    • Web Designer/Developer

    Re: Animate effect on template pages

    Posted 11 years 2 weeks ago
    • Obviously to get this all working on your own site would actually be custom work that we can't undertake for you within the scope of this forum.

      That said, you're on the right tracks looking in Firebug, the transitions (on which property) are specified in the CSS (see screenshot).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1103263

Time to create page: 0.072 seconds