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

Can you employ a right-side offset in Bootstrap 4?

Is it possible to align a button with a textbox using the Bootstrap 4 layout system? https://i.sstatic.net/tN9II.png <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div ...

htmlcsstwitter-bootstrapbootstrap-4

The HTML table printout is missing cells in the first column

Encountered a strange issue with Internet Explorer and Chrome involving a basic HTML table. The table has no layout CSS, 2 columns, no styles, and its width is set to 100%. When attempting to print the table in these browsers, the first cell on the second ...

htmlprinting

Using a jQuery event to apply styles with CSS

Hello, I am using jQuery Easy UI on my webpage but feeling a bit confused. I want to create an input field that looks like a tagging field - meaning when the user types a separator character (let's say a comma), the word being typed will have its CSS ...

jquerycsstagging

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

Executing a script on a different HTML page without the need to reload it

I'm currently working on incorporating a notification system inspired by Facebook's design. This system will feature an icon in the header that, when clicked, reveals a drop-down containing a table of sorted notifications for the user. My goal is ...

jqueryhtmlajaxfacebookperl

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml

Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page ...

javascriptjquerycssapachecookies

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

Prevent users from tabbing to the next input field in a web form

Is it possible to prevent users from using the tab button on their keyboard to navigate to the next field in a form? <form action="/action_page.php"> First name:<br> <input type="text" name="firstname"> <br> Last name:< ...

javascriptjqueryhtmlweb

Difficulty with positioning two divs side by side in HTML/CSS?

Hey there, I'm facing some strange CSS issues while trying to achieve a specific layout. I want to have a warning icon on the right side of each input field, which are horizontally centered: https://i.sstatic.net/IY3xp.png Currently, I have managed ...

htmlcss

What is the best approach for implementing a CSS reset across multiple websites with different content?

As I work on a page that will be displayed across numerous websites beyond my control, shown within a jQuery UI dialog window using $.load(), the content is vulnerable to the CSS directives set by each individual site. To prevent conflicts, I have made sur ...

css

Discovering distinct colors for this loading dots script

Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...

javascripthtmlcss

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

css

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

javascriptjqueryhtmlcss

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

htmlcsswebweb-deployment

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

htmlcss

Namespace SyndicationElementExtension refers to

I'm trying to achieve the following output: <someNSalias:full-text>Good news everyone!</someNSalias:full-text> This is the code I have written: var element = new SyndicationElementExtension(field.Name, field.HasNamespace ? RssNs : strin ...

c#html.netrssrss2

The functionality of the bootstrap grid system may vary depending on the size of the device being

I'm currently experiencing an unusual issue with Bootstrap. From what I understand, the bootstrap grid system is based on 12 units and is supposed to work seamlessly across various device sizes, such as iPhones. I have a simple banner comprised of 5 c ...

htmltwitter-bootstrapcss

Steps for filling an HTML table within a dynamically loaded DIV

I have a container in my HTML page where I dynamically load other pages using the jQuery.load() function. One of the pages requires me to populate a table from the database just after/before it loads. How can I trigger a JavaScript function to execute righ ...

javascriptjqueryhtml