The captivating logo animation of Google Chrome

For optimal viewing experience, it is recommended to use Chrome or any WebKit browser.

https://www.google.com/intl/en/chrome/browser/

Hovering over the chrome logo reveals an amazing effect. I tried downloading the page source, but got lost in it.

The site utilizes non-standard CSS properties like -webkit-mask and -webkit-gradient:

-webkit-mask: "-webkit-gradient(radial, 17 17, %s, 17 17, %s," + "from(rgba(0, 0, 0, 1))," + "color-stop(0.5, rgba(0, 0, 0, 0.2))," + "to(rgba(0, 0, 0, 1)))"

Remember to change the parameter %s as needed.

If the logo is sufficiently sized, we should see a white circle expanding from the center.

I attempted to use jQuery without success. Can someone provide assistance?

javascriptjquerycsswebkit

Answer №1

To create animation using jQuery, you can utilize an interval function and modify certain properties in this manner:

var radius = 0;

var interval = window.setInterval(function() {
    $("#chrome").css("-webkit-mask", "-webkit-gradient(radial, 17 17, " + radius + ", 17 17, " + (radius + 15) + ", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))");
    radius++;
    if (radius === 124) {
        window.clearInterval(interval);
    }
}, 20);​

http://jsfiddle.net/sync/WHAXg/

Answer №2

I made some adjustments to ben's answer by incorporating the jQuery animate function into the code:

$({ inner_radius : 0 }).animate({ inner_radius : 123 },{ step : function(A){
    var delta_radius = 15;
    $("#chrome").css("-webkit-mask","-webkit-gradient(radial, 17 17, "+inner_radius+", 17 17, "+(inner_radius+delta_radius)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))");
}, duration : 2000 });

view demo

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

Save a CSV file into a list, locate a specific key within the list, and retrieve the fourth value associated with that key

After thorough revision, the question now reads as follows: Take a look at this content in database.csv: barcode,ScQty, Name , Qty ,Code 123456 , 3 ,Rothmans Blue , 40 ,RB44 234567 , 2 ,Rothmans Red , 40 ,RB30 345678 , 2 ,Rothmans Gre ...

javascriptphpjquery

Achieving a scrollable div with ng-repeat

I have implemented ng-repeat to showcase some messages, and I am attempting to create a scrollable "message_area" as the messages overflow naturally over time. However, my current code is not delivering the desired outcome. <div class="main_area"> ...

javascripthtmlcssangularjs

What method can I use to modify the object's keys based on certain conditions in ES6/React?

How can I dynamically change the value of an object's keys based on specific conditions? What is the most effective way to structure and implement this logic? Data const newData = { id: 111, name: "ewfwef", description: "Hello&qu ...

javascriptreactjsecmascript-6react-hooks

How to implement a cyclic item generation feature in React.js

My function is meant to draw multiple items in a cycle, but it is only drawing the first item when I attempt to draw 5. This is my function: export default function CinemaHole() { const items = []; for(let i = 0; i < 5; i++) { item ...

javascriptreactjs

Background image not showing on div element

As someone who is new to coding, I could really use some assistance with a problem I've encountered. Specifically, I'm attempting to reference an image within a div element, but unfortunately it's not displaying when I check through my brows ...

htmlcss

The list does not get updated through the Ajax call until another request is made to the server

I am currently facing an issue with my ajax call that updates a kendo multiselect's data source based on another dropdown selection. The multiselect also has a read action that filters the data. AJAX Call function getPsychiatrists() { return $.aj ...

jqueryajaxasp.net-mvckendo-ui

Looking for assistance with JSON and jQuery?

Hey there! I'm currently working on pulling in a jsonp feed using jQuery and formatting a widget with the data. It's almost there, but I'm facing an issue trying to set the value of my link <a href=""> as "item.url" from my jsonp respo ...

jqueryjsonjsonphref

Vue 3 does not currently support the usage of Bootstrap components

Currently, I am diving into the world of Vuejs and experimenting with integrating bootstrap/vue-bootstrap components like Card or b-table. However, I encountered some issues along the way. [Vue warn]: Failed to resolve component: b-table If this is a nat ...

javascriptvue.jsvuejs3bootstrap-5

Troubleshooting problems with Bootstrap cards on mobile devices

I've encountered an issue on small devices with the Bootstrap card. I'm using a hover effect to slide up the content, but on small devices, the content is cutting off the image. I'm not sure how to position the content directly after the ima ...

htmlcssbootstrap-4

Adding static JSON array data to the results received from an API call

Within my code snippet below, I am able to retrieve a JSON Response: respArray = [] respArray = respBody.classifiers respBody = respArray if (respBody.length > 0) { respBody = applyPagination(respBody, reqParams.filter, option ...

javascriptarraysjson

Ways to call a method in a subclass component from a functional parent component?

In my redux-store, I have objects with initial values that are updated in different places within the child component. As the parent, I created a stateless functional component like this: const Parent = () => { const store = useSelector(state => s ...

javascriptreactjsreact-reduxreact-hooks

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment

When transferring JavaScript Array via Ajax to PHP, it results in a null response

I am attempting to send a JavaScript array to PHP, but the post data keeps returning null. Here is my JavaScript code: console.log($Seats); console.log($Seats.toString()); console.log(JSON.stringify({ $Seats })); var jsonStr = JSON.stringify($Seats); $.a ...

javascriptphpjqueryjsonajax

Navigate through a JSON data structure containing nested arrays

Does anyone know an effective way to loop through a JSON object that contains two or more nested arrays? The goal is to extract the values from each array without including key-value pairs in the output. {"Obj": ["array 0", ["nested array 1"], ...

javascriptjqueryarraysjson

What might be causing the issue in the build process of my next.js project?

**Why is my Node.js YAML file causing an error?** name: Node.js CI on: push: branches: [ "main" ] pull_request: branches: [ "main" ] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-ver ...

javascriptnext.jsbuild

Guide to executing an efficient Graphql request in Vue using Apollo

Seeking assistance with configuring my initial queries on scaphold.io. Here is the query I am running through the internal GraphiQL: query AllPrograms { viewer { allPrograms{ edges { node { id name } ...

javascriptvue.jsgraphqlapollovue-apollo

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

javascriptjqueryhtmlcss

Next.JS - What is the reason behind data fetching occurring on both the server and client side?

When I call a regular fetch function in the index.js component and then log the response to the console, something unexpected happens. Despite the fetch being inside the component function, the response is also logged on the server side: it shows up in the ...

javascriptnext.jsfetchnext-api

Use jQuery to activate the radio button inside a div whenever it is triggered by a change

How can I check which radio button list is clicked and then send a jQuery ajax call for the clicked item? Currently, I have tables with the IDs plan1, plan2, plan3 generated using PHP. Each table has a radio button list. Using jQuery each, how can I achiev ...

javascriptphpjqueryajaxradio-button

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js