Shining animation of a quote in a right angle using CSS3 and/or Javascript

Question

Shining animation of a quote in a right angle using CSS3 and/or Javascript

I have a vision for an animation that involves three successive right angle quotes, like » » », glowing one after the other from left to right and then back again. This could be a unique effect that developers might find interesting and valuable.

The idea for this animation is inspired by the slide-to-unlock feature on iPhones, where text glows progressively.

While I am familiar with CSS3 animations using keyframes and have used them before, I'm unsure about coding the looping part. Perhaps Javascript is the solution, possibly utilizing jQuery since it's already present on the page.

The HTML structure I envision would look something like this:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

If you have any ideas on how to best implement this in a clever way, please share your thoughts. I understand that not all browsers support CSS3 animations, but I only need to cater to modern webkit and gecko implementations.

Edit 1: Included span tags around each » for individual CSS property changes in JavaScript.

Edit 2: To clarify, the left-most quote will glow first with a specific color using CSS properties, followed by the next quote with a short delay.

Edit 3: For further clarification and inspiration, check out this example of the exact animation I have in mind: Example Link

FINAL EDIT WITH SOLUTION SUMMARY: After considering various options, I chose the pure CSS3 approach for my implementation. There are multiple valid solutions presented here, so explore what works best for you. You can view my final implementation at: Final Implementation Link. Have fun experimenting with this animation on your projects!

javascript jquery animation css

Answer 1

Answer №1

Just for kicks, here's a method utilizing pure css. It may have some limitations when it comes to browser support.

.glowquote {
    background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background-size: auto 50%;

    padding: 0 100px;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    -webkit-animation: gradient-animation infinite 1s linear;
}

http://jsfiddle.net/grc4/uF8H2/3/

Edit: The jsfiddle now partially functions in firefox. The gradient animation is operational, the only aspect that doesn't function appropriately is the text clipping (-moz-background-clip:text doesn't exist). Implementing an image mask over the background could resolve this issue.

Answer 2

Just for kicks, here's a method utilizing pure css. It may have some limitations when it comes to browser support.

.glowquote {
    background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background-size: auto 50%;

    padding: 0 100px;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    -webkit-animation: gradient-animation infinite 1s linear;
}

http://jsfiddle.net/grc4/uF8H2/3/

Edit: The jsfiddle now partially functions in firefox. The gradient animation is operational, the only aspect that doesn't function appropriately is the text clipping (-moz-background-clip:text doesn't exist). Implementing an image mask over the background could resolve this issue.

Answer 3

Answer №2

To enhance the styling of each arrow individually, I would wrap them in separate span elements:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

If you are utilizing jQuery UI (since basic jQuery may not support color animations), you can utilize a similar approach like this:

function doGlow(numTimes) {

    var $arrows = $("span.glowquote span");

    function nextGlow(i) {
        $arrows.eq(i).animate({
            color: "green"
        }, 400).animate({
            color: "black"
        }, 400, function() {
            i = (i + 1) % $arrows.length;
            if (i === 0) numTimes--;
            if (numTimes > 0) nextGlow(i);
        });
    }
    nextGlow(0);
}

See it in action here: http://jsfiddle.net/KrL44/1

(Alternatively, check out the original version of the demo that loops indefinitely: http://jsfiddle.net/KrL44/)

Answer 4

To enhance the styling of each arrow individually, I would wrap them in separate span elements:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

If you are utilizing jQuery UI (since basic jQuery may not support color animations), you can utilize a similar approach like this:

function doGlow(numTimes) {

    var $arrows = $("span.glowquote span");

    function nextGlow(i) {
        $arrows.eq(i).animate({
            color: "green"
        }, 400).animate({
            color: "black"
        }, 400, function() {
            i = (i + 1) % $arrows.length;
            if (i === 0) numTimes--;
            if (numTimes > 0) nextGlow(i);
        });
    }
    nextGlow(0);
}

See it in action here: http://jsfiddle.net/KrL44/1

(Alternatively, check out the original version of the demo that loops indefinitely: http://jsfiddle.net/KrL44/)

Answer 5

Answer №3

Give this a shot:

Here is the HTML code snippet:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span> </span>

And here is the corresponding JavaScript code:

$(document).ready(function(){
    var i = 0;
    function run() {
        $('.glowquote span:eq('+ i +')').animate({color: 'green'}, 500, function(){
         $(this).animate({color: 'black'}, 500);
           i++;
           if (i > 2) { i = 0 } 
           run() 
        })
   }
 run()            
})

Check out the working example on JSFiddle

Answer 6

Give this a shot:

Here is the HTML code snippet:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span> </span>

And here is the corresponding JavaScript code:

$(document).ready(function(){
    var i = 0;
    function run() {
        $('.glowquote span:eq('+ i +')').animate({color: 'green'}, 500, function(){
         $(this).animate({color: 'black'}, 500);
           i++;
           if (i > 2) { i = 0 } 
           run() 
        })
   }
 run()            
})

Check out the working example on JSFiddle

Shining animation of a quote in a right angle using CSS3 and/or Javascript

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to incorporate background audio in Next.js?

A method for calculating the average of values with identical keys within an object contained in an array

Stop the recurrence of multiple clicks by incorporating a Bootstrap modal popup confirmation

Troubleshooting: Issues with the functionality of ng-include in AngularJS

What is the best way to begin a new conversation in an Alexa Skill?

Selection List dictates the necessity of JavaScript

Developing a column index comparable to that of spreadsheet software

In the realm of asp.net, the OnClick event springs into action after the

Setting text alignment in Bootstrap based on breakpoints

Detecting collisions between two squares in an HTML5 canvas

Start fresh with your list styling in Sass/CSS

What is the best way to send numerous forms to a PHP page when the quantity of forms produced varies randomly?

Is there a method to delay the loading of a webpage until an image has fully loaded (preloading)?

Avoid Repeating an Animation with Jquery

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Leveraging Leaflet or any JavaScript library alongside Typescript and webpack for enhanced functionality

incorrect sequence of div elements appearing vertically

Is there a way to position this Flex-Box Item beside the image?

What sets apart the method of assigning event handlers using bind() versus each() in jQuery?