Results 1 to 2 of 2

Thread: Tweak required if i may ask.

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default Tweak required if i may ask.

    I am using the code below.
    Currently its blinking on & off on & off etc etc
    What i would like is a tweak/extra code added so it blinks on then the text stays visable for a while then off etc etc
    The visable text part would need some kind of code so i can change a value to then have it say 1 second visable or 2 seconds visable etc.
    Many thanks.
    Code:
    <!--===========================================================-->
    <!--                    Blinking code below                    -->
    <!--===========================================================-->
    #fast {
       animation:             blink 300ms linear infinite;
           -moz-animation:    blink 300ms linear infinite;
           -webkit-animation: blink 300ms linear infinite;
           text-align: center;
    }
    
    #regular {
       animation:             blink 750ms linear infinite;
           -moz-animation:    blink 750ms linear infinite;
           -webkit-animation: blink 750ms linear infinite;
           text-align: center;
    }
    
    #slow {
       animation:             blink 1500ms linear infinite;
           -moz-animation:    blink 1500ms linear infinite;
           -webkit-animation: blink 1500ms linear infinite;
           text-align: center;
    }
    
    @keyframes             blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
    @-moz-keyframes    blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
    @-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
    <!--============================================================-->
    <!--                    End blinking code                       -->
    <!--============================================================-->
    Code:
    <u><b><font face="Arial Black" size="5" color="#FFFFFF"><div id="slow">
    ** PUT YOUR TEXT TO FLASH HERE **</div></font></b></u>
    Last edited by Beverleyh; 07-30-2013 at 01:39 PM. Reason: formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Moderators Note - you've been on the forum a while now so please remember to use the BB code buttons to format your code otherwise persistent failure to do so may result in the issue of infraction points.

    Formatting your code helps with the readability of a post, and can affect response time (posts that are easier to read tend to be answered faster)

    If you are unsure which formatting button to use, or if you are in the 'Quick Reply' window, head for the hash '#' - when you hover over it, a tooltip appears saying "Wrap [CODE] tags around selected text".


    I've moved your thread from the Java to the CSS forum, because these animations are done using CSS3.

    Here are CSS3 animations for approx 1-second and 2-second flashes;

    CSS
    Code:
     #one-sec {
     animation: one-sec 1500ms linear infinite;
     -moz-animation: one-sec 1500ms linear infinite;
     -webkit-animation: one-sec 1500ms linear infinite;
     -o-animation: one-sec 1500ms linear infinite;
     text-align: center;
     }
     @keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
     @-moz-keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
     @-webkit-keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
     @-o-keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
    
     #two-sec {
     animation: two-sec 2500ms linear infinite;
     -moz-animation: two-sec 2500ms linear infinite;
     -webkit-animation: two-sec 2500ms linear infinite;
     -o-animation: two-sec 2500ms linear infinite;
     text-align: center;
     }
     @keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
     @-moz-keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
     @-webkit-keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
     @-o-keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
    HTML
    Code:
    <div id="one-sec">** PUT YOUR TEXT TO FLASH HERE - APPROX 1 SECOND VISIBLE BETWEEN FLASHES **</div>
    <div id="two-sec">** PUT YOUR TEXT TO FLASH HERE - APPROX 2 SECONDS VISIBLE BETWEEN FLASHES **</div>
    The time sequence for each animation is highlighted red.

    As for extending the time that the text is visible for, that needs to be done with the keyframes, highlighted blue - change to full opacity at around the 10% mark in the animation sequence, and then change back to 0 opacity from the 90% mark, makes the text visible for roughly 80% of the time during each animation loop (well, a bit less if you take out the time for the actual colour transition).

    EDIT: I've also added Opera-specific definitions with the "-o-" vendor prefix, just to make sure you're covered there.
    Last edited by Beverleyh; 07-30-2013 at 02:09 PM. Reason: moderators note added
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. simplegallery tweak possible?
    By Pampaman in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-06-2011, 10:08 AM
  2. Small tweak required
    By theremotedr in forum PHP
    Replies: 3
    Last Post: 11-27-2011, 06:58 PM
  3. gfeedfetcher tweak
    By agoulet in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 11-20-2011, 03:37 PM
  4. Replies: 4
    Last Post: 07-14-2008, 08:34 AM
  5. Required field(s) validation Tweak
    By martino in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 12-14-2006, 09:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •