What is the best way to add an Apple iPhone-like effect to a menu list?

I've been working on creating a menu similar to the Apple menu using the greensock api

Here is my progress so far: JSFIDDLE

Update

This is what I am aiming for: Fiddle

Any idea why there is flickering when hovering over it?


    <div class="demoWrapper">
        <div class="stage">            
            <div id="container" style="margin-left:225px;">
                <div id="box0" class="to_box" style="/*top: 90px;*/">test 0</div>
                <div id="box1" class="to_box" style="/*top: 115px*/">test 1</div>
                <div id="box2" class="to_box" style="/*top: 140px;*/">test 2</div>
                <div id="box3" class="to_box" style="/*top: 165px;*/">test 3</div>
                <div id="box4" class="to_box" style="/*top:190px;*/">test 4</div>
                <div id="box5" class="to_box" style="/*top:215px*/">test 5</div>
                <div id="box6" class="to_box" style="/*top:240px*/">test 6</div>
                <div id="box7" class="to_box" style="/*top:265px*/" >test 7</div>
                <div id="box8" class="to_box" style="/*top:290px*/">test 8</div>
                <div id="box9" class="to_box" style="/*top:315px*/">test 9</div>
                <div id="box10" class="to_box" style="/*top:340px*/">test 10</div>
                <div id="box11" class="to_box" style="/*top: 365px;*/">test 11</div>
                <div id="box12" class="to_box" style="/*top: 390px;*/">test 12</div>
            </div>
        </div>
    </div>
jqueryhtmlcssgsap

Answer №1

Give this a shot!

<!DOCTYPE html>
<html>
    <head>
         <script src="js/libs/jquery.min.js"></script> <!-- Download jQuery -->
         <script src="js/libs/drum.js"></script> <!-- Get drum.js -->
         <script src="js/libs/hammer.min.js"></script> <!-- Grab hammer.js -->
         <script src="js/libs/hammer.fakemultitouch.js"></script> <!-- Snag hammer.fakemultitouch.js -->
         <link rel="stylesheet" href="css/libs/drum.css">
    </head>
    <body>
        <select>
        <option value="0">00</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option selected value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        </select>
        <script>
         $("select").drum();
        </script>
    </body>
</html>

This method works flawlessly, no issues at all :)

Answer №2

Thank you, I have managed to solve my question by myself.

For reference, here is the link to my code on MyFiddle: MyFiddle

 <script type="text/javascript">
        $(document).ready(function(e){

            TweenMax.set($("#container"),{perspective:3000,transformStyle:"preserve-3d", backfaceVisibility:"hidden"});

            $("#container div").mouseover(function(e){

                var current = $(this);
                var nextFirst = $(this).next();
                var prevFirst = $(this).prev();

                var nextFirst_1 = $(this).nextAll().eq(1);
                var prevFirst_1 = $(this).prevAll().eq(1);

                var nextFirst_2 = $(this).nextAll().eq(2);
                var prevFirst_2 = $(this).prevAll().eq(2);

               TweenMax.to(prevFirst_2, 0.1, {
                    scale:1.1,
                    rotationX:50,
                    opacity:0.6,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                }); 

                TweenMax.to(prevFirst_1, 0.1, {
                    scale:1.2,
                    rotationX:45,
                    opacity:0.7,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                }); 

                TweenMax.to(prevFirst, 0.1, {
                    scale:1.3,
                    rotationX:35,
                    opacity:0.8,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(current, 0.1, {
                    scale:1.5,                                  // current
                    rotationX:0,
                    opacity:1,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(nextFirst, 0.1, {
                    scale:1.3,
                    rotationX:-35,
                    opacity:0.8,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(nextFirst_1, 0.1, {
                    scale:1.2,
                    rotationX:-45,
                    opacity:0.7,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(nextFirst_2, 0.1, {
                    scale:1.1,
                    rotationX:-50,
                    opacity:0.6,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

            });   

            $("#container div").mouseout(function(){
                var element =  $("#container div");
                TweenMax.to(element, 0.1, {
                    scale:1.0,
                    rotationX:0,
                    opacity:0.4,
                   // marginLeft:0,
                    ease:Quad.easeInOut
                }); 
            })

        }); // end of (document).ready();
    </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the Facebook Like Button in alignment with the counts box

Is it possible to align the Facebook likes count box at the bottom of my Like Button on my website? I'm looking for help with this task. Here is a visual representation of how I want the fb button to be positioned or styled: ...

asp.nethtmlcss

Achieving automatic div width using CSS

I am dealing with an HTML structure that can vary depending on the page context. In some instances, it appears like this: <div class="container"> <div class="column"> blah </div> </div> While on other pages, it looks l ...

csshtmlcss-float

Show or hide a specific element based on whether a certain radio button is selected or deselected

After successfully displaying an element on radio button selection, I encountered the issue of the selected element remaining visible when another radio button in the group is chosen. What aspect am I overlooking? Regarding hiding elements with vanilla Ja ...

javascripthtmlforms

What could be causing this navigation item to vanish in Firefox?

Check out this link: http://jsfiddle.net/Nvntm/1/ In Firefox and some other browsers, the "Support" navigation item disappears while the other three remain. Why does this happen? Is there something incorrect in my code? ...

htmlcsscross-browser

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

javascripthtmlcsswordpresswpforms

Maintaining the image's aspect ratio while cropping it to fit within the maximum or minimum height

Is there a way to make an image responsive by resizing it while keeping its aspect ratio intact at all sizes? I want the height of the image to stay fixed above 650px, cropping the top and bottom to maintain the ratio without stretching. Additionally, I do ...

cssimageresponsive-design

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

Seeking assistance with dilemmas related to jQuery (specifically kendo), .NET Web Service (asmx), and Json

After conducting extensive research on the subject, I was unable to find any satisfactory answers or complete examples. Since I have limited experience with jquery, I am in search of a straightforward sample that demonstrates what I'm trying to achiev ...

c#jqueryjsonweb-serviceskendo-ui

Let's unravel this JavaScript enigma: the code snippet window.confirm = divConfirm(strMessage) awaits

Imagine a scenario where you have an old website with a lot of existing JS code. If a user wants to update all the alert messages to modern, stylish Div-based alerts commonly used in jQuery, YUI, Prototype, etc., there are primarily three types of JS dialo ...

asp.netjavascriptjqueryajax

Connecting a Kendo Dropdown menu to external data sources for seamless integration

I need help with binding data to a dropdown list for my local service. Whenever I try to download the data, I keep getting an error message: Uncaught SyntaxError: Unexpected token: Does anyone have any ideas on how to resolve this issue? This is my JS ...

javascriptjqueryjsonkendo-ui

One interesting characteristic of Javascript localStorage is that it overrides existing data instead of adding to it

I've been experimenting with localStorage to create new divs dynamically. Everything is going well, but I encountered an issue after reloading the page and clicking the bag button again. The previously created divs are being replaced by the new ones i ...

javascripthtmlsessionlocal-storage

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets: function swapStylesheet(sheet){ document.getElementById('pagestyl ...

javascripthtmlcss

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

Using html5, I am currently working with video and audio. I have encountered an issue where sometimes the video hangs even after its readyState === 4. The cause of this problem is unclear to me. I aim for a solution where if the video's readyState = ...

javascripthtmljqueryangularhtml5-video

Count in JavaScript that picks up where it left off

I'm working on setting up a countdown timer that runs for 24 hours, showing the days, hours, minutes, and seconds. The challenge I'm facing is how to save the progress of the countdown. Essentially, I want it to resume from where it left off for ...

javascripthtmlcookiescountercountdown

Set a click listener on a button within Ext.window.MessageBox

Currently, I am dynamically generating a message box using Ext.window.MessageBox. var msgBox = Ext.create('Ext.window.MessageBox', { title: '', //message in window msg: 'message text', icon: ' ...

javascriptjqueryhtmlextjs

Angular 4 is unable to attach to 'formGroup' as it is not recognized as a valid property of 'form'

As a beginner with Angular 4, I decided to explore model driven forms in Angular 4. However, I keep encountering this frustrating error. Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form ...

javascripthtmlangulartypescript

Unable to adjust custom link menu font size

I have designed a unique custom menu called SANDUSKY with the css classes of no-hover. It is positioned alongside HOME, ABOUT, GALLERY, STORE, CONTACT which serve as the navigation menus. While attempting to customize SANDUSKY, I successfully altered the c ...

css

Arranging the rows and columns of a table in optimal alignment

I am currently facing an issue with two tables. The first table consists of 2 rows and 4 columns, with the first column spanning 2 rows. However, in the visual representation, the last 3 columns are misaligned with the rows. How can this alignment be corre ...

htmlcsshtml-tablealignment

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader