Exploring ways to incorporate or eliminate animations on mobile devices using html/css

Is it possible to control animations on different devices using media queries? For example, can you show an animation only on mobile devices while hiding it on desktop or laptop? Conversely, is there a way to add an animation specifically for mobile devices without displaying it on other devices?

I want this animation to appear solely on mobile devices

function show() {
  setTimeout(
    function() {
      document.getElementById('discord-shoutout').classList.add('online');
    },
    200
  );
}

function reset() {
  hide();
  setTimeout(show, 1500);
}

function hide() {
  document.getElementById('discord-shoutout').classList.remove('online');
}

show();
html,
body {
  background: #e9e9e9;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.1;
}

.reset-button {
  font: 400 11px "Open Sans";
  line-height: 1;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #7289da;
  color: #7289da;
  font-size: 1em;
  padding: 0.5em 0.8em;
  cursor: pointer;
}
.reset-button:hover {
  background: #7289da;
  color: #fff;
}

.discord-shoutout * {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.discord-shoutout {
  position: fixed;
  bottom: 2em;
  right: 1em;
  width: 300px;
  z-index: 100;
  text-align: left;
  transition: 1s ease;
  visibility: hidden;
  opacity: 0;
  transform: translate(1em, 50px);
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout.online {
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}
.discord-shoutout:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #7289da transparent transparent;
  position: absolute;
  right: 0;
  bottom: -25px;
}
.discord-shoutout .shoutout-inner {
  color: #fff;
  padding: 1em 1.5em 1.5em;
  transition: box-shadow 0.3s ease;
  background: transparent;
  border-radius: 1em/1em;
  overflow: hidden;
  position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
  content: "";
  border-width: 0;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  background-color: #7289da;
  z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
  height: 200%;
  top: 0;
  left: -46px;
  transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
  height: calc(100% - 25px);
  right: 0;
  top: 0;
}
.discord-shoutout .title {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em 0;
}
.discord-shoutout p {
  font-size: 0.9em;
  font-weight: 300;
  margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
  margin-top: 1.4em;
}
.discord-shoutout .discord-button {
  padding: 0.6em 1em;
  color: white;
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
  border: 2px solid #fff;
  border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
  background: #fff;
  color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
  color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
  text-decoration: underline;
}
.discord-shoutout img {
  position: absolute;
  right: 1em;
  top: 1em;
  height: 1.4em;
}
<button class="reset-button" onclick="reset()">reset</button>
<div id="discord-shoutout" class="discord-shoutout">
  <div class="shoutout-inner">
    <img src="https://discordapp.com/assets/93608abbd20d90c13004925014a9fd01.svg">
    <span class="title">Hey there!</span>
    <p>
      Fancy having a chat?
    </p>
    <p>
      We're currently online on Discord!
    </p>
    <div class="discord-buttons">
      <a class="discord-button discord-primary" href="https://discord.gg/2nrFVCp" target="_blank">Join our server</a>
      <button class="discord-button discord-secondary" onclick="hide()">Close</button>
    </div>
  </div>
</div>

Is there a method to selectively apply the above animation only on mobile devices, utilizing media queries or any alternative technique?

javascripthtmljquerycssanimation

Answer №1

There are two different approaches to achieving this effect. One method involves using media queries, while the other utilizes JavaScript. Personally, I prefer utilizing media queries for this purpose. In the code snippet below, the animation is specified to only work on screen sizes smaller than 600px, effectively targeting mobile devices exclusively.

  1. Using Media Queries: You can include the necessary CSS within a media query block to trigger the animation.

CSS:

(CSS code example provided)
  1. Utilizing JavaScript: Alternatively, you can employ JavaScript to monitor the window width and apply/remove the appropriate animation class dynamically.

JS:

(JavaScript code example provided)

Answer №2

Here is a handy snippet to disable all animations exclusively on mobile devices. You can customize the media query size to suit your needs...

@media screen and (max-width: 768px) {
*, *:before, *:after {
/*Disable CSS transitions*/
transition-property: none !important;
/*Reset CSS transforms*/
transform: none !important;
/*Stop CSS animations*/
animation: none !important;
}

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

React does not allow objects as a valid child element. This error occurs when an object with keys {nodeType, data, content} is found

I am encountering an issue with displaying content from Contentful on the server component. Everything is functioning correctly with no runtime errors, but I am receiving this specific error message: "Objects are not valid as a React child (found: object w ...

javascriptreactjsnext.jsreact-server-components

Uploading files using HTML 5, Ajax, and jQuery

I am attempting to utilize jQuery to upload a file by using the ajax POST method and sending the uploaded file to url:"/files/uploads" with the parameter file. To achieve this, I have set up the following input elements: <form id="fileUploadForm"> ...

jqueryajaxhtml

Executing a Javascript GET request leading to a 301 redirect

Struggling to identify the issue at hand, I have turned to this platform in hopes of finding a solution. The setup involves an angularJS app with a GoLang/Gorilla mux server backend. The web app runs on http://localhost:8888/, while the server operates at ...

javascriptangularjsgethttp-status-code-301gorilla

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...

htmlcsspositioning

The image fails to appear

Check out my website at www.wostokhr.pl I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. An ...

htmlcss

Verification of javascript for an unpredictable image generator script

When running the W3C Validation tool, an error is returned stating 'img not acceptable here.' Any suggestions on how to resolve this issue? <script type="text/javascript" language="JavaScript"> NumberOfImagesToRotate = 9; FirstPart = &ap ...

javascript

What is the best way to navigate a dynamic table in Vue.js?

I'm currently working on creating dynamic tables in Vue using loops where users can upload a table and view it. <el-table :data="filtered" border style="width: 100%" height="500" @selection-change="handleSelectio ...

javascriptvue.jsvuejs3

JavaScript loop to target a specific item

My goal is to animate the correct div under each navigation item, rather than all of them with the "navItemUnder" class. You can see exactly what I mean by hovering over a navigation item in this codePen. I am looking for a solution to target only one lin ...

javascriptgsap

retrieving identifiers from a separate table for an array of values

As a newcomer to node and noSQL databases, I am facing challenges in grasping the concept of passing an array of IDs and retrieving the corresponding values from another table. I have 'users' and 'products' tables in my database. The st ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to craft an if/else statement for a situation when a twig variable is undefined?

When utilizing twig to declare a variable called user: <script type="text/javascript> {% if user is defined %} var user = { example: {{ userjson | raw }} }; {% endif %} </script> If a user is not logged in, an error message a ...

javascriptjsontwig

Nuxt.js static pages with relative URLs

I am currently working on developing static pages with Nuxt.js (MPA). After executing the generate command, I noticed that all the URLs in the <nuxt-link> tag start from the root directory, specifically /. For instance, my project structure looks lik ...

javascriptvue.jsnuxt.js

Allowing Cross-Origin Resource Sharing on an Express Server hosted using Firebase Cloud Functions

Hey there, I have a simple Express setup on Firebase, shown below: import { onRequest } from 'firebase-functions/v2/https'; import express from 'express'; import bodyParser from 'body-parser'; import router from './router ...

javascriptfirebaseexpressgoogle-cloud-functionscors

Can one initiate a server within Zapier Code?

Is there a way to send an HTTP CODE = 200 with a response body of 'OK' when receiving a notification on Zapier? I attempted to use the following code snippet in Zapier: var http = require('http'); const server = http.createServer((r ...

javascriptnode.jszapier

Tips for ensuring elements within a modal receive immediate focus when opened in Angular 2

I am relatively new to Angular JS and I am encountering some challenges with implementing a directive in Angular 2 that can manage focusing on the modal when it is opened by clicking a button. There have been similar queries in the past, with solutions pr ...

javascriptangularangular2-directives

Visualization of pie charts in Angular2 using Google library

Currently, I am in the process of building a web application using Angular2 that includes a Google pie chart. One of the components of the application is a Directive specifically designed for the pie chart. Below is the code snippet for the Directive: @D ...

javascriptangulargoogle-visualization

Unable to show the response from an HTML servlet using Ajax and qTip2

I am having an issue where I am trying to display text (or html) received from a servlet response in a qTip2 tooltip within a jsp page. Despite verifying that the servlet is being invoked and returning text using Firebug, I encountered an error when attemp ...

javajavascriptjqueryajaxservlets

Utilizing HTML to emphasize a section of text

Hey there! I have a question related to an image with unicodes. The letter featured in the image was written using unicode characters పా. I'm trying to highlight the white portion of the image, but simply replacing it with ా isn&apos ...

javascriptcsshtml

Getting rid of the Horizontal Scroll Bar

Having trouble with a persistent horizontal scrollbar in the "section3__container" container despite attempts to adjust size and overflow settings. Need assistance in removing this unwanted feature. <html lang="en"> <head> <m ...

javascripthtmlcsssassoverflow

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Using AngularJS, passing a value from outside a directive to the directive and detecting changes in the

As a newcomer to AngularJs, I am facing a challenge in retrieving data from outside a directive. The scenario involves multiple input fields being updated and the necessity for the directive to process this information. For instance, consider the code sni ...

javascripthtmlangularjsangularjs-directive