Jimdo: Generate a spinning sliced circle with the click of a button

I'm attempting to achieve a spinning CD/Disk effect when the play button is clicked. I have a sample code below that represents the player's state during playback.

What I envision is an image with a play button on top. Upon clicking the button, it switches to a pause button and the center of the image starts rotating like a CD or disk.

I've made some attempts but my JavaScript skills are insufficient for this effect.

Any assistance would be greatly appreciated.

NOTE: The solution should be compatible with the Jimdo site builder.

$(function() {
  var activePlayerStartBtn;

  function stopOtherPlayerSetNewAsActive(element) {
    var toShow = $(element).parent().find('.btn.hide')[0];
    $(element).addClass('hide');
    $(toShow).removeClass('hide');

    if (activePlayerStartBtn) {
      var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
      $(stopButton).addClass('hide');
      $(activePlayerStartBtn).removeClass('hide');
    }

    activePlayerStartBtn = element;
  }

  function stopPlayer(element) {
    $(element).addClass('hide');
    $(activePlayerStartBtn).removeClass('hide');
    activePlayerStartBtn = null;
  }

  var widget1 = SC.Widget("so");
  $("#playSound").click(function() {
    widget1.play();
    stopOtherPlayerSetNewAsActive("#playSound");
  });
  $("#stopSound").click(function() {
    widget1.pause();
    stopPlayer('#stopSound');
  });
});
.button-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.img-circle {
  clip-path: circle(30% at 50% 50%);
  -webkit-clip-path: circle(30% at 50% 50%);
  animation: loading 10s linear infinite;
  width: 100%;
  max-width: 300px;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: absolute;
  width: 100%;
  max-width: 70px;
  cursor: pointer;
  transform: translate(-50%, -53%);
  top: 50%;
  left: 50%;
  opacity: .7;
  clip-path: circle(33% at 50% 50%);
  -webkit-clip-path: circle(33% at 50% 50%);
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>

<div class="button-wrapper">
  <img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
  <img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
  <img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>

<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
  frameborder="0" name="so" style="display: none;"></iframe>

javascriptjqueryhtmlcss

Answer №1

It seems like I have found what you are searching for.

Have a look at this jsFiddle showcasing a rotating Disk example

Allow me to clarify the process so that you can grasp the functionality of the code and styles.

I have included the album image twice, once as the background and once to create the rotating disk. Here is how it appears:

<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle -clipped">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">

The clipped image is not visible until the animation commences.

Upon clicking a player, the -rotating class is added to initiate the animation.

// Locate the clippedImg and add the class -rotating to trigger the animation
var clippedImg = $(element).parent().find('.-clipped')[0];
$(clippedImg).addClass('-rotating');

If the pause button is clicked, the -rotating class is removed.

Please inform me if this meets your requirements.

Answer №2

I believe using the css property animation-play-state: paused; will help you achieve the desired effect.

$(function() {
  var activePlayerStartBtn;

  function stopOtherPlayerSetNewAsActive(element) {
    var toShow = $(element).parent().find('.btn.hide')[0];
    $(element).addClass('hide');
    $(toShow).removeClass('hide');
    $('.img-circle').removeClass('paused');

    if (activePlayerStartBtn) {
      var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
      $(stopButton).addClass('hide');
      $(activePlayerStartBtn).removeClass('hide');
    }

    activePlayerStartBtn = element;
  }

  function stopPlayer(element) {
    $(element).addClass('hide');
    $(activePlayerStartBtn).removeClass('hide');
    $('.img-circle').addClass('paused');
    activePlayerStartBtn = null;
  }

  var widget1 = SC.Widget("so");
  $("#playSound").click(function() {
    widget1.play();
    stopOtherPlayerSetNewAsActive("#playSound");
  });
  $("#stopSound").click(function() {
    widget1.pause();
    stopPlayer('#stopSound');
  });
});
.button-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.img-circle {
  clip-path: circle(30% at 50% 50%);
  -webkit-clip-path: circle(30% at 50% 50%);
  animation: loading 10s linear infinite;
  width: 100%;
  max-width: 300px;
}

.paused {
  animation-play-state: paused;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: absolute;
  width: 100%;
  max-width: 70px;
  cursor: pointer;
  transform: translate(-50%, -53%);
  top: 50%;
  left: 50%;
  opacity: .7;
  clip-path: circle(33% at 50% 50%);
  -webkit-clip-path: circle(33% at 50% 50%);
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>

<div class="button-wrapper">
  <img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle paused">
  <img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
  <img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>

<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
  frameborder="0" name="so" style="display: none;"></iframe>

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

Exporting modules from Node.js using Express framework is a common

Encountering an issue with this error message Error: app.get is not a function This section shows my configuration in config/express.js var express = require('express'); module.exports = function(){ var app = express(); app.set(&apo ...

javascriptnode.jsexpress

Using static methods within a static class to achieve method overloading in Typescript

I have a TypeScript static class that converts key-value pairs to strings. The values can be boolean, number, or string, but I want them all to end up as strings with specific implementations. [{ key: "key1", value: false }, { key: "key2&qu ...

javascripttypescriptvue.js

The findOneAndUpdate function in MongoDB is adding a new record into the database

Whenever I make an update API call, I just need to update the serviceActiveFlag status. After the update API call, a new document with an empty vehicle array is created, as shown below: _id:59c76073c11d3929148f500f vehicle:Array _v:0 The ID field will ov ...

javascriptnode.jsmongodbmongoose

Guide on transforming the popup hover state into the active state in vue.js through a click event

My code currently includes a popup menu that shows up when I hover over the icon. However, I need to adjust it so that the popup changes its state from hover to active. Intended behavior: When I click the icon, the popup should appear and then disappear w ...

javascriptcssvue.js

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } ...

javascripthtmlcss

Adding JSON data to an array in Angular JS using the push method

I am encountering difficulties with adding data to an existing array. Currently, I have set up a table to display the data, but I want to also include the data in the table when a user enters an 8-digit barcode. Factory angular.module('app.pickU ...

javascripthtmljsonangularjs

Navigating through pages using Jquery's show and hide functionality

How come my item is not returning? I used the .show() method on the item. <div id="back">< back</div> <div class="item">item</div> <div class="content">My content</div> $(function(){ $('.item').on(&apo ...

javascriptjqueryhtml

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

jqueryhtmlcss

There is no XHR request sent when invoking the http function

I am facing challenges in configuring a service in angular2 to interact with a REST backend. My attempt at setting up a basic example for sending requests to a rest backend and handling the response seems to be on track. The Service is being called correc ...

javascriptajaxangularangular2-services

Leveraging Expressjs to act as a proxy for handling cross-origin requests made via AJAX

I'm working on a website that relies entirely on external APIs, without any server-side logic. All data will be retrieved from an external API. The backend server is mainly used for asset management and routing. We've decided to use nodejs with e ...

javascriptajaxnode.jscross-domainexpress

Leveraging ES6 in Vue.js

I have been considering picking up Vue.js as my next skillset. A friend mentioned that it's important to have a good understanding of ES6 before diving into Vue.js. I've asked around for advice, but I would love to hear more opinions on this matt ...

javascriptvue.jsecmascript-6

Struggling to align form inputs next to each other

I have tried various methods such as adjusting padding and margins, using tables, displaying as inline and inline-block, and separating parts of the code into different divs. However, I am still unable to get my inputs to be displayed side by side. Here is ...

javascripthtmlcssformsweb-deployment

Ensuring a div remains perfectly centered

Currently, I am new to HTML and still in the process of learning. I am facing a challenge in centering a button within a div, and I have been using margins to position it. While this method works well when the window is fullscreen, the button's positi ...

htmlcssbutton

Using string literals in Vue and HTML classes

When a user attempts to log in with the wrong password, I want multiple alert popups to appear on the UI instead of just one. This will help the user understand if they are still entering the incorrect password. To achieve this, I decided to use a counter ...

htmlcssvue.jsvuetify.js

Use 'data-toggle='button'' in Angular component only once the condition is validated

Looking to verify a certain condition upon clicking, and if it evaluates to true, toggle the element that was clicked <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active" (click)='example ...

htmlangularuser-interfacebootstrap-4

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

When incorporating the following html/css into a new Angular project created with Angular CLI using 'ng new ProjectName', I encountered issues. Despite adding the CSS to app.component.css or styles.css and the HTML to app.component.html, the Angu ...

javascripthtmlcssangulartypescript

Tips on choosing a child element with a parameter in React

Is it possible to pass a parameter in my function and use it to select a child of my JSON parse? I want to create a function (checkMatch) that can check if a username in my database matches with the input value. It should return 1 if there is a match, oth ...

javascriptjsonreactjsforeach

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

Refreshing PHP Script

I have a PHP file that contains a combination of HTML elements, JavaScript functions, and PHP scripts. I need to rerun a specific part of the PHP script repeatedly. Let's consider the following example: <html> <?php $connection = ...

phpjavascripthtml

Chrome experiences a hidden stalling issue due to a large WebGL texture

While working with WebGL on Windows 10 using Three.js, I noticed that initializing a large (4096 x 4096) texture causes the main thread of Chrome to stall for a significant amount of time. Surprisingly, the profiler doesn't show any activity during th ...

javascriptgoogle-chromethree.jswebgl