2 Replies Latest reply on Jan 7, 2014 10:58 AM by Jon Fritz II

    How is this effect done ?

    TwoHelix

      Hey guys and gals, just curious on how this effect is done, if you click on the above remotes where it says i mile range and then click the show all, youll see an effect. how is this done ?

       

      http://viper.com/Car/Remotes/

       

      Thank you

        • 1. Re: How is this effect done ?
          Nancy OShea Adobe Community Professional & MVP

          Looks like custom jQuery animations.

           

           

          Nancy O.

          • 2. Re: How is this effect done ?
            Jon Fritz II Adobe Community Professional & MVP

            You could use CSS Transitions and a small javascript class swapper to do something similar. Here's an example page (CSS Transitions don't work in IE9 or lower). If the number of items is relatively limited, it's pretty easy to make changes...

             

            <!doctype html>

            <html>

            <head>

            <meta charset="utf-8">

            <title>Transitiony Goodness</title>

            <script type="text/javascript">

                function offclass(id)

                {document.getElementById(id).className = 'offclass';}

                function onclass(id)

                {document.getElementById(id).className = 'onclass';}

            </script>

            <style>

            .onclass {

                float:left;

                height:300px;

                width:300px;

                border:1px solid black;

                opacity:1;

                transition:all 1s;

            }

            .offclass {

                float:left;

                height:0px;

                width:0px;

                opacity:0;

                transition:all 1s;

            }

            #one {

                background-color:green;

            }

            #two {

                background-color:blue;

            }

            #three {

                background-color:orange;

            }

            #four {

                background-color:red;

            }

            #five {

                background-color:yellow;

            }

            </style>

            </head>

            <body>

            <p><a href="#" onclick="offclass('two'); offclass('four'); offclass('five'); onclass('one'); onclass('three');">one and three</a></p>

            <p><a href="#" onclick="offclass('one'); offclass('three'); offclass('four'); onclass('two'); onclass('five');">two and five</a></p>

            <p><a href="#" onclick="offclass('one'); offclass('two'); offclass('three'); offclass('five'); onclass('four'); ">four</a></p>

            <p><a href="#" onclick=" onclass('one'); onclass('two'); onclass('three'); onclass('four'); onclass('five');"> all on</a></p>

            <div class="onclass" id="one">One</div>

            <div class="onclass" id="two">Two</div>

            <div class="onclass" id="three">Three</div>

            <div class="onclass" id="four">Four</div>

            <div class="onclass" id="five">Five</div>

            </body>

            </html>

            1 person found this helpful