Attempting to implement scroll-based animation on my webpage

Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image.

Check out the codepen here.

Here is my JSFiddle.

<div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>

I suspect my issue lies in where I've placed the HTML code for the animation, but I've tried various locations and still can't get it to work.

I've included a web background image for reference.

htmlcssanimation

Answer №1

To ensure the scroll icon stays in place and possibly hide it while scrolling, simply add the fixed attribute to the overlay.

.scroll-downs {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #000;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #000;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}
<div class="scroll-downs">
  <div class="mousey">
    <div class="scroller"></div>
  </div>
</div>

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

Looking for a way to upload only part of a large file using HTML and PHP

Is it possible to create a PHP script that can upload only the first 1 MB of a very large file? Can this be achieved with a standard form upload in PHP by closing off the connection after 1 MB is uploaded? I have researched various uploaders (HTML5/Java ...

phpjavascripthtml

Firefox triggers drag events while passing over a div scrollbar

I am looking to create a file drag and drop feature using a styled div: When dragging files over the div, I want the border color to change When dragging files out of the div, I want the border color to revert back to the original In Firefox 35 (Ubuntu) ...

javascriptjqueryhtmlfirefox

I am currently facing an issue with retrieving the class value that is being generated by PHP code

I am currently facing an issue with jQuery and PHP. Whenever I attempt to target the click event on the class ".id_annonce" in the dynamically generated PHP code, it doesn't retrieve the exact value of what I clicked. Instead, it always gives me a fi ...

javascriptphpjqueryhtmlajax

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

javascriptjqueryhtmlcss

The alignment of elements on the right and left sides is not functioning as intended

I've been facing an issue with the alignment of my floats on my brand new website www.unicmedia.nl/case/oranje. Surprisingly, they seem to work fine in IE this time, but Firefox and Chrome are completely out of sync. Despite trying numerous solutions ...

htmlcss

Tips on enhancing the appearance of your numberbox with vibrant colors

Hello everyone! I am working with some devextreme code blocks and need help in changing the border color of a numberbox to red. Can anyone guide me on how to achieve this? import React, { useState } from 'react'; import { NumberBox } from 'd ...

cssreactjsdevextreme

Ways to showcase the outcome of a spin after each rotation

I am currently working on a spinning code snippet that allows users to spin and potentially win different amounts. The code includes functionality to prevent more than 3 spins, set random rotation values, and animate the spinning effect. However, I now wa ...

javascripthtmljquerycss

Tips for transferring input data to a static HTML page

After successfully identifying a value in a table using jQuery, I am faced with the challenge of passing it to a static HTML page. How can this transition be achieved smoothly? $('.gobutton').bind('click', function(){ var value = $( ...

jquerydjangohtml

How come the nth-child selector remains unaffected by other selectors?

Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/ <style> table td, th { padding: 8px; text-align: left; } table td:nth-child(1) { color: red; } table td { color: blue } </style> ... <table> <tr> ...

htmlcss

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

Retrieve Object Key in Angular 7

I have a specific item: this.item = { name:"Michael", age:18 }; I am looking to display it in an HTML format. name: Michael age: 18 <div >{{ item (name) }}</div> --??? should put name <div>{{ item.name }}</div> < ...

htmlangular

Endlessly tapping through each tab with no direction

I am attempting to click on all unopened tabs (elements) randomly across this page. While the code below usually does the trick, it sometimes doesn't click on all elements. I suspect that there might be an issue with how it loads indexes or some othe ...

pythoncssseleniumxpathselenium-webdriver

The BorderWidth property is set to 2px, however, it is not visible on the

Struggling with adding a border to a div in my app built with react and material-ui. Here is the snippet of code I've been working with: <div className={classes.search}> ... </div> search: { ... borderWidth: '2px', borde ...

cssmaterial-ui

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml

Enhance Your List with Icon Decorations

Is it feasible to utilize a sprite image in place of the default bullet for an ul list? Is this achievable? ...

htmlcsshtml-lists

Automatically insert personalized CSS design markers into Material-UI elements using code

Within my react-redux app, I am utilizing material-ui components. The initial UI prototype was established using adobe-xd, which has the capability to export character styles (design tokens) in a CSS file format: :root { /* Colors: */ --text-color: #F8E29 ...

cssreact-reduxmaterial-uiadobe-xd

Discover the method for storing multiple values in local storage using a dictionary with JavaScript

I have a scenario in my code where I need to update a value without storing a new one. Let's say I need to input values in the following format: { firstname:'kuldeep', lastname:- 'patel' } After entering the values, they g ...

javascriptjqueryhtmlarrays

Radio buttons are not having the :invalid pseudo class properly applied

Looking to style a radio group with a required attribute. Attempting to adjust the appearance of the radio group depending on whether an input is selected or not. However, it appears that the :invalid pseudo-class does not apply to radio buttons. ...

csshtmlradio-button

Hiding horizontal lines in a table without affecting vertical lines (Material-ui) - a step-by-step guide

Is there a way to hide the horizontal lines and timeslots in the table below without affecting the vertical lines? I attempted to use the visibility property on the td elements, but it hides both sets of lines. Any suggestions on how to resolve this is ...

htmlcssreactjsmaterial-ui