Tips for creating a responsive CSS animation

Currently, I am working on an animation project with a specific end position that should resemble the image below. However, when viewed in resolutions lower than 1080p, the animation appears distorted as shown in this image: https://i.sstatic.net/SyqpZ.png

I have used responsive units such as "vw / %" in my code, so I'm surprised to see this issue occurring.

Here is the CSS code snippet:

 body {
        background-image: url("https://i.imgur.com/I6ixFFG.jpg");

    }
/* background sky */
    .fondo {
        background-image: url("https://i.imgur.com/UAq0obS.png");
        width: 50vw;
        height: 20vw;
        background-size: cover;
        margin: 0 auto;
        overflow: hidden;
        position: relative;

    }
// Remaining code snippets are included within the <pre><code> tags for better presentation

htmlcsscss-animations

Answer №1

In the following code snippet, we adjust the background size to maintain the same aspect ratio across different screens.

body {background-image: url("https://i.imgur.com/I6ixFFG.jpg");}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x; 
background-size:4vw auto;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
background-size:4vw auto;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size:13vw auto;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size:1vw auto;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
@keyframes olas-front {
0% {left: -1vw;bottom: -9vw;}
50% {left: 0vw;bottom: -8.7vw;}
100% {left: -1vw;bottom: -9vw;}
}
@keyframes olas-back {
0% {left: -2vw; bottom: -9vw;}
50% {left: -3vw;bottom: -8.7vw;}
100% {left: -2vw;bottom: -9vw;}
}
@keyframes barco {
0% {left: -7vw;}
100% {left: 0vw;}
}

@keyframes barco-balanceo {
0% {bottom: -7.6vw;}
50% {bottom: -7.9vw;}
100% {bottom: -7.6vw;}
}

@keyframes interrogacion {
from {opacity: 0;}
to {opacity: 1;}
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="fondo"> <!-- background sky -->
        <div class="olasFront"></div> <!-- Frontal waves -->
        <div class="bote"> <!-- boat -->
            <div id="interrogacion"> <!-- question mark -->

            </div>
        </div>
        <div class="olasBack"></div> <!-- back waves -->
    </div>
</body>
</html>

Answer №2

I have set the image to a fixed size. Feel free to try resizing it using this CodePen link

body {
            background-image: url("https://i.imgur.com/I6ixFFG.jpg");

        }

        .fondo {
            background-image: url("https://i.imgur.com/UAq0obS.png");
            width: 50vw;
            height: 30vw;
            min-height: 250px;
            background-size: cover;
            margin: 0 auto;
            overflow: hidden;
            position: relative;

        }

         .olasFront {
            background-image: url("https://i.imgur.com/w5yrlLy.png");
            position: absolute;
            width: 120%;
            height: 75px;
            z-index: 3;
            bottom: -6%;
            left: -3%;
            
            animation: olas-front 2s infinite linear;
            animation-iteration-count: infinite;
            background-repeat: repeat-x; 

         } 

        .olasBack {
            background-image: url("https://i.imgur.com/e1DVYvt.png");
            position: absolute;
            width: 100%;
            width: 120%;
            height: 75px;
            z-index: 1;
            bottom: 0;
            left: -2%;
            animation: olas-back 2s infinite linear;
            animation-iteration-count: infinite;
            background-repeat: repeat-x;

        }

        .bote {
            background-image: url("https://i.imgur.com/Fk4CUZp.png");
            position: absolute;
            z-index: 2;
            height: 215px;
            width: 100%;
            background-repeat: no-repeat;
            bottom: -10%;
            animation: barco 2s linear, barco-balanceo 2s linear infinite;
        }

        #interrogacion {
            background-image: url("https://i.imgur.com/1g1A4sx.png");
            width: 50px;
            height: 50px;
            position: absolute;
            background-repeat: no-repeat;
            top: -30px;
            left: 190px;
            opacity: 0;
            animation: 2s interrogacion 2s linear;
            animation-fill-mode: forwards;

        }

        @keyframes olas-front {
            0% { left: -3%; }
            50% { left: 0; }
            100% { left: -3%; }
        }

        @keyframes olas-back {
            0% { left: -2%; }
            50% { left: -5%; }
            100% { left: -2%; }
        }

        @keyframes barco {
            0% { left: -7vw; }

            100% { left: 0vw; }
        }

        @keyframes barco-balanceo {
            0% { bottom: -10%;}

            50% { bottom: -12%; }

            100% { bottom: -10%; }
        }

        @keyframes interrogacion {
            from { opacity: 0; }
            to { opacity: 1; }
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    
</head>

<body>

    <div class="fondo">
        <div class="olasFront"></div>
        <div class="bote">
            <div id="interrogacion">

            </div>
        </div>
        <div class="olasBack"></div>
    </div>

</body>
<!-- Frontal waves -->
</html>

Answer №3

It looks like adjusting your CSS using a media query based on width changes would be helpful.

/* Apply styles if screen size is 1050px wide, or less */
@media screen and (max-width: 1050px) {
   #interrogacion{
    margin-left: 20vw;
     bottom : 1.8vw;
     // Update your CSS according to your needs
  }
}

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

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Hey there! I need some assistance in completing this code snippet. I have a div with overflow:hidden and a margin-left of 82px. Inside it, there is a share link and a ul list containing three external links. When I hover over the share link, everything w ...

javascriptjquerycsshoveronmouseover

Refreshing a div using JQuery/Ajax upon an update to a column in a database table

I am interested in checking for database column value changes and utilizing jQuery/Ajax to load a specific page into a designated div container. For example, let's say that on the main page, I have 1.php displayed within a div with the id "status." ...

javascriptphpjqueryhtmlajax

Create a fully responsive full-page image layout without relying on the body tag

Recently, I've been trying to figure out how to make an image scale up to fill the entire page without relying on the body tag. Using the body tag causes issues with other elements appearing over the image instead of below it, which is not the desired ...

cssimage

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...

javascriptcssreactjsreact-native

Avoid repetitive clicking of the button to activate the function

Is there a way to prevent spamming of a button when calling a function? I want the user to only be able to call the function once every second when clicking the button. I have tried using setTimeout but it doesn't seem to work, as it still allows for ...

jqueryhtml

Aligning the Navigation Bar in the Middle

I am having trouble centering my navigation bar and making it horizontal on my online CV. Currently, it is vertical and positioned to the left of the page. Additionally, I would like to know how I can implement a flexbox or grid layout for my navigation ba ...

htmlcssflexboxgrid

Tips for preventing divs from sliding to the next row when adding margin in Bootstrap

{% for plant in plants %} {% if forloop.counter0|divisibleby:3 %} <div class="row row-cols-3"> {% endif %} {% include 'included/_plant_cell.html' %} {% if forloop.counter|divisibleby:3 %} </div&g ...

htmlcssdjangobootstrap-5

What is the process for transitioning from one HTML file to another in order to develop an iOS hybrid application?

I am looking to transition a webView page into a Spring-MVC structure with a hybrid format. My goal is to replace the current JSP file with an HTML file and place it within the ios project folder. The process of inserting the HTML test file was successful ...

javascripthtmliosswift

How to create a floating <Toolbar/> with ReactJS, Redux, and Material-UI

Can anyone help me figure out how to make a toolbar floatable when scrolling down using Material-UI? I tried setting textAlign:'center', position: 'fixed', top: 0, but it's resizing strangely when applied to the <Toolbar/>. ...

javascripthtmlreactjsmaterial-ui

What is the process for extracting the value of a checkbox generated through JavaScript?

I recently came across a helpful post on Stack Overflow that provided sample code demonstrating how to display multiple list of checkboxes dynamically on a dropdown list. The function in the code was exactly what I needed for my webpage. However, I encount ...

javascripthtml

Creating an element that remains a consistent height despite zooming or resizing the window: A guide with HTML and CSS

Recently, I created a custom scrollbar but faced an issue with its width. Whenever I zoom in or out (Ctrl + mousewheel), the width (set to 10px) changes due to being in pixels. When switched to width: 1vw, it works well with zooming but gets affected by wi ...

javascripthtmlcss

How to reposition a DIV element using CSS only

I'm facing a challenge where I need to relocate a DIV element to the bottom of the body without altering the HTML structure. I tried referring to some existing threads for solutions, like this one on Stack Overflow: Moving a div from bottom to top, us ...

htmlcssbootstrap-4

What is the best way to align the button next to the textbox?

Is it possible to remove the space between a button and a textbox in ASP.NET so that they appear next to each other without any gap? If so, how can this be achieved? Here is my CSS code snippet: .input, .button { margin:-10px 0px 0px 0px; } This is my A ...

c#asp.nethtmlcss

HTML - Image is only partially visible

While attempting to set up this theme for my blog, I encountered a minor issue - the avatars in the comment section are not displaying correctly, as they appear to be cut off along with the container. Despite numerous attempts to edit the code, I have be ...

htmlcssimageblogspotavatars

Centering the contents of the grid

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

Leveraging a JQuery plugin to generate dynamic HTML content

Recently, I came across a fantastic JQuery plugin that Stack Overflow graciously provided for everyone to use :) Auto-size dynamic text to fill fixed size container However, I encountered a little challenge while trying to implement this on an HTML eleme ...

jquery.nethtmlasp.net-mvc-2

Implementing scrolling functionality within a nested container

I need help with getting a nested container (.widget2) to scroll while still keeping the borders intact. Currently, the inner container is scrolling past the bottom edge of the parent container, and the scrollbar isn't displaying correctly. If you w ...

htmlcssflexbox

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react