Scribd Logo
Importer

Bienvenue sur Scribd !

  • Code Changing Letter

    Transféré par

    Morpheu
    17 vues1 page
    This document provides instructions for using JavaScript to create a letter sequence rollover effect on text elements. It involves the following steps: 1. Set up the HTML document structure with a container for the JavaScript code. 2. Add the content elements to apply the effect to, using a class for targeting. 3. On page load, initialize a hover object to track state and add mouseover listeners to the content elements. 4. Start an interval to continuously update the text by replacing one letter at a time with a random character. 5. On each interval, check if the animation is complete before resetting or continuing the letter replacement.

    Description originale:

    Code Changing Letter

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    This document provides instructions for using JavaScript to create a letter sequence rollover effect on text elements. It involves the following steps: 1. Set up the HTML document structure with a container for the JavaScript code. 2. Add the content elements to apply the effect to, using a class for targeting. 3. On page load, initialize a hover object to track state and add mouseover listeners to the content elements. 4. Start an interval to continuously update the text by replacing one letter at a time with a random character. 5. On each interval, check if the animation is complete before resetting or continuing the letter replacement.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    17 vues1 page

    Code Changing Letter

    Transféré par

    Morpheu
    This document provides instructions for using JavaScript to create a letter sequence rollover effect on text elements. It involves the following steps: 1. Set up the HTML document structure with a container for the JavaScript code. 2. Add the content elements to apply the effect to, using a class for targeting. 3. On page load, initialize a hover object to track state and add mouseover listeners to the content elements. 4. Start an interval to continuously update the text by replacing one letter at a time with a random character. 5. On each interval, check if the animation is complete before resetting or continuing the letter replacement.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 1

    LightBox

    g
    Zhee-Shee production

    Code a changing letter


    sequence rollover effect
    Use JavaScript string modification to create a rollover effect for text elements within your page content

    1. Initiate the HTML document *** STEP 4 HERE 6. Animation frame


    The first step is to define the structure of the HTML }); The text update is made by replacing a the
    document. This sets the document through a HTML }); character at the position described by the hover
    container, which stores a head and body section. }); object’s index field with random character. New
    While the head section is used to load the external text is created using “substr” from the original text
    JavaScript resource, the body section is used to 4. Apply interval to capture the letters before and after the identified
    store the HTML content created in the next step. For simplicity, the effect is only applied to one element index position — using a random character from
    at a time — achieved by checking the “interval” field “chars” that are placed between them. The text
    <!DOCTYPE html> inside the hover object from step 3. If this is null, the inside the hover element node is then replaced
    <html> hover object is updated to store details about the with the new string.
    <head> current element and the interval assigned for the
    <title>Letter Sequence Rollover</title> effect. The interval is set to repeat the execution of the var chars = [“@”,”!”,”#”,”?”];
    <script src=”code.js”></script> supplied function every 50 milliseconds. hover.index++;
    </head> var str = hover.originalText.substr
    <body> if(hover.interval == null){ (0,hover.index)
    *** STEP 2 HERE hover.node = this; + chars[ Math.floor(Math.random()
    </body> hover.originalText = this.innerText; *chars.length) ]
    </html> hover.index = 0; + hover.originalText.substr(hover.
    hover.interval = setInterval(function(){ index+1);
    2. Body content *** STEP 5 HERE hover.node.innerText = str;
    The content used for the effect consists of text },50);
    elements that use a class called “sequenceRollover”. } 7. Close animation
    This class will be used by the JS to identify any When the effect has been completed, the text and
    elements that should have the effect added to them. 5. Interval status check the hover object must be reset to their original
    This abstract approach allows the effect to be applied The purpose of the interval function is to update the settings. This includes replacing the original text
    to multiple elements, without restriction on location text and end the animation upon completion. This inside the hovered node, as well as null values
    or the amount of elements the effect is applied to. step uses the index field assigned to the hover applied to the fields of the hover description object.
    object in step 3 to identify whether the animation is JavaScript’s clearInterval command is used to
    <h1><span class=”sequenceRollover”>Run! to continue. If so, step 6 will be executed. If not, step destroy the interval referenced by the hover object
    </span></h1> 7 will be executed instead. so that it doesn’t continue to be executed.
    <span class=”sequenceRollover”>Get to the
    chopper!</span> if(hover.index < hover.originalText.length){ hover.node.innerText = hover.originalText;
    *** STEP 6 HERE clearInterval(hover.interval)
    3. JavaScript: initiation }else{ hover.node = null;
    Create a new file called “code.js”. JavaScript must be *** STEP 7 HERE hover.originalText = null;
    executed after the page has loaded in order to } hover.interval = null;
    access the page content. For this reason, code is
    executed inside a “load” event listener on the
    window. A hover object is created to store details
    used in later steps, while a “mouseover” event
    listener is applied to each item from step 2 that uses
    the “sequenceRollover” class.

    window.addEventListener(“load”, function(){
    var hover = {“index”:0, “originalText”:
    null, “interval”:null, “node”: null};
    var nodes = document.querySelectorAll
    (“.sequenceRollover”);
    nodes.forEach(function(item){
    item.addEventListener(“mouseover”,
    function(){

    lightbox________________________________________________ 19

    Vous aimerez peut-être aussi