Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Create A Spinning Icon For Rollover

    Încărcat de

    Morpheu
    7 vizualizări1 pagină
    Create a Spinning Icon for Rollover

    Titlu original

    Create a Spinning Icon for Rollover

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Create a Spinning Icon for Rollover

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    7 vizualizări1 pagină

    Create A Spinning Icon For Rollover

    Încărcat de

    Morpheu
    Create a Spinning Icon for Rollover

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 1

    LightBox

    g
    Periodic Table of Elements

    Create a spinning icon for


    rollover interactions
    Indicate element interactivity with this spinning icon feature that activates with a mouse rollover

    1. Initiate the document node.appendChild(newNode); height: 0;


    The first step is to define the page document within }); transform: rotate(0deg);
    the HTML. This is achieved using the HTML }); transition: transform 1s, width 1s,
    container to describe the document as having a height 1s;
    head and body section. While the head section is 4. CSS: spin element }
    used to load the external CSS and JavaScript Create a new file called “styles.css”. This step defines
    resource files, the body section is used to store the the presentation of the container elements using the 6. Into view: hover
    content defined in step 2. data-spin attribute. While size and border are applied, Modifications to transform, width and height are set
    the most important attribute is the relative positioning. for the icon element when its parent data-spin
    <!DOCTYPE html> This allows the icon element styled in step 4 to be container is hovered by the mouse cursor. These
    <html> positioned relative to the data-spin element. settings combined with the transition applied in step
    <head> 5 results in the icon rotating 360 degrees while sizing
    <title>Spin Box</title> [data-spin]{ to match the width and height of the parent container.
    <link rel=”stylesheet” type=”text/css” position: relative;
    href=”styles.css”/> display: inline-block; [data-spin]:hover > *:last-child{
    <script src=”code.js”></script> width: 5em; transform: rotate(360deg);
    </head> height: 5em; width: 100%;
    <body> border: .1mm solid; height: 100%;
    *** STEP 2 HERE } }
    </body>
    </html> 5. Icon defaults 7. Icon images
    The span element created for each data-spin element By using the unique value assigned to the parent
    2. Body content in step 3 is guaranteed to be the last element — hence element’s data-spin attribute, each of the icon
    The body content consists of several elements that the use of the last-child selector. Not meant to be elements identified as the last child is assigned an
    will have the spin icon effect applied to them. A visible by default, this element is set have no size, and image. The background image settings in step 5 will
    specific attribute “data-spin” is applied to these positioned in the top left corner of the parent set these images to cover the size of the icon
    elements, to be used by both JavaScript and CSS to element. A transition is applied to animate any element, while being positioned from the middle.
    apply modifications and styling. With attributes changes to transform, width and height properties.
    being able to have a unique value, these elements [data-spin=”A”] > *:last-child{
    can be referenced as a group as well as individually. data-spin]> *:last-child{ background-image: url(“photo1.jpg”);
    position: absolute; }
    <span data-spin=”A”>Abc</span> display: block; [data-spin=”B”] > *:last-child{
    <span data-spin=”B”>Abc</span> background-size: cover; background-image: url(“photo2.jpg”);
    <span data-spin=”C”>Abc</span> background-position: center; }
    top: 0; [data-spin=”C”] > *:last-child{
    3. JavaScript: modifications left; 0; background-image: url(“photo3.jpg”);
    JavaScript is used to apply an empty span element width: 0; }
    to each of the elements using the data-spin attribute.
    This will be used by the CSS as the spin icon
    element — and keeps the HTML in step 2 from
    becoming complicated. This must be performed
    when the page content is available, hence the code
    being placed inside a “load” event listener attached
    to the browser window.

    window.addEventListener(“load”, function(){
    var nodeList = document.
    querySelectorAll(“[data-spin]”);
    nodeList.forEach(function(node){
    var newNode = document.
    createElement(“span”);

    lightbox________________________________________________ 23

    S-ar putea să vă placă și